OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <!-- | |
4 Copyright 2014 The Chromium Authors. All rights reserved. | |
bbudge
2015/02/19 21:54:38
nit: 2015
llandwerlin-old
2015/02/27 14:19:44
Done.
| |
5 Use of this source code is governed by a BSD-style license that can be | |
6 found in the LICENSE file. | |
7 --> | |
8 <head> | |
9 <title>Video Encoder Example</title> | |
10 <style type="text/css"> | |
11 #video { | |
12 position: fixed; | |
13 } | |
14 #plugin { | |
15 position: fixed; | |
16 } | |
17 </style> | |
18 <script type="text/javascript"> | |
19 var plugin; | |
20 var track; | |
21 var video; | |
22 | |
23 function success(stream) { | |
24 track = stream.getVideoTracks()[0]; | |
25 video.src = URL.createObjectURL(stream); | |
26 video.play(); | |
27 | |
28 plugin.postMessage({ | |
29 command: 'start', | |
30 track: track | |
31 }); | |
32 } | |
33 | |
34 function failure(e) { | |
35 console.log("Error: ", e); | |
36 } | |
37 | |
38 function startRecord() { | |
39 console.log("starting record"); | |
40 navigator.webkitGetUserMedia({audio: false, video: true}, success, failure ); | |
bbudge
2015/02/19 21:54:38
nit: line length > 80
llandwerlin-old
2015/02/27 14:19:44
Done.
| |
41 } | |
42 | |
43 function stopRecord() { | |
44 plugin.postMessage({ | |
45 command: "stop" | |
46 }); | |
47 var video = document.getElementById('video'); | |
48 video.pause(); | |
49 track.stop(); | |
50 } | |
51 | |
52 function saveBlob(blob) { | |
53 var blobUrl = URL.createObjectURL(blob); | |
54 window.location = blobUrl; | |
55 } | |
56 | |
57 function handleMessage(msg) { | |
58 if (msg.data.name == 'started') { | |
59 console.log('recording!'); | |
60 } else if (msg.data.name == 'data') { | |
61 appendData(msg.data.data); | |
62 } else if (msg.data.name == 'stopped') { | |
63 console.log('done recording! bytes: ' + dataArray.byteLength); | |
64 saveBlob(new Blob([dataArray], { type: "application/octet-stream" })); | |
bbudge
2015/02/19 21:54:38
On my Mac, the encoder failed (no hardware) and I
| |
65 resetData(); | |
66 } | |
67 } | |
68 | |
69 function resetData() { | |
70 window.dataArray = new ArrayBuffer(0); | |
71 } | |
72 | |
73 function appendData(data) { | |
74 var tmp = new Uint8Array(dataArray.byteLength + data.byteLength); | |
75 tmp.set(new Uint8Array(dataArray), 0 ); | |
76 tmp.set(new Uint8Array(data), dataArray.byteLength); | |
77 dataArray = tmp.buffer; | |
78 } | |
79 | |
80 function initialize() { | |
81 plugin = document.getElementById('plugin'); | |
82 plugin.addEventListener('message', handleMessage, false); | |
83 | |
84 video = document.getElementById('video'); | |
85 | |
86 var selectEl = document.getElementById('start'); | |
87 selectEl.addEventListener('click', function (e) { | |
88 resetData(); | |
89 startRecord(); | |
90 }); | |
91 selectEl = document.getElementById('stop'); | |
92 selectEl.addEventListener('click', function (e) { | |
93 stopRecord(); | |
94 }); | |
95 } | |
96 | |
97 document.addEventListener('DOMContentLoaded', initialize, false); | |
98 </script> | |
99 </head> | |
100 | |
101 <body> | |
102 <h1>Video Encoder API Example</h1><br> | |
103 This example demonstrates receiving frames from a video MediaStreamTrack and | |
104 encoding them in a plugin. | |
105 <br> | |
106 <input type="button" id="start" value="Start Recording"/> | |
107 <input type="button" id="stop" value="Stop Recording"/> | |
108 <br> | |
109 <div> | |
110 <embed id="plugin" type="application/x-ppapi-example-video-encode" | |
111 width="640" height="480"/> | |
112 <video id="video" width="640" height="480"/> | |
113 </div> | |
114 </body> | |
115 </html> | |
OLD | NEW |