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