OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <!-- | 3 <!-- |
4 Copyright 2014 The Chromium Authors. All rights reserved. | 4 Copyright 2014 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>Media Stream Video Example</title> | 9 <title>Media Stream Video Example</title> |
10 <script type="text/javascript"> | 10 <script type="text/javascript"> |
11 var plugin; | 11 var plugin; |
12 var stream; | 12 var stream; |
13 | 13 |
14 function handleMessage(message) { | 14 function handleMessage(message) { |
15 console.log(message); | 15 console.log(message); |
16 } | 16 } |
17 | 17 |
18 function success(s) { | 18 function success(s) { |
19 stream = s; | 19 stream = s; |
20 plugin.postMessage({track: stream.getVideoTracks()[0]}); | 20 plugin.postMessage({command: 'init', track: stream.getVideoTracks()[0]}); |
21 } | 21 } |
22 | 22 |
23 function failure(e) { | 23 function failure(e) { |
24 console.log(e); | 24 console.log(e); |
25 } | 25 } |
26 | 26 |
27 function initialize() { | 27 function initialize() { |
28 plugin = document.getElementById('plugin'); | 28 plugin = document.getElementById('plugin'); |
29 plugin.addEventListener('message', handleMessage, false); | 29 plugin.addEventListener('message', handleMessage, false); |
30 var constraints = { | 30 var constraints = { |
31 "audio": false, | 31 audio: false, |
32 "video": { | 32 video: { |
33 "mandatory": { | 33 mandatory: { |
34 "minWidth": "1280", | 34 minWidth: 640, |
35 "minHeight": "720", | 35 minHeight: 320, |
36 "minFrameRate": "30" | 36 minFrameRate: 30 |
37 }, | 37 }, |
38 "optional": [] | 38 optional: [] |
39 } | 39 } |
40 }; | 40 }; |
| 41 |
41 navigator.webkitGetUserMedia(constraints, success, failure); | 42 navigator.webkitGetUserMedia(constraints, success, failure); |
42 } | 43 } |
43 | 44 |
| 45 function changeFormat(format) { |
| 46 plugin.postMessage({command:'format', format: format}); |
| 47 } |
| 48 |
| 49 function changeSize(width, height) { |
| 50 plugin.postMessage({command:'size', width: width, height: height}); |
| 51 } |
44 document.addEventListener('DOMContentLoaded', initialize, false); | 52 document.addEventListener('DOMContentLoaded', initialize, false); |
45 </script> | 53 </script> |
46 </head> | 54 </head> |
47 | 55 |
48 <body> | 56 <body> |
49 <h1>Pepper MediaStream Video API Example</h1><br> | 57 <h1>Pepper MediaStream Video API Example</h1><br> |
50 This example demonstrates receiving frames from a video MediaStreamTrack and | 58 This example demonstrates receiving frames from a video MediaStreamTrack and |
51 rendering them in a plugin.<br> | 59 rendering them in a plugin.<br> |
| 60 Left side shows YUV frames. Right side shows BGRA frames. |
52 <embed id="plugin" type="application/x-ppapi-example-media-stream-video" | 61 <embed id="plugin" type="application/x-ppapi-example-media-stream-video" |
53 width="320" height="240"/> | 62 width="640" height="240"/> |
| 63 <h2>Format:</h2><br> |
| 64 <button onclick="changeFormat('YV12')" >YV12</button> |
| 65 <button onclick="changeFormat('I420')" >I420</button> |
| 66 <button onclick="changeFormat('BGRA')" >BGRA</button> |
| 67 <button onclick="changeFormat('DEFAULT')" >DEFAULT</button> |
| 68 <h2>Size:</h2><br> |
| 69 <button onclick="changeSize(72, 72)" >72 x 72</button> |
| 70 <button onclick="changeSize(640, 360)" >640 x 360</button> |
| 71 <button onclick="changeSize(1280, 720)" >1280 x 720</button> |
| 72 <button onclick="changeSize(0, 0)" >DEFAULT</button> |
54 </body> | 73 </body> |
55 </html> | 74 </html> |
OLD | NEW |