nacl sdk: add PPB_VideoEncoder example

BUG=455409

Review URL: https://codereview.chromium.org/1037793003

Cr-Commit-Position: refs/heads/master@{#324026}

native_client_sdk/src/build_tools/sdk_files.list

@@ -20,6 +20,7 @@ examples/api/url_loader/*
 examples/api/var_array_buffer/*
 examples/api/var_dictionary/*
 examples/api/video_decode/*
+examples/api/video_encode/*
 examples/api/websocket/*
 examples/button_close.png
 examples/button_close_hover.png

native_client_sdk/src/build_tools/test_projects.py

@@ -73,6 +73,7 @@ DISABLED_TESTS = [
     # http://crbug.com/262379.
     {'name': 'graphics_3d', 'platform': ('win', 'linux', 'mac')},
     {'name': 'video_decode', 'platform': ('win', 'linux', 'mac')},
+    {'name': 'video_encode', 'platform': ('win', 'linux', 'mac')},
     # media_stream_audio uses audio input devices which are not supported.
     {'name': 'media_stream_audio', 'platform': ('win', 'linux', 'mac')},
     # media_stream_video uses 3D and webcam which are not supported.

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

+{
+  'TARGETS': [
+    {
+      'NAME' : 'video_encode',
+      'TYPE' : 'main',
+      'SOURCES' : [
+        'video_encode.cc',
+      ],
+      'LIBS': ['ppapi_cpp', 'ppapi', 'pthread']
+    }
+  ],
+  'DATA': [
+    'example.js'
+  ],
+  'DEST': 'examples/api',
+  'NAME': 'video_encode',
+  'TITLE': 'Video Encode',
+  'GROUP': 'API',
+  'PERMISSIONS': ['videoCapture'],
+  'MIN_CHROME_VERSION': '43.0.0.0'
+}

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.
+
+var dataArray;
+const MIME_TYPE = "application/octet-stream";
+
+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) {
+  common.logMessage("Error: " + e);
+}
+
+function cleanupDownload() {
+  var download = $('download');
+  if (!download)
+    return;
+  download.parentNode.removeChild(download);
+}
+
+function appendDownload(parent, blob, filename) {
+  var a = document.createElement('a');
+  a.id = "download";
+  a.download = filename;
+  a.href = window.URL.createObjectURL(blob);
+  a.textContent = 'Download';
+  a.dataset.downloadurl = [MIME_TYPE, a.download, a.href].join(':');
+  parent.appendChild(a);
+}
+
+function startRecord() {
+  $('length').innerHTML = ' Size: ' + dataArray.byteLength + ' bytes';
+  navigator.webkitGetUserMedia({audio: false, video: true},
+                               success, failure);
+
+  $('start').disabled = true;
+  $('stop').disabled = false;
+  cleanupDownload();
+}
+
+function stopRecord() {
+  common.naclModule.postMessage({
+    command: "stop"
+  });
+  var video = $('video');
+  video.pause();
+  video.track.stop();
+  video.track = null;
+
+  $('start').disabled = false;
+  $('stop').disabled = true;
+  appendDownload($('download-box'),
+                 new Blob([dataArray], { type: MIME_TYPE }),
+                 'Capture.video');
+}
+
+function handleMessage(msg) {
+  if (msg.data.name == 'data') {
+    appendData(msg.data.data);
+  } else if (msg.data.name == 'supportedProfiles') {
+    common.logMessage('profiles: ' + JSON.stringify(msg.data.profiles));
+    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);
+    }
+    $('start').disabled = !(msg.data.profiles.length > 0);
+  } else if (msg.data.name == 'log') {
+    common.logMessage(msg.data.message);
+  }
+}
+
+function resetData() {
+  dataArray = new ArrayBuffer(0);
+}
+
+function appendData(data) {
+  var tmp = new Uint8Array(dataArray.byteLength + data.byteLength);
+  tmp.set(new Uint8Array(dataArray), 0 );
+  tmp.set(new Uint8Array(data), dataArray.byteLength);
+  dataArray = tmp.buffer;
+  $('length').textContent = ' Size: ' + dataArray.byteLength + ' bytes';
+}
+
+function attachListeners() {
+  $('start').addEventListener('click', function (e) {
+    resetData();
+    startRecord();
+  });
+  $('stop').addEventListener('click', function (e) {
+    stopRecord();
+  });
+}
+
+// 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();
+}

native_client_sdk/src/examples/api/video_encode/index.html

+<!DOCTYPE html>
+<html>
+<!--
+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.
+-->
+<head>
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="-1">
+  <title>{{title}}</title>
+  <script type="text/javascript" src="common.js"></script>
+  <script type="text/javascript" src="example.js"></script>
+  </head>
+<body data-width="640" data-height="480" {{attrs}}>
+  <h1>{{title}}</h1>
+  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
+  <p>The VideoEncode example demonstrates how to encode video.</p>
+  <br>
+  <select id="profileList"></select>
+  <input type="button" id="start" value="Start Recording" disabled="true"/>
+  <input type="button" id="stop" value="Stop Recording" disabled="true"/>
+  <div id="download-box"></div>
+  <div id="length"></div>
+  <br>
+  <video id="video" width="640px" height="480px"></video>
+  <!-- The NaCl plugin will be embedded inside the element with id "listener".
+      See common.js.-->
+  <div id="listener"></div>
+  <pre id="log" style="font-weight: bold"></pre>
+  </body>
+</html>