| <!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> |
| <script type="text/javascript"> |
| var plugin; |
| var track; |
| var video; |
| |
| function $(id) { |
| return document.getElementById(id); |
| } |
| |
| function success(stream) { |
| track = stream.getVideoTracks()[0]; |
| video.srcObject = stream; |
| video.play(); |
| |
| var list = $('profileList'); |
| var profile = (list.length < 1) ? 'vp8' |
| : list.options[list.selectedIndex].value; |
| |
| plugin.postMessage({ |
| command: 'start', |
| track: track, |
| profile: profile, |
| width: 640, |
| height: 480 |
| }); |
| } |
| |
| function failure(e) { |
| console.log("Error: ", e); |
| } |
| |
| function startRecord() { |
| $('length').innerHTML = ' Size: ' + dataArray.byteLength + ' bytes'; |
| 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 == 'data') { |
| appendData(msg.data.data); |
| } else if (msg.data.name == 'supportedProfiles') { |
| console.log('profiles: ', msg.data); |
| var profileList = $('profileList'); |
| 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); |
| } |
| } else if (msg.data.name == 'log') { |
| console.log(msg.data.message); |
| } |
| } |
| |
| 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').textContent = ' 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> |
| <select id="profileList"></select> |
| <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> |
