ppapi/examples/media_stream_video/media_stream_video.html

   1 <!DOCTYPE html>
   2 <html>
   3   <!--
   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
   6   found in the LICENSE file.
   7   -->
   8 <head>
   9   <title>Media Stream Video Example</title>
  10   <script type="text/javascript">
  11     var plugin;
  12     var stream;
  13
  14     function handleMessage(message) {
  15       console.log(message);
  16     }
  17
  18     function success(s) {
  19       stream = s;
  20       plugin.postMessage({command: 'init', track: stream.getVideoTracks()[0]});
  21     }
  22
  23     function failure(e) {
  24       console.log(e);
  25     }
  26
  27     function initialize() {
  28       plugin = document.getElementById('plugin');
  29       plugin.addEventListener('message', handleMessage, false);
  30       var constraints = {
  31         audio: false,
  32         video: {
  33           mandatory: {
  34             minWidth: 640,
  35             minHeight: 320,
  36             minFrameRate: 30
  37           },
  38           optional: []
  39         }
  40       };
  41
  42       navigator.webkitGetUserMedia(constraints, success, failure);
  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     }
  52     document.addEventListener('DOMContentLoaded', initialize, false);
  53   </script>
  54 </head>
  55
  56 <body>
  57   <h1>Pepper MediaStream Video API Example</h1><br>
  58   This example demonstrates receiving frames from a video MediaStreamTrack and
  59   rendering them in a plugin.<br>
  60   Left side shows YUV frames. Right side shows BGRA frames.
  61   <embed id="plugin" type="application/x-ppapi-example-media-stream-video"
  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>
  73 </body>
  74 </html>