Viostream Upload Widget

Size: px

Start display at page:

Download "Viostream Upload Widget"

Millicent Parks
5 years ago
Views:

1 Viostream Upload Widget Version: 1.0 Date: 15 September, 2015 Viocorp 2015 Author Brendon Kellett

2 Viocorp International Pty Ltd ABN: Jones Bay Wharf, Pirrama Road, Pyrmont NSW 2009 Australia T: F: E: admin@viocorp.com Revision history Version Date Author/s Changes made /9/2015 Brendon Kellett Initial version. Review/approval Reviewed by Date Brendon Kellett 8/09/2015 Approved by Sarah Kirkby 15/09/2015 Commercial in Confidence Page 2 of 12 Version: 1.0

3 Contents Integration Guide... 4 Usage... 4 Generating an Upload Button... 4 Event Handling... 5 Including Metadata Fields... 7 Validation... 7 Limitations... 8 Implementation Examples... 8 Styling... 8 Code Samples... 11

4 Integration Guide The Viostream Upload Widget enables media assets to be uploaded into Viostream without the need to log into the Viostream console It can also be integrated with any third-party websites and web-applications. The Viostream Upload Widget must be embedded in a server-generated web page. Usage The Upload Widget is first instantiated through a call to the Viostream API to authorise upload to your account. In order to access the Viostream API, the following information is required for authentication: Account key (Username) Access key (Password) This information is available in the Manage This Account section of the Viostream Console, under the API tab. Note: Authentication must occur on the server-side to prevent your Viostream Account Key and API Access Key from being exposed on the client. The Viostream API uses Basic Authentication for access authorisation. For example, in order to obtain your Viostream account information, the following request is made to the API: Request Response GET HTTP/1.1 Host: api.app.viostream.com Authorization: Basic XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Accept: */* HTTP/ OK Content-Type: application/json; charset=utf-8 Content-Length: 90 Connection: keep-alive "id":"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx","publickey":"vc-xxxxxxxx","title":"account Name" Generating an Upload Button 1. Call the following API endpoint with valid Basic Authentication credentials: Commercial in Confidence Page 4 of 12 Version 1.0

5 This will return a signed URL that will temporarily authorise the Upload Widget to upload to your Viostream account: inituploadurl: " 23T14%3a31%3a %2b10%3a00&signature=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" Note: This signed URL has an expiry timestamp - therefore a new URL must be requested each time the Upload Widget is instantiated. 2. To generate the button, place the following JavaScript within the <head> tags of the page where the button should appear: <script src=" 3. Place a div element where the button should appear, then call the Upload Widget Add method, passing the div s ID and the signed URL: <div id="uploadbutton"></div> <script> $v.uploader.add('uploadbutton', '[inituploadurl]'); </script Event Handling The Upload Widget supports the following events which can be used to indicate status and progress of the upload to the user: start progress complete failed Called when the upload starts Called when the upload progress updates Called when the upload completes Called when an error occurs Commercial in Confidence Page 5 of 12 Version 1.0

6 Event Handling Example: <script> var widgetprogress = $('#widget-progress'); $v.uploader.on('start', function (key, filename, filesize) widgetprogress.append('<div data-key="' + key + '"><em>' + filename + '' + '</em><span>0%</span></div>'); ); $v.uploader.on('progress', function (key, percent) var bar = widgetprogress.find('[data-key="' + key + '"]').find('span'); bar.width(400 * (percent / 100)); bar.text(percent + "%"); ); $v.uploader.on('complete', function (key) var p = widgetprogress.find('[data-key="' + key + '"]').addclass('complete'); p.find('span').width(400).text("done!"); window.settimeout(function () p.fadeout(300, function () p.remove(); ), 5000); ); $v.uploader.on('failed', function (key, message) if (!key && message) alert(message); var p = widgetprogress.find('[data-key="' + key + '"]').addclass('failed'); p.find('span').removeattr('style').text("failed!"); window.settimeout(function () p.fadeout(300, function () p.remove(); ), 10000); ); $v.uploader.add(uploadbutton, XXXXXXXX&expiry= T14%3a31%3a %2b10%3a00&signature=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'); </script> The key parameter that is passed to these events is the referenceid for the new Media and it can be used to query the API. Commercial in Confidence Page 6 of 12 Version 1.0

7 Including Metadata Fields Currently, the Upload Widget supports Title, Description and Tags. To allow the user to specify these properties: 1. Place a div in the page, and ensure the div s ID matches the upload button s div ID with -form appended. 2. Then place appropriate form elements within this div, with the appropriate name attributes as shown in the example below. <div id="uploadbutton-form"> <input id="title" name="title" placeholder="title" type="text"> <textarea id="description" name="description" placeholder="description"></textarea> <input id="tags" name="tags" placeholder="title" type="text"> </div> Multiple tags are supported; end users should separate tags with a comma. All fields are optional. The Upload Widget will serialise the fields in this div and submit them with the uploaded asset. Validation To validate the metadata fields, the Upload Widget will call an optional validation function when the user clicks the upload button. To specify a validation function: call the Validate method and pass it the upload button s div ID and the validation function: Validation Example: <script> function validate() isvalid = true; titleinput = document.getelementbyid("title"); if(titleinput.value == null titleinput.value == "") alert("please specify a title"); isvalid = false; return isvalid; $v.uploader.validate('uploadbutton', validate); </script> Commercial in Confidence Page 7 of 12 Version 1.0

8 Limitations The Viostream Upload Widget can only ingest video and audio. Other than Title, Description, and Tags, no metadata can be applied to the asset at upload, and will need to be added to the asset through the Viostream console. All media assets uploaded through the Upload Widget will be created by the System user rather than a specific console user account. Support for Internet Explorer 8 and 9 requires Silverlight to be installed on the end user s browser. Implementation Examples Examples of the Upload Button are available online for testing and demonstration purposes and can be found at the following URLs: PHP: C#: The code used to create these examples is available in the Code Samples section of this document. Styling CSS Styles can be applied to change the look of the upload button and progress bar. Commercial in Confidence Page 8 of 12 Version 1.0

9 Example Upload Progress Bar Style: #widget-progress line-height: 24px; font-family: Arial; font-size: 12px; #widget-progress div.complete opacity: 0.5; #widget-progress div.failed opacity: 0.7; color: red!important; #widget-progress em display: inline-block; background: #F1EFE8; color: #AAA79E; width: 146px; padding: 0 8px; height: 24px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-weight: bold; #widget-progress span display: inline-block; height: 24px; margin-left: 2px; background: #AAA79E; color: #FFF; text-indent: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 26px; transition: width 1s; Commercial in Confidence Page 9 of 12 Version 1.0

10 Example Button Style:.upload-widget-btn background: #fd8505; color: #fff; display: inline-block; font-size: 14px; font-weight: bold; padding: 8px 16px; text-decoration: none; overflow: hidden; font-family: sans-serif; position: relative;.upload-widget-btn:hover,.upload-widget-btn:active,.upload-widget-btn:focus text-decoration: none; color: #fff; background: #ee5a00;.upload-widget-btn object position: absolute; top: 0; left: 0; right: 0; bottom: 0;.upload-widget-btn input position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( ); border: 0; Note: Appearance of the Upload Widget after the above styles are applied Commercial in Confidence Page 10 of 12 Version 1.0

11 Code Samples PHP: $apiurl = " function CallApi($url, $user, $pass) $curl = curl_init(); curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); curl_setopt($curl, CURLOPT_USERPWD, $user.":".$pass); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); $result = curl_exec($curl); curl_close($curl); $initupload; return json_decode($result); if (isset($_post["publickey"]) && isset($_post["accesskey"])) $initupload = CallAPI($apiUrl."account/newupload", $_POST["publicKey"], $_POST["accessKey"]); echo $initupload->inituploadurl; Commercial in Confidence Page 11 of 12 Version 1.0

12 C#.NET MVC: using System; using System.Net.Http; using System.Text; using System.Web.Mvc; public class UploaderController : Controller const string publickey = "PUBLIC_KEY"; const string accesskey = "ACCESS_KEY"; public ActionResult Index() if (!string.isnullorempty(publickey) &&!string.isnullorempty(accesskey)) UploaderViewModel model; var route = " if (TryGetModel(route, publickey, accesskey, out model)) return View(model); return View(new UploaderViewModel()); public bool TryGetModel<T>(string route, string username, string password, out T model) where T : new() model = default(t); try using (var client = new HttpClient()) var request = new HttpRequestMessage(HttpMethod.Get, route); request.headers.add("authorization", "Basic " + Convert.ToBase64String(Encoding.UTF8.GetBytes(username + ":" + password))); var response = client.sendasync(request).result; if (response.issuccessstatuscode) model = response.content.readasasync<t>().result; return true; return false; catch (Exception) return false; public class UploaderViewModel public string InitUploadUrl get; set; Commercial in Confidence Page 12 of 12 Version 1.0

Chapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21

Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...