|
|
@@ -1,60 +1,60 @@
|
|
|
<html>
|
|
|
- <head>
|
|
|
- <link rel="shortcut icon" href="#">
|
|
|
- </head>
|
|
|
- <!-- <canvas id="playCanvas" width="450" height="800"></canvas> -->
|
|
|
- <body oncontextmenu="Back()">
|
|
|
- <canvas id="playCanvas" width="450" height="800"></canvas>
|
|
|
- </body>
|
|
|
- <script type="text/javascript" src="helper.js">
|
|
|
- < script type = "text/javascript"
|
|
|
- src = "pcm-player.js" >
|
|
|
- </script>
|
|
|
- <script type="text/javascript" src="webgl.js"></script>
|
|
|
- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
|
|
|
-
|
|
|
-
|
|
|
- <script>
|
|
|
- var decodeWoker = new Worker('decoder.js');
|
|
|
- var myVideo = document.getElementById("playCanvas");
|
|
|
- decodeWoker.onmessage = function(event) {
|
|
|
- console.log("decodeWoker.onmessage")
|
|
|
+
|
|
|
+<head>
|
|
|
+ <link rel="shortcut icon" href="#">
|
|
|
+</head>
|
|
|
+<!-- <canvas id="playCanvas" width="450" height="800"></canvas> -->
|
|
|
+
|
|
|
+<body oncontextmenu="Back()">
|
|
|
+ <canvas id="playCanvas" width="450" height="800"></canvas>
|
|
|
+</body>
|
|
|
+<script type="text/javascript" src="helper.js"></script>
|
|
|
+<script type="text/javascript" src="pcm-player.js" ></script>
|
|
|
+<script type="text/javascript" src="webgl.js"></script>
|
|
|
+<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+ var decodeWoker = new Worker('decoder.js');
|
|
|
+ var myVideo = document.getElementById("playCanvas");
|
|
|
+ decodeWoker.onmessage = function(event) {
|
|
|
+ console.log("decodeWoker.onmessage")
|
|
|
var objData = event.data;
|
|
|
|
|
|
switch (objData.cmd) {
|
|
|
case 0:
|
|
|
- console.log(objData.data);
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- var time = new Date().getTime();
|
|
|
- webglPlayer.renderFrame(objData.data, 720, 1280, 720 * 1280, (720 / 2) * (1280 / 2));
|
|
|
+ console.log(objData.data);
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ var time = new Date().getTime();
|
|
|
+ webglPlayer.renderFrame(objData.data, 720, 1280, 720 * 1280, (720 / 2) * (1280 / 2));
|
|
|
//console.log("渲染耗时", new Date().getTime() - time + "ms");break;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
- let vConsole = new VConsole();
|
|
|
+ let vConsole = new VConsole();
|
|
|
|
|
|
- if (typeof(Worker) !== "undefined") {
|
|
|
- console.log("支持webworker");
|
|
|
+ if (typeof(Worker) !== "undefined") {
|
|
|
+ console.log("支持webworker");
|
|
|
} else {
|
|
|
- alert("不支持webworker");
|
|
|
+ alert("不支持webworker");
|
|
|
}
|
|
|
|
|
|
- var isFinish = false;
|
|
|
- this.canvas = document.getElementById("playCanvas");
|
|
|
- var webglPlayer = new WebGLPlayer(this.canvas, {
|
|
|
- preserveDrawingBuffer: false
|
|
|
+ var isFinish = false;
|
|
|
+ this.canvas = document.getElementById("playCanvas");
|
|
|
+ var webglPlayer = new WebGLPlayer(this.canvas, {
|
|
|
+ preserveDrawingBuffer: false
|
|
|
});
|
|
|
|
|
|
|
|
|
- var webSocketWorker = new Worker('websocket.js');
|
|
|
- var startTime = new Date().getTime();
|
|
|
+ var webSocketWorker = new Worker('websocket.js');
|
|
|
+ var startTime = new Date().getTime();
|
|
|
|
|
|
|
|
|
|
|
|
- webSocketWorker.onmessage = function(event) {
|
|
|
- console.log("event.data", event.data)
|
|
|
+ webSocketWorker.onmessage = function(event) {
|
|
|
+ console.log("event.data", event.data)
|
|
|
decodeWoker.postMessage(event.data);
|
|
|
}
|
|
|
|
|
|
@@ -66,8 +66,8 @@
|
|
|
}
|
|
|
});
|
|
|
|
|
|
- function Close() //webworker 关闭,清理
|
|
|
- {
|
|
|
+ function Close() //webworker 关闭,清理
|
|
|
+ {
|
|
|
var cmd = {
|
|
|
cmd: 0
|
|
|
};
|
|
|
@@ -76,18 +76,18 @@
|
|
|
webSocketWorker.postMessage(cmd);
|
|
|
webSocketWorker.terminate();
|
|
|
}
|
|
|
- myVideo.onmousedown = function(event) {
|
|
|
- console.log("22222")
|
|
|
- //放在此处只是为了方便演示，实际使用中查找横竖屏只要刚连接上时调用一次就好。
|
|
|
+ myVideo.onmousedown = function(event) {
|
|
|
+ console.log("22222")
|
|
|
+ //放在此处只是为了方便演示，实际使用中查找横竖屏只要刚连接上时调用一次就好。
|
|
|
//var checkBuffer = GetScreenState();
|
|
|
//ws.send(checkBuffer);
|
|
|
|
|
|
/*if(!isFeed)
|
|
|
{
|
|
|
console.log("重新申请I帧");
|
|
|
- requestTime = new Date().getTime();
|
|
|
- var buffer = RequestIFrame();
|
|
|
- ws.send(buffer);
|
|
|
+ requestTime = new Date().getTime();
|
|
|
+ var buffer = RequestIFrame();
|
|
|
+ ws.send(buffer);
|
|
|
}*/
|
|
|
|
|
|
//console.log("报文 %s", PrintArry(buffer));
|
|
|
@@ -95,15 +95,16 @@
|
|
|
|
|
|
if (event.button == 0) {
|
|
|
var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
|
|
|
- var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
|
|
|
- var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
|
|
|
- // ws.send(buffer);
|
|
|
- // decodeWoker.postMessage(event.data);
|
|
|
- console.log("打印buffer", PrintArry(buffer))
|
|
|
- decodeWoker.postMessage(buffer);
|
|
|
- isDrag = true;
|
|
|
+ var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
|
|
|
+ var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
|
|
|
+ // ws.send(buffer);
|
|
|
+ // decodeWoker.postMessage(event.data);
|
|
|
+ console.log("打印buffer", PrintArry(buffer))
|
|
|
+ decodeWoker.postMessage(buffer);
|
|
|
+ isDrag = true;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
- </script>
|
|
|
-</html>
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
huangxiaojing