nacl sdk: add PPB_VideoEncoder example

native_client_sdk/src/examples/api/video_encode/example.js

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+function $(id) {
+  return document.getElementById(id);
+}
+
+
+function success(stream) {
+  track = stream.getVideoTracks()[0];
+  var video = $('video')
+  video.src = URL.createObjectURL(stream);
+  video.track = track;
+  video.play();
+
+  var list = $('profileList');
+  var profile = (list.length < 1) ? 'vp8'
+    : list.options[list.selectedIndex].value;
+
+  common.naclModule.postMessage({
+    command: 'start',
+    track: track,
+    profile: profile,
+    width: 640,
+    height: 480
+  });
+}
+
+function failure(e) {
+  console.log("Error: ", e);
+}
+
+function startRecord() {
+  $('length').innerHTML = ' Size: ' + window.dataArray.byteLength + ' bytes';

[binji, 2015/03/31 17:41:19]

please define global variables at the top of the file, and don't use window.*

[llandwerlin-old, 2015/04/02 09:59:01]

Done.

+  navigator.webkitGetUserMedia({audio: false, video: true},
+                               success, failure);
+}

[binji, 2015/03/31 17:41:19]

disable the start button and enable the stop button.

[llandwerlin-old, 2015/04/02 09:59:01]

Done.

+
+function stopRecord() {
+  common.naclModule.postMessage({
+    command: "stop"
+  });
+  var video = $('video');
+  video.pause();
+  video.track.stop();
+  video.track = null;
+}

[binji, 2015/03/31 17:41:19]

disable the stop button and enable the start button and download button

[llandwerlin-old, 2015/04/02 09:59:00]

Done.

+
+function saveBlob(blob) {
+  var blobUrl = URL.createObjectURL(blob);

[binji, 2015/03/31 17:41:19]

Use the html5 download attribute instead. That way you can specify a nice
download name instead of the ugly blob url name:
http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

[llandwerlin-old, 2015/04/02 09:59:00]

Done.

+  window.location = blobUrl;
+}
+
+function handleMessage(msg) {
+  if (msg.data.name == 'started') {

[binji, 2015/03/31 17:41:19]

this message never fires on my machine -- I get an error "Error: Var(-6) :
Cannot get supported profiles". Perhaps the start/stop buttons should be
disabled until the "supportedProfiles" message is received?

[llandwerlin-old, 2015/04/02 09:59:01]

You must have tested before https://codereview.chromium.org/956893002 landed,
and might not have any supported profiles.
Will disable all buttons until the profiles are reported.

+    console.log('recording!');

[binji, 2015/03/31 17:41:19]

display this to the user, not just the javascript console log. You can use
common.logMessage(...).

[llandwerlin-old, 2015/04/02 09:59:01]

Done.

+  } else if (msg.data.name == 'data') {
+    appendData(msg.data.data);
+  } else if (msg.data.name == 'stopped') {
+    console.log('done recording! bytes: ' + window.dataArray.byteLength);

[binji, 2015/03/31 17:41:19]

common.logMessage

[llandwerlin-old, 2015/04/02 09:59:00]

Done.

+  } else if (msg.data.name == 'supportedProfiles') {

[binji, 2015/03/31 17:41:19]

I tested this on my linux box and this message has an array of length 0. Handle
this case by disabling the start button and displaying an error to the user?

[llandwerlin-old, 2015/04/02 09:59:01]

https://codereview.chromium.org/956893002 added support for a software VP8
encoder. With this we should always get at least one profile supported.

+    console.log('profiles: ', msg.data);
+    var profileList = $('profileList');
+    for (var node in profileList.childNodes)
+      profileList.remove(node);
+    for (var i = 0; i < msg.data.profiles.length; i++) {
+      var item = document.createElement('option');
+      item.label = item.value = msg.data.profiles[i];
+      profileList.appendChild(item);
+    }
+  }
+}
+
+function resetData() {
+  window.dataArray = new ArrayBuffer(0);
+}
+
+function appendData(data) {
+  var tmp = new Uint8Array(window.dataArray.byteLength + data.byteLength);
+  tmp.set(new Uint8Array(window.dataArray), 0 );
+  tmp.set(new Uint8Array(data), window.dataArray.byteLength);
+  window.dataArray = tmp.buffer;
+  $('length').innerHTML = ' Size: ' + window.dataArray.byteLength + ' bytes';

[binji, 2015/03/31 17:41:19]

use textContent instead of innerHTML

[llandwerlin-old, 2015/04/02 09:59:00]

Done.

+}
+
+function attachListeners() {
+  $('start').addEventListener('click', function (e) {
+    resetData();
+    startRecord();
+  });
+  $('stop').addEventListener('click', function (e) {
+    stopRecord();
+  });
+  $('download').addEventListener('click', function (e) {
+    saveBlob(new Blob([dataArray], { type: "application/octet-stream" }));
+  });
+}
+
+// Called by the common.js module.
+function moduleDidLoad() {
+  // The module is not hidden by default so we can easily see if the plugin
+  // failed to load.
+  common.hideModule();
+  common.naclModule.addEventListener('message', handleMessage, false);
+}