|
@@ -1,359 +1,336 @@
|
|
|
<!DOCTYPE html>
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
<html lang="en">
|
|
|
-<head>
|
|
|
|
|
- <meta charset="UTF-8">
|
|
|
|
|
- <meta name="description" content="jMuxer - a simple javascript mp4 muxer for non-standard streaming communications protocol">
|
|
|
|
|
- <meta name="keywords" content="h264 player, mp4 player, mse, mp4 muxing, jmuxer, aac player">
|
|
|
|
|
- <title>JMuxer demo</title>
|
|
|
|
|
- <script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
|
|
|
- <style type="text/css">
|
|
|
|
|
- .github-tools {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 15px;
|
|
|
|
|
- right: 15px;
|
|
|
|
|
- }
|
|
|
|
|
- a.h264-player {
|
|
|
|
|
- font-size: 20px;
|
|
|
|
|
- text-decoration: none;
|
|
|
|
|
- color: #07568e;
|
|
|
|
|
- margin-top: 10px;
|
|
|
|
|
- display: block;
|
|
|
|
|
- }
|
|
|
|
|
- .gesture {
|
|
|
|
|
- font-size: 15px;
|
|
|
|
|
- color: #ad4903;
|
|
|
|
|
- margin-top: 10px;
|
|
|
|
|
- }
|
|
|
|
|
-</style>
|
|
|
|
|
-</head>
|
|
|
|
|
-<body>
|
|
|
|
|
-
|
|
|
|
|
-<div id="container" style="width: 600px; margin: 0 auto;">
|
|
|
|
|
- <video width="100%" autoplay poster="images/loader-thumb.jpg" id="player"></video>
|
|
|
|
|
- <audio width="50%" controls autoplay poster="images/loader-thumb.jpg" id="audioPlayer" ></audio>
|
|
|
|
|
-</div>
|
|
|
|
|
-
|
|
|
|
|
-<body oncontextmenu="Back()">
|
|
|
|
|
-</body>
|
|
|
|
|
-
|
|
|
|
|
-<script src="helper.js" >
|
|
|
|
|
-</script>
|
|
|
|
|
-
|
|
|
|
|
-<script>
|
|
|
|
|
- //隐藏控件 controls
|
|
|
|
|
- var fpsCount = 0;
|
|
|
|
|
- var timeCount = 0;
|
|
|
|
|
- var isFeed = true;
|
|
|
|
|
- var isDrag = false;
|
|
|
|
|
- var curTime = new Date().getTime();
|
|
|
|
|
- var requestTime = new Date().getTime();//记录离开时间
|
|
|
|
|
- var myVideo = document.getElementById("player");
|
|
|
|
|
- var myAudio = document.getElementById("audioPlayer");
|
|
|
|
|
-
|
|
|
|
|
- document.addEventListener("visibilitychange", () => {
|
|
|
|
|
-
|
|
|
|
|
- if (document.visibilityState == "visible")
|
|
|
|
|
- {
|
|
|
|
|
- console.log("页面可见，继续喂视频");
|
|
|
|
|
- requestTime = new Date().getTime();
|
|
|
|
|
- myVideo.play();
|
|
|
|
|
- }
|
|
|
|
|
- else
|
|
|
|
|
- {
|
|
|
|
|
- isFeed = false;
|
|
|
|
|
- //myVideo.pause();
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-});
|
|
|
|
|
-
|
|
|
|
|
- myVideo.addEventListener('pause',function(){
|
|
|
|
|
- console.log("视频播放暂停");
|
|
|
|
|
- isFeed = false;
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- myAudio.addEventListener('onerror',function(){
|
|
|
|
|
- console.log("音频播放暂停");
|
|
|
|
|
- //myAudio.play();
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- function parse(data) {
|
|
|
|
|
- var input = new Uint8Array(data),
|
|
|
|
|
- dv = new DataView(input.buffer),
|
|
|
|
|
- duration,
|
|
|
|
|
- audioLength,
|
|
|
|
|
- audio,
|
|
|
|
|
- video;
|
|
|
|
|
-
|
|
|
|
|
- duration = dv.getUint16(0, true);//获取duration
|
|
|
|
|
- audioLength = dv.getUint16(2, true);
|
|
|
|
|
-
|
|
|
|
|
- if(audioLength == 0)
|
|
|
|
|
- {
|
|
|
|
|
- video = input.subarray(4);
|
|
|
|
|
- console.log("只有视频");
|
|
|
|
|
- }
|
|
|
|
|
- else
|
|
|
|
|
- {
|
|
|
|
|
- audio = input.subarray(4, (audioLength + 4));
|
|
|
|
|
- video = input.subarray(audioLength + 4);
|
|
|
|
|
- console.log("视频 + 音频");
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- return {
|
|
|
|
|
- audio: audio,
|
|
|
|
|
- video: video,
|
|
|
|
|
- duration: duration
|
|
|
|
|
- };
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- //解协议
|
|
|
|
|
- function ParseProto(data)
|
|
|
|
|
- {
|
|
|
|
|
- var temp = "";
|
|
|
|
|
- var input = new Uint8Array(data),
|
|
|
|
|
- duration,
|
|
|
|
|
- video,
|
|
|
|
|
- audio;
|
|
|
|
|
-
|
|
|
|
|
- if(input[0] == 0 && input[1] == 0 && input[2] == 0 && input[3] == 1)
|
|
|
|
|
- {
|
|
|
|
|
- // debugger
|
|
|
|
|
- video = input;
|
|
|
|
|
- duration = 24;
|
|
|
|
|
- var nalType = input[4] &0x1f;//
|
|
|
|
|
-
|
|
|
|
|
- if(nalType == 0x07|| nalType == 0x08 || nalType == 0x05)//策略， 找到sps、sps、或I帧，才继续渲染
|
|
|
|
|
- {
|
|
|
|
|
- if(!isFeed)
|
|
|
|
|
- {
|
|
|
|
|
- console.log("%d, 检测到I帧，重新渲染, 耗时 %d ms", nalType, new Date().getTime() - requestTime);
|
|
|
|
|
|
|
+ <head>
|
|
|
|
|
+ <meta charset="UTF-8">
|
|
|
|
|
+ <meta name="description" content="jMuxer - a simple javascript mp4 muxer for non-standard streaming communications protocol">
|
|
|
|
|
+ <meta name="keywords" content="h264 player, mp4 player, mse, mp4 muxing, jmuxer, aac player">
|
|
|
|
|
+ <title>JMuxer demo</title>
|
|
|
|
|
+ <script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
|
|
|
+ <style type="text/css">
|
|
|
|
|
+ .github-tools {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 15px;
|
|
|
|
|
+ right: 15px;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- isFeed = true;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
- else
|
|
|
|
|
- {
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
- else if(input[0] == 0xff)
|
|
|
|
|
- {
|
|
|
|
|
- audio = input;
|
|
|
|
|
- duration = 22;
|
|
|
|
|
- }
|
|
|
|
|
- else if(input[0] == 0x68)
|
|
|
|
|
- {
|
|
|
|
|
- if(input[23] == 0x05)//横竖屏标识
|
|
|
|
|
- {
|
|
|
|
|
- var state = CheckScreenDirection(input.slice(24, 24 + 8));
|
|
|
|
|
-
|
|
|
|
|
- if(state == 1)
|
|
|
|
|
- {
|
|
|
|
|
- console.log("安卓卡此时竖屏");
|
|
|
|
|
- //竖屏处理
|
|
|
|
|
|
|
+
|
|
|
|
|
+ a.h264-player {
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
|
+ text-decoration: none;
|
|
|
|
|
+ color: #07568e;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+ display: block;
|
|
|
}
|
|
}
|
|
|
- else
|
|
|
|
|
- {
|
|
|
|
|
- console.log("安卓卡此时横屏");
|
|
|
|
|
- //横屏处理
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .gesture {
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ color: #ad4903;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
- //console.log("屏幕旋转 %s", PrintArry(input));
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- return {
|
|
|
|
|
- audio: audio,
|
|
|
|
|
- video: video,
|
|
|
|
|
- duration: duration
|
|
|
|
|
- };
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- window.onload = function() {
|
|
|
|
|
- var socketURL = 'wss://jmuxer-demo-server.herokuapp.com';
|
|
|
|
|
- // socketURL = "ws://localhost:8080"
|
|
|
|
|
- // socketURL = "ws://192.168.11.238:8080";//C# websocket服务器中转
|
|
|
|
|
- // socketURL="wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005"
|
|
|
|
|
- //socketURL = "ws://127.0.0.1:8022/videoWebSocket?clientType=0&sn=RK3923C1201900139&cardIp=192.168.11.66&port=9100";
|
|
|
|
|
- /*socketURL = "ws://192.168.31.242:8022/videoWebSocket?clientType=0&sn=RK3923C1201900139&cardIp=192.168.11.66&port=9100";*/
|
|
|
|
|
- //flushingTime， 缓存刷新时间
|
|
|
|
|
- // socketURL = "ws://14.215.128.98:14112";
|
|
|
|
|
- socketURL = "ws://192.168.11.66:9101";
|
|
|
|
|
-
|
|
|
|
|
- var jmuxer = new JMuxer({
|
|
|
|
|
- node: 'player',
|
|
|
|
|
- flushingTime:15 ,
|
|
|
|
|
- fps: 30,
|
|
|
|
|
- mode:'video',
|
|
|
|
|
- debug: false
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- var audioMuxer = new JMuxer({
|
|
|
|
|
- node: 'audioPlayer',
|
|
|
|
|
- flushingTime:1,
|
|
|
|
|
- clearBuffer: true,
|
|
|
|
|
- fps: 43,//可以不选
|
|
|
|
|
- mode:'audio',
|
|
|
|
|
- debug: false
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- /*var costTime = new Date().getTime() - curTime;
|
|
|
|
|
|
|
+ </style>
|
|
|
|
|
+ </head>
|
|
|
|
|
+ <body>
|
|
|
|
|
+
|
|
|
|
|
+ <div id="container" style="width: 600px; margin: 0 auto;">
|
|
|
|
|
+ <video width="100%" autoplay poster="images/loader-thumb.jpg" id="player"></video>
|
|
|
|
|
+ <audio width="50%" controls autoplay poster="images/loader-thumb.jpg" id="audioPlayer"></audio>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <body oncontextmenu="Back()">
|
|
|
|
|
+ </body>
|
|
|
|
|
+
|
|
|
|
|
+ <script src="helper.js">
|
|
|
|
|
+ </script>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+ //隐藏控件 controls
|
|
|
|
|
+ var fpsCount = 0;
|
|
|
|
|
+ var timeCount = 0;
|
|
|
|
|
+ var isFeed = true;
|
|
|
|
|
+ var isDrag = false;
|
|
|
|
|
+ var curTime = new Date().getTime();
|
|
|
|
|
+ var requestTime = new Date().getTime(); //记录离开时间
|
|
|
|
|
+ var myVideo = document.getElementById("player");
|
|
|
|
|
+ var myAudio = document.getElementById("audioPlayer");
|
|
|
|
|
+
|
|
|
|
|
+ document.addEventListener("visibilitychange", () => {
|
|
|
|
|
+
|
|
|
|
|
+ if (document.visibilityState == "visible") {
|
|
|
|
|
+ console.log("页面可见，继续喂视频");
|
|
|
|
|
+ requestTime = new Date().getTime();
|
|
|
|
|
+ myVideo.play();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ isFeed = false;
|
|
|
|
|
+ //myVideo.pause();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ });
|
|
|
|
|
+ window.MediaSource = window.MediaSource || window.WebKitMediaSource;
|
|
|
|
|
+ this.isMSESupported = !!window.MediaSource;
|
|
|
|
|
+
|
|
|
|
|
+ if (!this.isMSESupported) {
|
|
|
|
|
+ alert("不支持MSE");
|
|
|
|
|
+ } else {
|
|
|
|
|
+ alert("支持MSE");
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ myVideo.addEventListener('pause', function() {
|
|
|
|
|
+ console.log("视频播放暂停");
|
|
|
|
|
+ isFeed = false;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ myAudio.addEventListener('onerror', function() {
|
|
|
|
|
+ console.log("音频播放暂停");
|
|
|
|
|
+ //myAudio.play();
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ function parse(data) {
|
|
|
|
|
+ var input = new Uint8Array(data),
|
|
|
|
|
+ dv = new DataView(input.buffer),
|
|
|
|
|
+ duration,
|
|
|
|
|
+ audioLength,
|
|
|
|
|
+ audio,
|
|
|
|
|
+ video;
|
|
|
|
|
+
|
|
|
|
|
+ duration = dv.getUint16(0, true); //获取duration
|
|
|
|
|
+ audioLength = dv.getUint16(2, true);
|
|
|
|
|
+
|
|
|
|
|
+ if (audioLength == 0) {
|
|
|
|
|
+ video = input.subarray(4);
|
|
|
|
|
+ console.log("只有视频");
|
|
|
|
|
+ } else {
|
|
|
|
|
+ audio = input.subarray(4, (audioLength + 4));
|
|
|
|
|
+ video = input.subarray(audioLength + 4);
|
|
|
|
|
+ console.log("视频 + 音频");
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ return {
|
|
|
|
|
+ audio: audio,
|
|
|
|
|
+ video: video,
|
|
|
|
|
+ duration: duration
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ //解协议
|
|
|
|
|
+ function ParseProto(data) {
|
|
|
|
|
+ var temp = "";
|
|
|
|
|
+ var input = new Uint8Array(data),
|
|
|
|
|
+ duration,
|
|
|
|
|
+ video,
|
|
|
|
|
+ audio;
|
|
|
|
|
+
|
|
|
|
|
+ if (input[0] == 0 && input[1] == 0 && input[2] == 0 && input[3] == 1) {
|
|
|
|
|
+ // debugger
|
|
|
|
|
+ video = input;
|
|
|
|
|
+ duration = 24;
|
|
|
|
|
+ var nalType = input[4] & 0x1f; //
|
|
|
|
|
+
|
|
|
|
|
+ if (nalType == 0x07 || nalType == 0x08 || nalType == 0x05) //策略， 找到sps、sps、或I帧，才继续渲染
|
|
|
|
|
+ {
|
|
|
|
|
+ if (!isFeed) {
|
|
|
|
|
+ console.log("%d, 检测到I帧，重新渲染, 耗时 %d ms", nalType, new Date().getTime() - requestTime);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ isFeed = true;
|
|
|
|
|
+
|
|
|
|
|
+ } else {
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ } else if (input[0] == 0xff) {
|
|
|
|
|
+ audio = input;
|
|
|
|
|
+ duration = 22;
|
|
|
|
|
+ } else if (input[0] == 0x68) {
|
|
|
|
|
+ if (input[23] == 0x05) //横竖屏标识
|
|
|
|
|
+ {
|
|
|
|
|
+ var state = CheckScreenDirection(input.slice(24, 24 + 8));
|
|
|
|
|
+
|
|
|
|
|
+ if (state == 1) {
|
|
|
|
|
+ console.log("安卓卡此时竖屏");
|
|
|
|
|
+ //竖屏处理
|
|
|
|
|
+ } else {
|
|
|
|
|
+ console.log("安卓卡此时横屏");
|
|
|
|
|
+ //横屏处理
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ //console.log("屏幕旋转 %s", PrintArry(input));
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ return {
|
|
|
|
|
+ audio: audio,
|
|
|
|
|
+ video: video,
|
|
|
|
|
+ duration: duration
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ window.onload = function() {
|
|
|
|
|
+ var socketURL = 'wss://jmuxer-demo-server.herokuapp.com';
|
|
|
|
|
+ // socketURL = "ws://localhost:8080"
|
|
|
|
|
+ // socketURL = "ws://192.168.11.238:8080";//C# websocket服务器中转
|
|
|
|
|
+ // socketURL="wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005"
|
|
|
|
|
+ //socketURL = "ws://127.0.0.1:8022/videoWebSocket?clientType=0&sn=RK3923C1201900139&cardIp=192.168.11.66&port=9100";
|
|
|
|
|
+ /*socketURL = "ws://192.168.31.242:8022/videoWebSocket?clientType=0&sn=RK3923C1201900139&cardIp=192.168.11.66&port=9100";*/
|
|
|
|
|
+ //flushingTime， 缓存刷新时间
|
|
|
|
|
+ // socketURL = "ws://14.215.128.98:14112";
|
|
|
|
|
+ socketURL = "ws://192.168.11.66:9101";
|
|
|
|
|
+
|
|
|
|
|
+ var jmuxer = new JMuxer({
|
|
|
|
|
+ node: 'player',
|
|
|
|
|
+ flushingTime: 15,
|
|
|
|
|
+ fps: 30,
|
|
|
|
|
+ mode: 'video',
|
|
|
|
|
+ debug: false
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ var audioMuxer = new JMuxer({
|
|
|
|
|
+ node: 'audioPlayer',
|
|
|
|
|
+ flushingTime: 1,
|
|
|
|
|
+ clearBuffer: true,
|
|
|
|
|
+ fps: 43, //可以不选
|
|
|
|
|
+ mode: 'audio',
|
|
|
|
|
+ debug: false
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ /*var costTime = new Date().getTime() - curTime;
|
|
|
if(costTime > 5)
|
|
if(costTime > 5)
|
|
|
{
|
|
{
|
|
|
console.log("websocket接收延迟 %d ms", costTime);
|
|
console.log("websocket接收延迟 %d ms", costTime);
|
|
|
}*/
|
|
}*/
|
|
|
-
|
|
|
|
|
- curTime = new Date().getTime();
|
|
|
|
|
- var ws = new WebSocket(socketURL);
|
|
|
|
|
- ws.binaryType = 'arraybuffer';
|
|
|
|
|
-
|
|
|
|
|
- //断开检测
|
|
|
|
|
- ws.onclose = function (e) {
|
|
|
|
|
- alert("websocket连接断开");
|
|
|
|
|
- console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
|
|
|
|
|
- console.log(e);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- ws.addEventListener('message',function(event) {
|
|
|
|
|
-
|
|
|
|
|
- //console.log("喂数据");
|
|
|
|
|
- //jmuxer.feed(data);
|
|
|
|
|
- var data = ParseProto(event.data);//JAVA服务器转发
|
|
|
|
|
- //var data = parse(event.data);//分离音视频数据，C#转发
|
|
|
|
|
- // console.log("推流详情============",event.data);
|
|
|
|
|
-
|
|
|
|
|
- var audioData = {
|
|
|
|
|
- audio: data.audio,
|
|
|
|
|
- video: null,
|
|
|
|
|
- duration: data.duration
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- var videoData = {
|
|
|
|
|
- audio: null,
|
|
|
|
|
- video: data.video,
|
|
|
|
|
- duration: data.duration
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- var streamTemp = myAudio.captureStream();
|
|
|
|
|
-
|
|
|
|
|
- if(myAudio.readyState == 2)
|
|
|
|
|
- {
|
|
|
|
|
- console.log("出现声音停止");
|
|
|
|
|
- //alert("出现声音停止");
|
|
|
|
|
- //console.log("出现声音停止，当今进度 %s, %s", myAudio.played.end(0), myAudio.buffered.end(0));
|
|
|
|
|
- myAudio.play();
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- if(data.audio != null)//喂音频
|
|
|
|
|
- {
|
|
|
|
|
- //console.log("feed audio");
|
|
|
|
|
- audioMuxer.feed(audioData);
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- if(data.video != null)//喂视频
|
|
|
|
|
- {
|
|
|
|
|
- if(isFeed)
|
|
|
|
|
- {
|
|
|
|
|
- jmuxer.feed(data);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- //jmuxer.feed(videoData);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- if(data.video)
|
|
|
|
|
- {
|
|
|
|
|
- if(new Date().getTime() - curTime >= 1000)
|
|
|
|
|
- {
|
|
|
|
|
- //console.log("fps %d", fpsCount);
|
|
|
|
|
- fpsCount = 0;
|
|
|
|
|
|
|
+
|
|
|
curTime = new Date().getTime();
|
|
curTime = new Date().getTime();
|
|
|
|
|
+ var ws = new WebSocket(socketURL);
|
|
|
|
|
+ ws.binaryType = 'arraybuffer';
|
|
|
|
|
+
|
|
|
|
|
+ //断开检测
|
|
|
|
|
+ ws.onclose = function(e) {
|
|
|
|
|
+ alert("websocket连接断开");
|
|
|
|
|
+ console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
|
|
|
|
|
+ console.log(e);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ ws.addEventListener('message', function(event) {
|
|
|
|
|
+
|
|
|
|
|
+ //console.log("喂数据");
|
|
|
|
|
+ //jmuxer.feed(data);
|
|
|
|
|
+ var data = ParseProto(event.data); //JAVA服务器转发
|
|
|
|
|
+ //var data = parse(event.data);//分离音视频数据，C#转发
|
|
|
|
|
+ // console.log("推流详情============",event.data);
|
|
|
|
|
+
|
|
|
|
|
+ var audioData = {
|
|
|
|
|
+ audio: data.audio,
|
|
|
|
|
+ video: null,
|
|
|
|
|
+ duration: data.duration
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ var videoData = {
|
|
|
|
|
+ audio: null,
|
|
|
|
|
+ video: data.video,
|
|
|
|
|
+ duration: data.duration
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ var streamTemp = myAudio.captureStream();
|
|
|
|
|
+
|
|
|
|
|
+ if (myAudio.readyState == 2) {
|
|
|
|
|
+ console.log("出现声音停止");
|
|
|
|
|
+ //alert("出现声音停止");
|
|
|
|
|
+ //console.log("出现声音停止，当今进度 %s, %s", myAudio.played.end(0), myAudio.buffered.end(0));
|
|
|
|
|
+ myAudio.play();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (data.audio != null) //喂音频
|
|
|
|
|
+ {
|
|
|
|
|
+ //console.log("feed audio");
|
|
|
|
|
+ audioMuxer.feed(audioData);
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (data.video != null) //喂视频
|
|
|
|
|
+ {
|
|
|
|
|
+ if (isFeed) {
|
|
|
|
|
+ jmuxer.feed(data);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ //jmuxer.feed(videoData);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (data.video) {
|
|
|
|
|
+ if (new Date().getTime() - curTime >= 1000) {
|
|
|
|
|
+ //console.log("fps %d", fpsCount);
|
|
|
|
|
+ fpsCount = 0;
|
|
|
|
|
+ curTime = new Date().getTime();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ fpsCount++;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ myVideo.onmousedown = function(event) {
|
|
|
|
|
+ //放在此处只是为了方便演示，实际使用中查找横竖屏只要刚连接上时调用一次就好。
|
|
|
|
|
+ //var checkBuffer = GetScreenState();
|
|
|
|
|
+ //ws.send(checkBuffer);
|
|
|
|
|
+
|
|
|
|
|
+ /*if(!isFeed)
|
|
|
|
|
+ {
|
|
|
|
|
+ console.log("重新申请I帧");
|
|
|
|
|
+ requestTime = new Date().getTime();
|
|
|
|
|
+ var buffer = RequestIFrame();
|
|
|
|
|
+ ws.send(buffer);
|
|
|
|
|
+ }*/
|
|
|
|
|
+
|
|
|
|
|
+ //console.log("报文 %s", PrintArry(buffer));
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ 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);
|
|
|
|
|
+ isDrag = true;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ myVideo.onmousemove = function(event) {
|
|
|
|
|
+ if (isDrag && event.button == 0) {
|
|
|
|
|
+ var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
|
|
|
|
|
+ var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
|
|
|
|
|
+ var buffer = ExexuteMouseMove(posX.toString(), posY.toString());
|
|
|
|
|
+ ws.send(buffer);
|
|
|
|
|
+ //console.log("移动位置 %d, %d", posX, posY);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ myVideo.onmouseup = function(event) {
|
|
|
|
|
+ isDrag = false;
|
|
|
|
|
+ var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
|
|
|
|
|
+ var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
|
|
|
|
|
+ var buffer = ExexuteMouseUp(posX.toString(), posY.toString());
|
|
|
|
|
+ ws.send(buffer);
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ myVideo.onkeydown = function(event) {
|
|
|
|
|
+ ExexuteKeyDown(e.keyCode);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function Back() {
|
|
|
|
|
+ if (event.button == 2) {
|
|
|
|
|
+ //ExexuteKeyDown(4);
|
|
|
|
|
+ }
|
|
|
|
|
+ ExexuteKeyDown(4);
|
|
|
|
|
+ window.event.returnValue = false;
|
|
|
|
|
+ return false;
|
|
|
}
|
|
}
|
|
|
- else
|
|
|
|
|
- {
|
|
|
|
|
- fpsCount++;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- myVideo.onmousedown = function(event)
|
|
|
|
|
- {
|
|
|
|
|
- //放在此处只是为了方便演示，实际使用中查找横竖屏只要刚连接上时调用一次就好。
|
|
|
|
|
- //var checkBuffer = GetScreenState();
|
|
|
|
|
- //ws.send(checkBuffer);
|
|
|
|
|
-
|
|
|
|
|
- /*if(!isFeed)
|
|
|
|
|
- {
|
|
|
|
|
- console.log("重新申请I帧");
|
|
|
|
|
- requestTime = new Date().getTime();
|
|
|
|
|
- var buffer = RequestIFrame();
|
|
|
|
|
- ws.send(buffer);
|
|
|
|
|
- }*/
|
|
|
|
|
-
|
|
|
|
|
- //console.log("报文 %s", PrintArry(buffer));
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- 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);
|
|
|
|
|
- isDrag = true;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- myVideo.onmousemove = function(event)
|
|
|
|
|
- {
|
|
|
|
|
- if(isDrag && event.button == 0)
|
|
|
|
|
- {
|
|
|
|
|
- var posX = event.offsetX * 1080 *1.0/myVideo.clientWidth;
|
|
|
|
|
- var posY = event.offsetY * 1920 *1.0/myVideo.clientHeight;
|
|
|
|
|
- var buffer = ExexuteMouseMove(posX.toString(), posY.toString());
|
|
|
|
|
- ws.send(buffer);
|
|
|
|
|
- //console.log("移动位置 %d, %d", posX, posY);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- myVideo.onmouseup = function(event)
|
|
|
|
|
- {
|
|
|
|
|
- isDrag = false;
|
|
|
|
|
- var posX = event.offsetX * 1080 *1.0/myVideo.clientWidth;
|
|
|
|
|
- var posY = event.offsetY * 1920 *1.0/myVideo.clientHeight;
|
|
|
|
|
- var buffer = ExexuteMouseUp(posX.toString(), posY.toString());
|
|
|
|
|
- ws.send(buffer);
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- myVideo.onkeydown = function(event)
|
|
|
|
|
- {
|
|
|
|
|
- ExexuteKeyDown(e.keyCode);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
-function Back()
|
|
|
|
|
-{
|
|
|
|
|
- if(event.button == 2)
|
|
|
|
|
- {
|
|
|
|
|
- //ExexuteKeyDown(4);
|
|
|
|
|
- }
|
|
|
|
|
- ExexuteKeyDown(4);
|
|
|
|
|
- window.event.returnValue=false;
|
|
|
|
|
- return false;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-</script>
|
|
|
|
|
-<script type="text/javascript" src="jmuxer.js"></script>
|
|
|
|
|
-</body>
|
|
|
|
|
|
|
+ </script>
|
|
|
|
|
+ <script type="text/javascript" src="jmuxer.js"></script>
|
|
|
|
|
+ </body>
|
|
|
</html>
|
|
</html>
|
wuyongxiang