| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright 2014 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>Media Stream Video Example</title> |
| <script type="text/javascript"> |
| var plugin; |
| var stream; |
| |
| function handleMessage(message) { |
| console.log(message); |
| } |
| |
| function success(s) { |
| stream = s; |
| plugin.postMessage({command: 'init', track: stream.getVideoTracks()[0]}); |
| } |
| |
| function failure(e) { |
| console.log(e); |
| } |
| |
| function initialize() { |
| plugin = document.getElementById('plugin'); |
| plugin.addEventListener('message', handleMessage, false); |
| var constraints = { |
| audio: false, |
| video: { |
| mandatory: { |
| minWidth: 640, |
| minHeight: 320, |
| minFrameRate: 30 |
| }, |
| optional: [] |
| } |
| }; |
| |
| navigator.webkitGetUserMedia(constraints, success, failure); |
| } |
| |
| function changeFormat(format) { |
| plugin.postMessage({command:'format', format: format}); |
| } |
| |
| function changeSize(width, height) { |
| plugin.postMessage({command:'size', width: width, height: height}); |
| } |
| document.addEventListener('DOMContentLoaded', initialize, false); |
| </script> |
| </head> |
| |
| <body> |
| <h1>Pepper MediaStream Video API Example</h1><br> |
| This example demonstrates receiving frames from a video MediaStreamTrack and |
| rendering them in a plugin.<br> |
| Left side shows YUV frames. Right side shows BGRA frames. |
| <embed id="plugin" type="application/x-ppapi-example-media-stream-video" |
| width="640" height="240"/> |
| <h2>Format:</h2><br> |
| <button onclick="changeFormat('YV12')" >YV12</button> |
| <button onclick="changeFormat('I420')" >I420</button> |
| <button onclick="changeFormat('BGRA')" >BGRA</button> |
| <button onclick="changeFormat('DEFAULT')" >DEFAULT</button> |
| <h2>Size:</h2><br> |
| <button onclick="changeSize(72, 72)" >72 x 72</button> |
| <button onclick="changeSize(640, 360)" >640 x 360</button> |
| <button onclick="changeSize(1280, 720)" >1280 x 720</button> |
| <button onclick="changeSize(0, 0)" >DEFAULT</button> |
| </body> |
| </html> |
