OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <!-- | 3 <!-- |
4 Copyright 2015 The Chromium Authors. All rights reserved. | 4 Copyright 2015 The Chromium Authors. All rights reserved. |
5 Use of this source code is governed by a BSD-style license that can be | 5 Use of this source code is governed by a BSD-style license that can be |
6 found in the LICENSE file. | 6 found in the LICENSE file. |
7 --> | 7 --> |
8 <head> | 8 <head> |
9 <title>Video Encoder Example</title> | 9 <title>Video Encoder Example</title> |
10 <style type="text/css"> | |
11 #video { | |
12 position: fixed; | |
13 } | |
14 #video-playback { | |
15 position: fixed; | |
16 left: 640px; | |
17 } | |
18 #plugin { | |
19 position: fixed; | |
20 } | |
21 </style> | |
22 <script type="text/javascript"> | 10 <script type="text/javascript"> |
23 var plugin; | 11 var plugin; |
24 var track; | 12 var track; |
25 var video; | 13 var video; |
26 | 14 |
27 function $(id) { | 15 function $(id) { |
28 return document.getElementById(id); | 16 return document.getElementById(id); |
29 } | 17 } |
30 | 18 |
31 function success(stream) { | 19 function success(stream) { |
32 track = stream.getVideoTracks()[0]; | 20 track = stream.getVideoTracks()[0]; |
33 video.src = URL.createObjectURL(stream); | 21 video.src = URL.createObjectURL(stream); |
34 video.play(); | 22 video.play(); |
35 | 23 |
| 24 var list = $('profileList'); |
| 25 var profile = (list.length < 1) ? 'vp8' |
| 26 : list.options[list.selectedIndex].value; |
| 27 |
36 plugin.postMessage({ | 28 plugin.postMessage({ |
37 command: 'start', | 29 command: 'start', |
38 track: track, | 30 track: track, |
| 31 profile: profile, |
39 width: 640, | 32 width: 640, |
40 height: 480 | 33 height: 480 |
41 }); | 34 }); |
42 } | 35 } |
43 | 36 |
44 function failure(e) { | 37 function failure(e) { |
45 console.log("Error: ", e); | 38 console.log("Error: ", e); |
46 } | 39 } |
47 | 40 |
48 function startRecord() { | 41 function startRecord() { |
49 console.log("starting record"); | 42 $('length').innerHTML = ' Size: ' + dataArray.byteLength + ' bytes'; |
50 navigator.webkitGetUserMedia({audio: false, video: true}, | 43 navigator.webkitGetUserMedia({audio: false, video: true}, |
51 success, failure); | 44 success, failure); |
52 } | 45 } |
53 | 46 |
54 function stopRecord() { | 47 function stopRecord() { |
55 plugin.postMessage({ | 48 plugin.postMessage({ |
56 command: "stop" | 49 command: "stop" |
57 }); | 50 }); |
58 var video = $('video'); | 51 var video = $('video'); |
59 video.pause(); | 52 video.pause(); |
60 track.stop(); | 53 track.stop(); |
61 } | 54 } |
62 | 55 |
63 function saveBlob(blob) { | 56 function saveBlob(blob) { |
64 var blobUrl = URL.createObjectURL(blob); | 57 var blobUrl = URL.createObjectURL(blob); |
65 window.location = blobUrl; | 58 window.location = blobUrl; |
66 } | 59 } |
67 | 60 |
68 function handleMessage(msg) { | 61 function handleMessage(msg) { |
69 if (msg.data.name == 'started') { | 62 if (msg.data.name == 'started') { |
70 console.log('recording!'); | 63 console.log('recording!'); |
71 } else if (msg.data.name == 'data') { | 64 } else if (msg.data.name == 'data') { |
72 appendData(msg.data.data); | 65 appendData(msg.data.data); |
73 } else if (msg.data.name == 'stopped') { | 66 } else if (msg.data.name == 'stopped') { |
74 console.log('done recording! bytes: ' + dataArray.byteLength); | 67 console.log('done recording! bytes: ' + dataArray.byteLength); |
| 68 } else if (msg.data.name == 'supportedProfiles') { |
| 69 console.log('profiles: ', msg.data); |
| 70 var profileList = $('profileList'); |
| 71 for (var i = 0; i < msg.data.profiles.length; i++) { |
| 72 var item = document.createElement('option'); |
| 73 item.label = item.value = msg.data.profiles[i]; |
| 74 profileList.appendChild(item); |
| 75 } |
75 } | 76 } |
76 } | 77 } |
77 | 78 |
78 function resetData() { | 79 function resetData() { |
79 window.dataArray = new ArrayBuffer(0); | 80 window.dataArray = new ArrayBuffer(0); |
80 } | 81 } |
81 | 82 |
82 function appendData(data) { | 83 function appendData(data) { |
83 var tmp = new Uint8Array(dataArray.byteLength + data.byteLength); | 84 var tmp = new Uint8Array(dataArray.byteLength + data.byteLength); |
84 tmp.set(new Uint8Array(dataArray), 0 ); | 85 tmp.set(new Uint8Array(dataArray), 0 ); |
(...skipping 22 matching lines...) Expand all Loading... |
107 | 108 |
108 document.addEventListener('DOMContentLoaded', initialize, false); | 109 document.addEventListener('DOMContentLoaded', initialize, false); |
109 </script> | 110 </script> |
110 </head> | 111 </head> |
111 | 112 |
112 <body> | 113 <body> |
113 <h1>Video Encoder API Example</h1><br> | 114 <h1>Video Encoder API Example</h1><br> |
114 This example demonstrates receiving frames from a video MediaStreamTrack and | 115 This example demonstrates receiving frames from a video MediaStreamTrack and |
115 encoding them in a plugin. | 116 encoding them in a plugin. |
116 <br> | 117 <br> |
| 118 <select id="profileList"></select> |
117 <input type="button" id="start" value="Start Recording"/> | 119 <input type="button" id="start" value="Start Recording"/> |
118 <input type="button" id="stop" value="Stop Recording"/> | 120 <input type="button" id="stop" value="Stop Recording"/> |
119 <input type="button" id="download" value="Download Recording"/> | 121 <input type="button" id="download" value="Download Recording"/> |
120 <div id="length"></div> | 122 <div id="length"></div> |
121 <br> | 123 <br> |
122 <div> | 124 <div> |
123 <embed id="plugin" type="application/x-ppapi-example-video-encode"/> | 125 <embed id="plugin" type="application/x-ppapi-example-video-encode"/> |
124 <video id="video" width="640" height="480"/> | 126 <video id="video" width="640" height="480"/> |
125 </div> | 127 </div> |
126 </body> | 128 </body> |
127 </html> | 129 </html> |
OLD | NEW |