/
video_stream.html
119 lines (101 loc) · 3.32 KB
/
video_stream.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
<html>
<head>
</head>
<body>
<video width="320" height="240" id="video" controls>
Your browser does not support the video tag.
</video>
<script type="text/javascript">
window["count"] = 0;
window["video_hash"] = {};
window["CONNECTIONS"] = 6;
function Length(url, connections)
{
var http = new XMLHttpRequest();
http.open('HEAD', url);
http.onreadystatechange = function() {
if (this.readyState == this.DONE) {
console.log(this);
length = this.getResponseHeader('Content-Length');
// console.log(this);
get_video(url, length, connections)
}
};
http.send();
}
function get_video (url, length, connections) {
var difference = Math.floor(length/connections);
var start_point = 0;
for (i = 1; i <= connections-1; start_point = end_point+1, i++) {
end_point = start_point + difference;
get_part(url, start_point, end_point, i, connections);
};
get_part(url, start_point, length-1, i, connections);
}
function get_part(url, start_index, end_index, id, connections){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET",url,true);
// console.log("LENGTTH ="+length);
console.log("Start_part ="+start_index);
console.log("end_part ="+end_index);
xmlhttp.responseType = 'arraybuffer';
xmlhttp.setRequestHeader("Range", "bytes="+start_index+"-"+end_index);
xmlhttp.addEventListener("readystatechange", function () {
if (xmlhttp.readyState == xmlhttp.DONE) {
var response = new Uint8Array(xmlhttp.response)
window["video_hash"][id] = response;
if (id == 1)
{
videoSource.appendBuffer(response);
window["count"] = 2;
}
}
}, false);
xmlhttp.send();
}
var mediaSource = new (window.MediaSource || window.WebKitMediaSource)();
window.video = document.getElementById('video');
window.video.addEventListener("error", function onError(err) {
alert("window.video error detected:");
console.dir(window.video.error);
// window.video.terminate();
});
window.video.pause();
window.video.src = URL.createObjectURL(mediaSource);
var onMediaSourceOpen = function (e) {
mediaSource.removeEventListener('sourceopen', onMediaSourceOpen);
window.videoSource = mediaSource.addSourceBuffer('video/mp4');
videoSource.addEventListener('updateend', function() {
if ((window["video_hash"])[(window["count"])] != undefined) {
videoSource.appendBuffer(window["video_hash"][window["count"]]);
window["count"] += 1;
}
}, false);
injectVideoIntoBuffer();
}
mediaSource.addEventListener('sourceopen', onMediaSourceOpen);
var injectVideoIntoBuffer = function onResponse() {
var url = window.location.hash.split("#")[1];
Length(url, window["CONNECTIONS"]);
}
function check_timeout(something){
videoSource.appendBuffer(window["response2"]);
console.log("GOT CALLED");
if (window["count"] == 3)
{
window["count"] = 0;
// clearTimeout(window["timer"]);
console.log("HEREEE ! adding buffer");
videoSource.appendBuffer(window["response2"]);
}
else{
console.log("here in count = "+ window["count"]);
window["count"] += 1;
}
}
function sleep(el) {
window["timer"] = setTimeout(check_timeout(el), 1000);
}
</script>
</body>
</html>