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 == 'data') {
  63         appendData(msg.data.data);
  64       } else if (msg.data.name == 'supportedProfiles') {
  65         console.log('profiles: ', msg.data);
  66         var profileList = $('profileList');
  67         for (var i = 0; i < msg.data.profiles.length; i++) {
  68           var item = document.createElement('option');
  69           item.label = item.value = msg.data.profiles[i];
  70           profileList.appendChild(item);
  71         }
  72       } else if (msg.data.name == 'log') {
  73         console.log(msg.data.message);
  74       }
  75     }
  76
  77     function resetData() {
  78       window.dataArray = new ArrayBuffer(0);
  79     }
  80
  81     function appendData(data) {
  82       var tmp = new Uint8Array(dataArray.byteLength + data.byteLength);
  83       tmp.set(new Uint8Array(dataArray), 0 );
  84       tmp.set(new Uint8Array(data), dataArray.byteLength);
  85       dataArray = tmp.buffer;
  86       $('length').textContent = ' Size: ' + dataArray.byteLength + ' bytes';
  87     }
  88
  89     function initialize() {
  90       plugin = $('plugin');
  91       plugin.addEventListener('message', handleMessage, false);
  92
  93       video = $('video');
  94
  95       $('start').addEventListener('click', function (e) {
  96         resetData();
  97         startRecord();
  98       });
  99       $('stop').addEventListener('click', function (e) {
 100         stopRecord();
 101       });
 102       $('download').addEventListener('click', function (e) {
 103         saveBlob(new Blob([dataArray], { type: "application/octet-stream" }));
 104       });
 105     }
 106
 107     document.addEventListener('DOMContentLoaded', initialize, false);
 108   </script>
 109 </head>
 110
 111 <body>
 112   <h1>Video Encoder API Example</h1><br>
 113   This example demonstrates receiving frames from a video MediaStreamTrack and
 114   encoding them in a plugin.
 115   <br>
 116   <select id="profileList"></select>
 117   <input type="button" id="start" value="Start Recording"/>
 118   <input type="button" id="stop" value="Stop Recording"/>
 119   <input type="button" id="download" value="Download Recording"/>
 120   <div id="length"></div>
 121   <br>
 122   <div>
 123     <embed id="plugin" type="application/x-ppapi-example-video-encode"/>
 124     <video id="video" width="640" height="480"/>
 125   </div>
 126 </body>
 127 </html>