-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (168 loc) · 6.75 KB
/
index.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
<title>Cloud gaming demo</title>
<style type="text/css">
video::-webkit-media-controls {
display: none !important;
}
</style>
</head>
<body>
<h1 align="center" style="color:darkorange ; font-size:50px">Welcome to Cloud Gaming Demo</h1>
<p align="center" style="color:green ; font-size:30px">Please read the details below</p>
<p style="color:black ; font-size:20px">For the purpose of technical demoing, the game I chose is the classic Microsoft minesweeper, which is lightwight (I am sorry for this server doesn't have the qualified hardware to run the AAA titled games like Assassin's Creed) and also easy to control, most importantly, it's free!</p>
<p style="color:black ; font-size:20px">After clicking the start streaming button below, the browser will be full-screened automatically and please wait <strong>about 15 seconds</strong> to allow the backend initializing the service. Thank you!</p>
<br/>
<div align="center">
<button onclick="startStream()" style="width:200px;height:60px">Click to start the streaming</button>
<p align="center" style="color:green ; font-size:30px">Recommend using Google Chrome Browser</p>
</div>
<video id="webSocketPlayer"></video>
</body>
<script type="text/javascript">
var websocket = null;
var player = document.getElementById('webSocketPlayer');
var mediaSource;
var sourceBuffer;
var data = [];
var firstDataTransmit = true;
var firstDataPlay = true;
var frame_index = 0;
//player.playbackRate = 1.1;
//document.addEventListener('keydown', keydowned);
document.addEventListener('click', mouseLeftKeyDowned);
document.oncontextmenu = function (e) {
e.preventDefault();
}
document.addEventListener('mousedown', mouseRightKeyDowned);
if (window.MediaSource) {
mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', sourceOpen);
console.log("media source is ready");
player.src = URL.createObjectURL(mediaSource);
}
//display message on the page
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//close the websocket connection
function closeWebSocket() {
websocket.close();
}
function sourceOpen(e) {
console.log("sourceopened");
var mime = 'video/mp4; codecs="avc1.4D401E"';
sourceBuffer = mediaSource.addSourceBuffer(mime);
sourceBuffer.addEventListener('updateend', function () {
if (firstDataPlay) {
console.log("playing first chunk of data");
player.play();
firstDataPlay = false;
}
var temp = data.shift();
if (temp == undefined) {
sourceBuffer.appendBuffer(new ArrayBuffer(0));
}
else {
sourceBuffer.appendBuffer(temp);
var buffered = sourceBuffer.buffered;
var duration = buffered.end(0) - buffered.start(0);
//console.log(duration);
if (duration > 20 && player.playbackRate!=2) {
//console.log("speeding up");
//console.log(player.playbackRate);
player.playbackRate=1.25;
}
else {
player.playbackRate = 1.0;
}
//var myListLength = mediaSource.sourceBuffers.length;
//console.log(myListLength);
}
});
}
function startStream() {
//Change the video to fullscreen when start playing
if (player.requestFullscreen) {
player.requestFullscreen();
} else if (player.msRequestFullscreen) {
player.msRequestFullscreen();
} else if (player.mozRequestFullScreen) {
player.mozRequestFullScreen();
} else if (player.webkitRequestFullscreen) {
player.webkitRequestFullscreen();
}
//Tell whether this browser is supporting Websocket or not
if ('WebSocket' in window) {
websocket = new WebSocket("ws://23.96.53.232:80/firstTest/websocket");
websocket.binaryType = "arraybuffer";
}
else {
alert("This browser doesn't support websocket")
}
//Callback function when Websocket connection is on error
websocket.onerror = function () {
console.log("WebSocket went wrong");
};
//Callbacck function when Websocket connection is established
websocket.onopen = function () {
console.log("WebSocket connected");
}
//Callback function when message received
websocket.onmessage = function (event) {
frame_index = frame_index + 1;
if (firstDataTransmit) {
console.log("append first chunk of data");
sourceBuffer.appendBuffer(event.data);
firstDataTransmit = false;
return;
}
if (frame_index==-1) {
data.push(new ArrayBuffer(0));
}
else {
data.push(event.data);
}
}
//The function will be triggered when Websocket connection is closed
websocket.onclose = function () {
console.log("WebSocket connection is closed");
}
//Close the Websocket connection when close the browser window
window.onbeforeunload = function () {
closeWebSocket();
}
}
function mouseLeftKeyDowned(event) {
if (websocket != null && websocket.readyState == 1) {
var e = event || window.event;
location_x = e.screenX * 1920 / screen.width;
location_y = e.screenY * 1080 / screen.height;
websocket.send("ml" + location_x + " " + location_y);
}
else {
console.log("the webscoket connection is not established yet");
}
}
function mouseRightKeyDowned(event){
if (websocket != null && websocket.readyState == 1) {
if (event.button == 2) {
var e = event || window.event;
location_x = e.screenX * 1920 / screen.width;
location_y = e.screenY * 1080 / screen.height;
websocket.send("mr" + location_x + " " + location_y);
}
}
else {
console.log("the webscoket connection is not established yet");
}
}
function keydowned(event) {
if (websocket != null && websocket.readyState == 1) {
websocket.send("k"+event.keyCode);
} else {
console.log("The webscoket connection is not established yet");
}
}
</script>