ppapi/examples/video_encode/video_encode.html

   1 <!DOCTYPE html>
   2 <html>
   3   <!--
   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
   6   found in the LICENSE file.
   7   -->
   8 <head>
   9   <title>Video Encoder Example</title>
  10   <script type="text/javascript">
  11     var plugin;
  12     var track;
  13     var video;
  14
  15     function $(id) {
  16       return document.getElementById(id);
  17     }
  18
  19     function success(stream) {
  20       track = stream.getVideoTracks()[0];
  21       video.src = URL.createObjectURL(stream);
  22       video.play();
  23
  24       var list = $('profileList');
  25       var profile = (list.length < 1) ? 'vp8'
  26         : list.options[list.selectedIndex].value;
  27
  28       plugin.postMessage({
  29         command: 'start',
  30         track: track,
  31         profile: profile,
  32         width: 640,
  33         height: 480
  34       });
  35     }
  36
  37     function failure(e) {
  38       console.log("Error: ", e);
  39     }
  40
  41     function startRecord() {
  42       $('length').innerHTML = ' Size: ' + dataArray.byteLength + ' bytes';
  43       navigator.webkitGetUserMedia({audio: false, video: true},
  44                                    success, failure);
  45     }
  46
  47     function stopRecord() {
  48       plugin.postMessage({
  49         command: "stop"
  50       });
  51       var video = $('video');
  52       video.pause();
  53       track.stop();
  54     }
  55
  56     function saveBlob(blob) {
  57       var blobUrl = URL.createObjectURL(blob);
  58       window.location = blobUrl;
  59     }
  60
  61     function handleMessage(msg) {
  62       if (msg.data.name == 'started') {
  63         console.log('recording!');
  64       } else if (msg.data.name == 'data') {
  65         appendData(msg.data.data);
  66       } else if (msg.data.name == 'stopped') {
  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         }
  76       }
  77     }
  78
  79     function resetData() {
  80       window.dataArray = new ArrayBuffer(0);
  81     }
  82
  83     function appendData(data) {
  84       var tmp = new Uint8Array(dataArray.byteLength + data.byteLength);
  85       tmp.set(new Uint8Array(dataArray), 0 );
  86       tmp.set(new Uint8Array(data), dataArray.byteLength);
  87       dataArray = tmp.buffer;
  88       $('length').innerHTML = ' Size: ' + dataArray.byteLength + ' bytes';
  89     }
  90
  91     function initialize() {
  92       plugin = $('plugin');
  93       plugin.addEventListener('message', handleMessage, false);
  94
  95       video = $('video');
  96
  97       $('start').addEventListener('click', function (e) {
  98         resetData();
  99         startRecord();
 100       });
 101       $('stop').addEventListener('click', function (e) {
 102         stopRecord();
 103       });
 104       $('download').addEventListener('click', function (e) {
 105         saveBlob(new Blob([dataArray], { type: "application/octet-stream" }));
 106       });
 107     }
 108
 109     document.addEventListener('DOMContentLoaded', initialize, false);
 110   </script>
 111 </head>
 112
 113 <body>
 114   <h1>Video Encoder API Example</h1><br>
 115   This example demonstrates receiving frames from a video MediaStreamTrack and
 116   encoding them in a plugin.
 117   <br>
 118   <select id="profileList"></select>
 119   <input type="button" id="start" value="Start Recording"/>
 120   <input type="button" id="stop" value="Stop Recording"/>
 121   <input type="button" id="download" value="Download Recording"/>
 122   <div id="length"></div>
 123   <br>
 124   <div>
 125     <embed id="plugin" type="application/x-ppapi-example-video-encode"/>
 126     <video id="video" width="640" height="480"/>
 127   </div>
 128 </body>
 129 </html>