blob: ba7a3253435ebcb7cf43641acbf871d8751bf090 [file] [log] [blame]
<!DOCTYPE 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.
<title>Media Stream Video Example</title>
<script type="text/javascript">
var plugin;
var stream;
function handleMessage(message) {
function success(s) {
stream = s;
plugin.postMessage({command: 'init', track: stream.getVideoTracks()[0]});
function failure(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);
<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"/>
<button onclick="changeFormat('YV12')" >YV12</button>
<button onclick="changeFormat('I420')" >I420</button>
<button onclick="changeFormat('BGRA')" >BGRA</button>
<button onclick="changeFormat('DEFAULT')" >DEFAULT</button>
<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>