|
|
@@ -8,9 +8,9 @@ var numse = window.screen.height;
|
|
|
|
|
|
// 计算title top 头部 连接断开，是否准备重连？
|
|
|
if (numse <= 70) {
|
|
|
- var voheight = window.screen.height - winHeight - 34 - 20
|
|
|
+ var voheight = window.screen.height - winHeight - 34 - 20
|
|
|
} else {
|
|
|
- var voheight = window.screen.height - topwinHeightDraw - 20
|
|
|
+ var voheight = window.screen.height - topwinHeightDraw - 20
|
|
|
}
|
|
|
|
|
|
// 画笔大小
|
|
|
@@ -23,7 +23,7 @@ var parameters = GetRequest();
|
|
|
var form = {};
|
|
|
|
|
|
var cardToken = parameters["cardToken"];
|
|
|
-cardToken = cardToken && cardToken.replace(/@/g,"=");
|
|
|
+cardToken = cardToken && cardToken.replace(/@/g, "=");
|
|
|
form.cardIp = parameters["cardIp"];
|
|
|
form.port = parameters["port"];
|
|
|
form.username = parameters["username"];
|
|
|
@@ -31,207 +31,220 @@ form.userCardId = parameters["userCardId"];
|
|
|
form.ip = parameters["ip"];
|
|
|
form.domainName = parameters["domainName"];
|
|
|
var isWSS = true;
|
|
|
-var cUrl = isWSS ? "wss://" + form.domainName + "?cardIp=" + form.ip + "&token=" + cardToken : "ws://" + form.domainName + "?cardIp=" + form.ip + "&token=" + cardToken;
|
|
|
-// var cUrl = "wss://192.168.31.198/businessChannel?cardIp=192.168.20.53&token=LDAz32tutqS9wQqi0WlmvJ68/Is83cX+kavJQij1IMRvewgZ1dLvviFZqd4b8gcaR1eLztR/ViRLyyAVvZO7GA==";
|
|
|
+var cUrl = isWSS ? "wss://" + form.domainName + "?cardIp=" + form.ip + "&token=" + cardToken : "ws://" + form.domainName + "?cardIp=" + form.ip + "&token=" + cardToken;
|
|
|
+var videoWidth = 720
|
|
|
+var videoHeight = 1280
|
|
|
|
|
|
-var wsss,errorTime = 0;
|
|
|
+var wsss, errorTime = 0;
|
|
|
var first = true;
|
|
|
doConnect();
|
|
|
function throttle(fn, delay) {
|
|
|
- var flag = true;
|
|
|
- errorTime += delay;
|
|
|
- return () => {
|
|
|
- if (!flag) return;
|
|
|
- flag = false;
|
|
|
- timer = setTimeout(() => {
|
|
|
- fn();
|
|
|
- flag = true;
|
|
|
- }, delay);
|
|
|
- };
|
|
|
+ var flag = true;
|
|
|
+ errorTime += delay;
|
|
|
+ return () => {
|
|
|
+ if (!flag) return;
|
|
|
+ flag = false;
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ fn();
|
|
|
+ flag = true;
|
|
|
+ }, delay);
|
|
|
+ };
|
|
|
}
|
|
|
|
|
|
function doConnect() {
|
|
|
- wsss = new WebSocket(cUrl);
|
|
|
- wsss.binaryType = 'arraybuffer';
|
|
|
-
|
|
|
- wsss.onopen = function () {
|
|
|
- // 获取虚拟场景状态
|
|
|
- var pings = { "type": "getVsStatus" }
|
|
|
- wsss.send(JSON.stringify(pings));
|
|
|
- var bitRate = {
|
|
|
- "data": {
|
|
|
- "bitRate": 1243000
|
|
|
- },
|
|
|
- "type": "bitRate"
|
|
|
- }
|
|
|
- wsss.send(JSON.stringify(bitRate));
|
|
|
- // 获取实时截图
|
|
|
- var screenPic = {
|
|
|
- type: 'getScreenPic',
|
|
|
+ wsss = new WebSocket(cUrl);
|
|
|
+ wsss.binaryType = 'arraybuffer';
|
|
|
+
|
|
|
+ wsss.onopen = function () {
|
|
|
+ // 获取虚拟场景状态
|
|
|
+ var pings = { "type": "getVsStatus" }
|
|
|
+ wsss.send(JSON.stringify(pings));
|
|
|
+ var bitRate = {
|
|
|
+ "data": {
|
|
|
+ "bitRate": 1243000
|
|
|
+ },
|
|
|
+ "type": "bitRate"
|
|
|
+ }
|
|
|
+ wsss.send(JSON.stringify(bitRate));
|
|
|
+ // 获取实时截图
|
|
|
+ var screenPic = {
|
|
|
+ type: 'getScreenPic',
|
|
|
data: {
|
|
|
taskUid: '346789',
|
|
|
intervalTime: 0
|
|
|
}
|
|
|
- }
|
|
|
- wsss.send(JSON.stringify(screenPic));
|
|
|
- };
|
|
|
- wsss.onerror = function (evt) {
|
|
|
- wsss.close();
|
|
|
- throttle(doConnect,100);
|
|
|
- if(errorTime > 1000){
|
|
|
- wx.miniProgram.switchTab({
|
|
|
- url: '/pages/home/home'
|
|
|
- })
|
|
|
- }
|
|
|
- };
|
|
|
- wsss.onmessage = function(res) {
|
|
|
- var result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
|
|
|
- if (result.type === 'cutting') {
|
|
|
- if (result.data.status === 0) {
|
|
|
- $.toast('复制成功', "text");
|
|
|
- } else {
|
|
|
- $.toast(result.msg, "text");
|
|
|
- }
|
|
|
- return
|
|
|
- }
|
|
|
- var unit8Arr = new Uint8Array(result);
|
|
|
- if (unit8Arr[0] == 0x68 && unit8Arr[1] == 0x09 && first) {
|
|
|
- first = false;
|
|
|
- unit8Arr = unit8Arr.slice(12,unit8Arr.length-2);
|
|
|
- var base64 = 'data:image/jpg;base64,' + window.btoa(String.fromCharCode(...new Uint8Array(unit8Arr)));
|
|
|
- $(".loading_sceen_pic").attr('src', base64);
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ wsss.send(JSON.stringify(screenPic));
|
|
|
+ // 获取分辨率
|
|
|
+ var phoneSize = {
|
|
|
+ "type": "getPhoneSize"
|
|
|
+ }
|
|
|
+ wsss.send(JSON.stringify(phoneSize));
|
|
|
+ };
|
|
|
+ wsss.onerror = function (evt) {
|
|
|
+ wsss.close();
|
|
|
+ throttle(doConnect, 100);
|
|
|
+ if (errorTime > 1000) {
|
|
|
+ wx.miniProgram.switchTab({
|
|
|
+ url: '/pages/home/home'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ };
|
|
|
+ wsss.onmessage = function (res) {
|
|
|
+ var result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
|
|
|
+ if (result.type === 'cutting') {
|
|
|
+ if (result.data.status === 0) {
|
|
|
+ $.toast('复制成功', "text");
|
|
|
+ } else {
|
|
|
+ $.toast(result.msg, "text");
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (result.type === 'getPhoneSize') {
|
|
|
+ if (result.data.status === 0) {
|
|
|
+ videoWidth = result.data.width
|
|
|
+ videoHeight = result.data.height
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var unit8Arr = new Uint8Array(result);
|
|
|
+ if (unit8Arr[0] == 0x68 && unit8Arr[1] == 0x09 && first) {
|
|
|
+ first = false;
|
|
|
+ unit8Arr = unit8Arr.slice(12, unit8Arr.length - 2);
|
|
|
+ var base64 = 'data:image/jpg;base64,' + window.btoa(String.fromCharCode(...new Uint8Array(unit8Arr)));
|
|
|
+ $(".loading_sceen_pic").attr('src', base64);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
$('body').on("click", function () {
|
|
|
- draw_graph('pencil');
|
|
|
+ draw_graph('pencil');
|
|
|
})
|
|
|
//剪切板
|
|
|
$(".upload").on("click", function () {
|
|
|
- var texts = $(this).attr("data-text")
|
|
|
- if (texts == "uploads") {
|
|
|
- $(".mainbox").css({
|
|
|
- "display": "block"
|
|
|
- })
|
|
|
- $(".sbox").css({
|
|
|
- "display": "none"
|
|
|
- })
|
|
|
- }
|
|
|
+ var texts = $(this).attr("data-text")
|
|
|
+ if (texts == "uploads") {
|
|
|
+ $(".mainbox").css({
|
|
|
+ "display": "block"
|
|
|
+ })
|
|
|
+ $(".sbox").css({
|
|
|
+ "display": "none"
|
|
|
+ })
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
//home 控制home
|
|
|
$(".botmat1img").on("click", function () {
|
|
|
- var codes = $(this).attr("data-text")
|
|
|
- if (codes == "home") {
|
|
|
- wsss.send(ExexuteKeyBoard(3));
|
|
|
- } else if (codes == "return") {
|
|
|
- wsss.send(ExexuteKeyBoard(4));
|
|
|
- } else if (codes == "gengduo") {
|
|
|
- wsss.send(ExexuteKeyBoard(187));
|
|
|
- }
|
|
|
+ var codes = $(this).attr("data-text")
|
|
|
+ if (codes == "home") {
|
|
|
+ wsss.send(ExexuteKeyBoard(3));
|
|
|
+ } else if (codes == "return") {
|
|
|
+ wsss.send(ExexuteKeyBoard(4));
|
|
|
+ } else if (codes == "gengduo") {
|
|
|
+ wsss.send(ExexuteKeyBoard(187));
|
|
|
+ }
|
|
|
|
|
|
})
|
|
|
//高清控制
|
|
|
$(".PictureQuality").on("click", function () {
|
|
|
- $(this).addClass("avit").siblings().removeClass('avit')
|
|
|
- var id = $(this).attr("data-id")
|
|
|
- var bitRate = {
|
|
|
- "data": {
|
|
|
- "bitRate": id
|
|
|
- },
|
|
|
- "type": "bitRate"
|
|
|
- }
|
|
|
- wsss.send(JSON.stringify(bitRate))
|
|
|
+ $(this).addClass("avit").siblings().removeClass('avit')
|
|
|
+ var id = $(this).attr("data-id")
|
|
|
+ var bitRate = {
|
|
|
+ "data": {
|
|
|
+ "bitRate": id
|
|
|
+ },
|
|
|
+ "type": "bitRate"
|
|
|
+ }
|
|
|
+ wsss.send(JSON.stringify(bitRate))
|
|
|
})
|
|
|
var ongoingTouches = [];
|
|
|
//画图形
|
|
|
var draw_graph = function (graphType, obj) {
|
|
|
- //把蒙版放于画板上面
|
|
|
- $("#container").css("z-index", 30);
|
|
|
- $("#dedit").css("z-index", 20);
|
|
|
- var canDraw = false;
|
|
|
- //鼠标按下获取 开始xy开始画图
|
|
|
- var touchstart = function (e) {
|
|
|
- $('.control-right-img').attr({
|
|
|
- "data-id": "2"
|
|
|
- })
|
|
|
- $(".leftmains").css({
|
|
|
- "right": "-4rem"
|
|
|
- })
|
|
|
- var touchfor = e.originalEvent.changedTouches[0]; //for 的手指数组
|
|
|
- ongoingTouches.push(touchfor);
|
|
|
- var acrossWidthX = touchfor.pageY * (1280 / voheight);
|
|
|
- var acrossHeightY = 720 - touchfor.pageX * (720 / vowidth);
|
|
|
- var verticalWidthX = touchfor.pageX * (720 / vowidth);
|
|
|
- var verticalHeightY = touchfor.pageY * (1280 / voheight);
|
|
|
- //是否横屏
|
|
|
- var ping = resolving == 0 ?
|
|
|
- {"data":{"action": 0, "count": ongoingTouches.length, "id": touchfor.identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2)},"type": "event"} :
|
|
|
- {"data":{"action": 0, "count": ongoingTouches.length, "id": touchfor.identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2)},"type": "event"};
|
|
|
- wsss.send(JSON.stringify(ping));
|
|
|
- canDraw = true;
|
|
|
- };
|
|
|
-
|
|
|
- //鼠标离开 把蒙版canvas的图片生成到canvas中
|
|
|
- var touchend = function (e) {
|
|
|
- var touchfor = e.originalEvent.changedTouches[0]; //for 的手指数组
|
|
|
- var acrossWidthX = touchfor.pageY * (1280 / voheight);
|
|
|
- var acrossHeightY = 720 - touchfor.pageX * (720 / vowidth);
|
|
|
- var verticalWidthX = touchfor.pageX * (720 / vowidth);
|
|
|
- var verticalHeightY = touchfor.pageY * (1280 / voheight);
|
|
|
- //是否横屏
|
|
|
- var ping = resolving == 0 ?
|
|
|
- {"data":{"action": 1, "count": ongoingTouches.length, "id": touchfor.identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2)},"type": "event"} :
|
|
|
- {"data":{"action": 1, "count": ongoingTouches.length, "id": touchfor.identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2)},"type": "event"};
|
|
|
- wsss.send(JSON.stringify(ping));
|
|
|
- ongoingTouches.splice(touchfor.identifier, 1);
|
|
|
- canDraw = false;
|
|
|
- };
|
|
|
-
|
|
|
- //清空层 云手机超出屏幕的开关
|
|
|
- var clearContext = function () {
|
|
|
- canDraw = false;
|
|
|
- }
|
|
|
-
|
|
|
- // 鼠标移动
|
|
|
- var touchmove = function (e) {
|
|
|
- e = e || window.event;
|
|
|
- var touchfor = e.originalEvent.changedTouches[0]; //for 的手指数组
|
|
|
- var acrossWidthX = touchfor.pageY * (1280 / voheight);
|
|
|
- var acrossHeightY = 720 - touchfor.pageX * (720 / vowidth);
|
|
|
- var verticalWidthX = touchfor.pageX * (720 / vowidth);
|
|
|
- var verticalHeightY = touchfor.pageY * (1280 / voheight);
|
|
|
- var ping = resolving == 0 ?
|
|
|
- {"data":{"action": 2, "count": ongoingTouches.length, "id": touchfor.identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2)},"type": "event"} :
|
|
|
- {"data":{"action": 2, "count": ongoingTouches.length, "id": touchfor.identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2)},"type": "event"};
|
|
|
- wsss.send(JSON.stringify(ping));
|
|
|
- };
|
|
|
-
|
|
|
- //鼠标离开区域以外 除了涂鸦 都清空
|
|
|
- var mouseout = function () {
|
|
|
- if (graphType != 'handwriting') {
|
|
|
- clearContext();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- $(canvas_bak).unbind();
|
|
|
- $(canvas_bak).bind('touchstart', touchstart);
|
|
|
- $(canvas_bak).bind('touchmove', touchmove);
|
|
|
- $(canvas_bak).bind('touchend', touchend);
|
|
|
- $(canvas_bak).bind('mouseout', mouseout);
|
|
|
+ //把蒙版放于画板上面
|
|
|
+ $("#container").css("z-index", 30);
|
|
|
+ $("#dedit").css("z-index", 20);
|
|
|
+ var canDraw = false;
|
|
|
+ //鼠标按下获取 开始xy开始画图
|
|
|
+ var touchstart = function (e) {
|
|
|
+ $('.control-right-img').attr({
|
|
|
+ "data-id": "2"
|
|
|
+ })
|
|
|
+ $(".leftmains").css({
|
|
|
+ "right": "-4rem"
|
|
|
+ })
|
|
|
+ var touchfor = e.originalEvent.changedTouches[0]; //for 的手指数组
|
|
|
+ ongoingTouches.push(touchfor);
|
|
|
+ var acrossWidthX = touchfor.pageY * (videoHeight / voheight);
|
|
|
+ var acrossHeightY = videoWidth - touchfor.pageX * (videoWidth / vowidth);
|
|
|
+ var verticalWidthX = touchfor.pageX * (videoWidth / vowidth);
|
|
|
+ var verticalHeightY = touchfor.pageY * (videoHeight / voheight);
|
|
|
+ //是否横屏
|
|
|
+ var ping = resolving == 0 ?
|
|
|
+ { "data": { "action": 0, "count": ongoingTouches.length, "id": touchfor.identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } :
|
|
|
+ { "data": { "action": 0, "count": ongoingTouches.length, "id": touchfor.identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2) }, "type": "event" };
|
|
|
+ wsss.send(JSON.stringify(ping));
|
|
|
+ canDraw = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ //鼠标离开 把蒙版canvas的图片生成到canvas中
|
|
|
+ var touchend = function (e) {
|
|
|
+ var touchfor = e.originalEvent.changedTouches[0]; //for 的手指数组
|
|
|
+ var acrossWidthX = touchfor.pageY * (videoHeight / voheight);
|
|
|
+ var acrossHeightY = videoWidth - touchfor.pageX * (videoWidth / vowidth);
|
|
|
+ var verticalWidthX = touchfor.pageX * (videoWidth / vowidth);
|
|
|
+ var verticalHeightY = touchfor.pageY * (videoHeight / voheight);
|
|
|
+ //是否横屏
|
|
|
+ var ping = resolving == 0 ?
|
|
|
+ { "data": { "action": 1, "count": ongoingTouches.length, "id": touchfor.identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } :
|
|
|
+ { "data": { "action": 1, "count": ongoingTouches.length, "id": touchfor.identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2) }, "type": "event" };
|
|
|
+ wsss.send(JSON.stringify(ping));
|
|
|
+ ongoingTouches.splice(touchfor.identifier, 1);
|
|
|
+ canDraw = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ //清空层 云手机超出屏幕的开关
|
|
|
+ var clearContext = function () {
|
|
|
+ canDraw = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 鼠标移动
|
|
|
+ var touchmove = function (e) {
|
|
|
+ e = e || window.event;
|
|
|
+ var touchfor = e.originalEvent.changedTouches[0]; //for 的手指数组
|
|
|
+ var acrossWidthX = touchfor.pageY * (videoHeight / voheight);
|
|
|
+ var acrossHeightY = videoWidth - touchfor.pageX * (videoWidth / vowidth);
|
|
|
+ var verticalWidthX = touchfor.pageX * (videoWidth / vowidth);
|
|
|
+ var verticalHeightY = touchfor.pageY * (videoHeight / voheight);
|
|
|
+ var ping = resolving == 0 ?
|
|
|
+ { "data": { "action": 2, "count": ongoingTouches.length, "id": touchfor.identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } :
|
|
|
+ { "data": { "action": 2, "count": ongoingTouches.length, "id": touchfor.identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2) }, "type": "event" };
|
|
|
+ wsss.send(JSON.stringify(ping));
|
|
|
+ };
|
|
|
+
|
|
|
+ //鼠标离开区域以外 除了涂鸦 都清空
|
|
|
+ var mouseout = function () {
|
|
|
+ if (graphType != 'handwriting') {
|
|
|
+ clearContext();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ $(canvas_bak).unbind();
|
|
|
+ $(canvas_bak).bind('touchstart', touchstart);
|
|
|
+ $(canvas_bak).bind('touchmove', touchmove);
|
|
|
+ $(canvas_bak).bind('touchend', touchend);
|
|
|
+ $(canvas_bak).bind('mouseout', mouseout);
|
|
|
}
|
|
|
|
|
|
// 获取url中"?"符后的字串
|
|
|
function GetRequest() {
|
|
|
- var url = location.search;
|
|
|
- var obj = new Object();
|
|
|
- if (url.indexOf("?") != -1) {
|
|
|
- var str = url.substr(1);
|
|
|
- strs = str.split("&");
|
|
|
- for (var i = 0; i < strs.length; i++) {
|
|
|
- obj[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
|
|
|
- }
|
|
|
- }
|
|
|
- return obj;
|
|
|
+ var url = location.search;
|
|
|
+ var obj = new Object();
|
|
|
+ if (url.indexOf("?") != -1) {
|
|
|
+ var str = url.substr(1);
|
|
|
+ strs = str.split("&");
|
|
|
+ for (var i = 0; i < strs.length; i++) {
|
|
|
+ obj[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
}
|
heyang