-
Notifications
You must be signed in to change notification settings - Fork 0
/
appendstream.html
57 lines (51 loc) · 1.57 KB
/
appendstream.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
<html>
<meta charset=utf-8>
<button id="button">User gesture</button><br>
<video id="video" width="320" height="200" autoplay controls></video><br>
<div id="div"></div>
<script>
const console = { log: msg => div.innerHTML += msg + "<br>" };
// Polyfill sb.appendStream(readable)
const nativeAddSourceBuffer = MediaSource.prototype.addSourceBuffer;
MediaSource.prototype.addSourceBuffer = function(...args) {
const sb = nativeAddSourceBuffer.call(this, ...args);
sb.appendStream = function(readable) {
(async () => {
const reader = readable.getReader();
try {
while (true) {
const {value, done} = await reader.read();
if (done) return; // TODO: notify client somehow?
sb.appendBuffer(value);
await new Promise(r => sb.addEventListener("updateend", r, {once: true}));
}
} catch (e) {
console.log(e);
}
})();
}
return sb;
};
// End of polyfill ^
button.onclick = async () => {
try {
const src = new MediaSource();
video.src = URL.createObjectURL(src);
await new Promise(r => src.onsourceopen = r);
const sb = src.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
sb.appendStream((await fetchOk('frag_bunny.mp4')).body);
await video.play();
// await new Promise(r => sb.onupdateend = r);
// src.endOfStream();
// console.log(src.readyState); // ended
} catch (e) {
console.log(e);
}
};
async function fetchOk(...args) {
const res = await fetch(...args);
if (!res.ok) throw new Error(await res.text());
return res;
}
</script>
</html>