Technical

Introduction: A good place to start describing the technical aspects of Clipper is with this diagram showing the ‘architecture’ of how the different components of Clipper fit together and work.

Here we provide a ‘walkthrough’ describing how Clipper works with reference to the diagram. There is some technical jargon involved and we try to explain as we go through with explanatory links.

A/V Collections:
At the top right hand side of the diagram are the online audio-visual collections that Clipper can work with. At the moment Clipper works with YouTube and any MP3 or MP4 files on the web with a URL. In the future Clipper could expand to include other social media services and we have already had successful trials using Vimeo, FaceBook and SoundCloud. Clipper could also be integrated into private and open online collections of audio-visual content – such as archives and libraries. To get an idea of the potential uses of Clipper please see the ‘Uses‘ page.

The Clipper Editor: Below we see a screen grab of the Clipper Editor in action. The user has just completed

a search of YouTube using the term ‘Cars’ and has created a clip from one of the the Disney films of the same name. For this we are using the YouTube api’s that are made available to allow developers to create services that are linked to the YouTube collection, like Clipper. YouTube supply a whole load of data about each video that we can use, including thumbnail images that we use in our Cliplists. This YouTube example also provides a pretty good idea of what Clipper could be like if it was integrated into an archive or collection with access to catalogue data etc. – it would have the potential to transform existing under-used archives – for a fuller discussion please visit theUses‘ page.

The editor allows the users to preview the video (or audio) and choose where to create the start and stop points, add a title, write an annotation, and add tags, which you can see in the diagram. Once the user saves the clip it appears in the left-hand Cliplist as shown in the digram together with the thumbnail image (supplied via YouTube.

Clipper Editor – Structure and Software: The Clipper editor contains two components 1) a ‘client’ that the user interacts with to create the clips and Cliplists and play them and 2) a ‘database server’ that takes data from the client and passes it on to the database either in the form of clips to store or requests to retrieve data in order to search for and play the clips. The Clipper Editor software is written in AngularJS, a form of javascript, that can work on server-side applications. The AngularJS code runs on top of the Express.js web server – allowing Clipper to communicate over the web. Express.js, in turn runs on top of the Node.js javascript runtime environment. This combination of technologies enables javascript based software applications to run on the server-side, rather than just on the the client-side in a users’s web browser. There are a number of advantages to this in terms of performance, but a major factor is that this now enables web developers to create server-side programmes to support their web development work using a language they are already familiar with.

Clipper Data – it’s small, very small: As we described in the How it Works section the actual data Clipper handles for each clip is very small indeed – the video and thumbnail images from YouTube are served direct from the YouTube site (or other source) through the Clipper Editor, they are never stored on the Clipper servers. Below we show you the code that represents 1 clip, its from YouTube and the important information has been highlighted in bold orange text showing, in order from top to bottom, the Title, Annotation, Tag, Video URL, the start and stop times.

{
“_id” : ObjectId(“58da74d1dbef2814122203a8”),
“id” : “http://clippertube.com/clip/1490711728723”,
“type” : “Annotation”,
“motivation” : “describing”,
“body” : [
{
“type” : “TextualBody”,
“text” : “<div><span class=\”author-will\”>Vegetables and Nutritional Values</span></div><div><span class=\”author-will\”>Common vegetables with their nutritional characteristics</span></div>”,
“format” : “text/html”,
“language” : “en”,
“purpose” : “describing”
},
{
“type” : “TextualBody”,
“text” : [
“NLS”
],
“format” : “text/html”,
“language” : “en”,
“purpose” : “tagging”
}
],
“target” : {
“source” : “http://www.youtube.com/v/wtDmnGzZNAs“,
“format” : “video/mpeg”,
“type” : “Video”,
“selector” : {
“type” : “FragmentSelector”,
“conformsTo” : “http://www.w3.org/TR/media-frags/“,
“value” : “t=114,117”
}
},
“clipperNativeProps” : {
“parentProject” : “http://clippertube.com/project/1490711564535”,
“parentCliplist” : [
null
],
“owner” : “clipper2@clippertube.com”,
“thumb” : “https://i.ytimg.com/vi/wtDmnGzZNAs/default.jpg”
}
}

Code for a clip

The total size of this saved as a local html document is about 1.4Kb – whether the clip is only a few seconds long or hours of high definition video the Clipper data that represents that clip stays the same. Below is what the Clip looks like in the Clipper Editor with video clip about to start playing:

**The Single Clip Playing in the Editor**

Clipper Editor Data Model: Clipper uses the W3C standards as much as possible to ensure the data it produces can be interoperable with other systems and to increase the likelihood of that data being useful and accessible in the long term. The Clipper data is encoded in compliance with the W3C Web Annotation Data Model produced by the work of the W3C WEB ANNOTATION WORKING GROUP who have produced some really useful resources including a detailed interactive infographic. This describes how web annotation technology works and how it has the potential to influence and change the way we use the web. It nicely describes how relations between content creators, publishers, annotators (who are also creating content) and annotation service providers may interact in the near future. We think this has particular implications and benefits for those operating digital collections in the heritage and culture sectors – we shall pick up that discussion again in the ‘Uses‘ section of this website. The other W3c data standard we are using is that of ‘Media Fragments‘, which provides a standardised way to describe parts of online media.

Clipper Editor JSON-LD: The data that Clipper creates is encoded in the JSON-LD format this is now widely used by web developers to encode their data and is often associated with the ideas about the ‘Semantic Web‘ and ‘Linked Data‘ as put forwards by Tim Berners-Lee. Like many others we are using it because of its expressiveness, simplicity and ability to link together different pieces of data in a human-readable way as well as being understood by computers. It is a popular and powerful format, considered by many to be superior to older data formats like XML because of its processing speed advantages and being based on the widely used javascript format is easier for web developers to work with. JSON-LD stands for JavaScript Object Notation for Linked Data. Here is a useful non-technical video explaining Linked Data and here is another video that does a great job of describing how JSON-LD works.

Clipper Database MongoDB: The data from the Clipper editor, encoded in JSON-LD format is saved on the database which is built on MongoDB, this is a ‘document based’ database where the data is stored in ‘JSON-like’ documents, this guide explains things further. You can see in the ‘Clipper Technical Architecture Diagram’ at the top of this page how the JSON-LD data flows back and forth between the Editor and the Database and from the Database into the Clipper Service Viewer.

The Clipper Service Viewer: This is what non-Clipper users see when a Clipper user shares a clip or a Cliplist with them. It is essentially the Editor view presented without any of the editor controls. The JSON-LD data for the content is passed to a webpage that presents and styles the data using HTMl and CSS, the recipient can then interact with the content in the Service Viewer.

Social Media APIs: Clipper can make use of the APIs that social media companies provide. When a Clipper user decides to share their content by clicking on the ‘Share’ icon they are presented with both the web links and a range of social media icons that enable the content to be shared through their network account with that social media provider.

Custom APIs & Integrations: Some services and collections, like YouTube, can offer deep and customisable links to using their service. Using this in Clipper with YouTube we are able to integrate Clipper closely into the YouTube ecosystem. The benefits of this include being able to search YouTube content and bring back lots of metadata and thumbnails for Clipper to use. The YouTube example provides a good example of what Clipper could do if it was integrated into an institutional archive

Share this: