Index: ppapi/examples/video_encode/video_encode.html |
diff --git a/ppapi/examples/video_encode/video_encode.html b/ppapi/examples/video_encode/video_encode.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..803c1f4de907b653bb68082a6006c069de9e0e8c |
--- /dev/null |
+++ b/ppapi/examples/video_encode/video_encode.html |
@@ -0,0 +1,127 @@ |
+<!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> |