Pepper: add video_encoder example

BUG=417589 TEST=run ppapi/examples/video_encode/video_encode.html Review URL: https://codereview.chromium.org/937643006 Cr-Commit-Position: refs/heads/master@{#318785}

Pepper: add video_encoder example
BUG=417589 TEST=run ppapi/examples/video_encode/video_encode.html Review URL: https://codereview.chromium.org/937643006 Cr-Commit-Position: refs/heads/master@{#318785}
5f3145d5 · lionel.g.landwerlin · Commit bot · a29872ab · 5f3145d5 · 5f3145d5
Commit 5f3145d5 authored Mar 02, 2015 by lionel.g.landwerlin Committed by Commit bot Mar 02, 2015
5 changed files
--- a/ppapi/examples/BUILD.gn
+++ b/ppapi/examples/BUILD.gn
@@ -32,5 +32,6 @@ group("examples") {
    "//ppapi/examples/video_capture",
    "//ppapi/examples/video_decode",
    "//ppapi/examples/video_effects",
+    "//ppapi/examples/video_encode",
  ]
 }
--- a/ppapi/examples/video_encode/BUILD.gn
+++ b/ppapi/examples/video_encode/BUILD.gn
+# 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.
+import("//ppapi/examples/ppapi_example.gni")
+ppapi_example("video_encode") {
+  output_name = "ppapi_example_video_encode"
+  sources = [
+    "video_encode.cc",
+  ]
+  deps = [
+    "//ppapi/cpp",
+  ]
+}
--- a/ppapi/examples/video_encode/video_encode.cc
+++ b/ppapi/examples/video_encode/video_encode.cc
--- a/ppapi/examples/video_encode/video_encode.html
+++ b/ppapi/examples/video_encode/video_encode.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>
+  <title>Video Encoder Example</title>
+  <style type="text/css">
+    #video {
+      position: fixed;
+    }
+    #video-playback {
+      position: fixed;
+      left: 640px;
+    }
+    #plugin {
+      position: fixed;
+    }
+  </style>
+  <script type="text/javascript">
+    var plugin;
+    var track;
+    var video;
+    function $(id) {
+      return document.getElementById(id);
+    }
+    function success(stream) {
+      track = stream.getVideoTracks()[0];
+      video.src = URL.createObjectURL(stream);
+      video.play();
+      plugin.postMessage({
+        command: 'start',
+        track: track,
+        width: 640,
+        height: 480
+      });
+    }
+    function failure(e) {
+      console.log("Error: ", e);
+    }
+    function startRecord() {
+      console.log("starting record");
+      navigator.webkitGetUserMedia({audio: false, video: true},
+                                   success, failure);
+    }
+    function stopRecord() {
+      plugin.postMessage({
+        command: "stop"
+      });
+      var video = $('video');
+      video.pause();
+      track.stop();
+    }
+    function saveBlob(blob) {
+      var blobUrl = URL.createObjectURL(blob);
+      window.location = blobUrl;
+    }
+    function handleMessage(msg) {
+      if (msg.data.name == 'started') {
+        console.log('recording!');
+      } else if (msg.data.name == 'data') {
+        appendData(msg.data.data);
+      } else if (msg.data.name == 'stopped') {
+        console.log('done recording! bytes: ' + dataArray.byteLength);
+      }
+    }
+    function resetData() {
+      window.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').innerHTML = ' Size: ' + dataArray.byteLength + ' bytes';
+    }
+    function initialize() {
+      plugin = $('plugin');
+      plugin.addEventListener('message', handleMessage, false);
+      video = $('video');
+      $('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" }));
+      });
+    }
+    document.addEventListener('DOMContentLoaded', initialize, false);
+  </script>
+</head>
+<body>
+  <h1>Video Encoder API Example</h1><br>
+  This example demonstrates receiving frames from a video MediaStreamTrack and
+  encoding them in a plugin.
+  <br>
+  <input type="button" id="start" value="Start Recording"/>
+  <input type="button" id="stop" value="Stop Recording"/>
+  <input type="button" id="download" value="Download Recording"/>
+  <div id="length"></div>
+  <br>
+  <div>
+    <embed id="plugin" type="application/x-ppapi-example-video-encode"/>
+    <video id="video" width="640" height="480"/>
+  </div>
+</body>
+</html>
--- a/ppapi/ppapi_tests.gypi
+++ b/ppapi/ppapi_tests.gypi
@@ -497,6 +497,16 @@
        'examples/video_decode/video_decode_dev.cc',
      ],
    },
+    {
+      'target_name': 'ppapi_example_video_encode',
+      'dependencies': [
+        'ppapi_example_skeleton',
+        'ppapi.gyp:ppapi_cpp',
+      ],
+      'sources': [
+        'examples/video_encode/video_encode.cc',
+      ],
+    },
    {
      # GN version: //ppapi/example/video_capture
      'target_name': 'ppapi_example_vc',