This repository has been archived by the owner on May 4, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathpage.html
123 lines (94 loc) · 3.02 KB
/
page.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>testing media stream recorder</title>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 1.3em;
}
.not-authorized .gui,
.authorized .notice {
display: none;
}
</style>
</head>
<body class="not-authorized">
<h1>testing media stream recorder</h1>
<script src="MediaStreamRecorder.js"></script>
<script>
var DT = 10000; // 10 seconds per file
</script>
<div class="notice">please accept webcam permissions above</div>
<div class="gui">
<button id="b1" onclick="log('starting'); mediaRecorder.start(DT);">start</button>
<button id="b2" onclick="log('stopping'); stopped = true; mediaRecorder.stop();">stop</button>
</div>
<script>
var mediaConstraints = {
//audio: !!navigator.mozGetUserMedia, // ffox-only
audio: false,
video: true // chrome too
};
navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
function zeroPad(n, chars) {
var s = '' + n;
var l = s.length;
return new Array(chars - l + 1).join('0') + s;
}
function log(msg) {
var el = document.createElement('div');
el.appendChild( document.createTextNode(msg) );
document.body.appendChild(el);
}
// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
function send(url, blob) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'text/plain';
xhr.setRequestHeader('Content-Type', 'video/webm');
//xhr.setRequestHeader("Content-Length", blob.length);
xhr.onload = function(e) {
if (this.status === 200) {
console.log(this.response);
}
};
//var blob2 = new Blob(blob, {type: 'video/webm'});
xhr.send(blob);
}
function makeABlob(text, blob) {
var blobURL = URL.createObjectURL(blob);
var aEl = document.createElement('a');
aEl.appendChild( document.createTextNode(text) );
aEl.href = blobURL;
document.body.appendChild(aEl);
}
var maxI = Math.pow(32, 6); // length 6
function randomString() {
return ( ~~( Math.random() * maxI ) ).toString(32);
}
var mediaRecorder;
var stopped = false;
var count = 0;
var name = randomString();
function onMediaSuccess(stream) {
log('will start capturing and sending ' + (DT/1000) + 's videos when you press start');
document.body.className = 'authorized';
mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'video/webm';
mediaRecorder.ondataavailable = function(blob) {
var count2 = zeroPad(count, 5);
log('sending chunk ' + name + ' #' + count2 + '...');
send('/chunk/' + name + '/' + count2 + (stopped ? '/finish' : ''), blob);
//makeABlob(count, blob);
++count;
};
}
function onMediaError(e) {
log('media error');
}
</script>
</body>
</html>