webClient_initWnd.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771
  1. class VideoPlay {
  2. constructor(spaceId, websocket, socketCode, vModeObj = {}, options) {
  3. // spaceId,socketCode不能相同,vModeObj播放模式,是否轮播
  4. this.handleName = spaceId;
  5. this.socketCode = socketCode;
  6. this.vModeObj = vModeObj;
  7. this.toolL = null; // 浏览器左侧、下方、右侧条宽度
  8. this.toolH = null; // 浏览器上方的高度,放大缩小时会变化
  9. this.fullToolL = null; // 最大化时浏览器左侧、下方、右侧条宽度
  10. this.fullToolH = null; // 最大化时浏览器上方高度
  11. this.space = document.querySelector(spaceId); // 传入的存放视频区域id或者class
  12. this.spaceStartOffsetLeft = document.querySelector(spaceId).offsetLeft; // 传入的存放视频区域距离浏览器左侧的距离,iframe另计算;
  13. this.spaceStartOffsetTop = document.querySelector(spaceId).offsetTop; // //传入的存放视频区域距离浏览器顶部的距离,iframe另计算;
  14. this.space = document.querySelector(spaceId);
  15. this.websocket = websocket; // 初始化websocket
  16. this.display = true; // 防止切换页面视频闪烁
  17. this.iframetoWinX = 0; // iframe距离浏览器左边的距离
  18. this.iframetoWinY = 0; // iframe距离浏览器顶部的距离
  19. this.width = 0; // 实时存放视频区域宽度
  20. this.height = 0; // 实存放视频区域高度
  21. this.posX = 0; // 实时存放视频区域距离浏览器左边的距离
  22. this.posY = 0; // 实时存放视频区域距离浏览器顶部的距离
  23. this.scale = false; // 是否开始伸缩网页
  24. this.defaults = {
  25. // 默认配置,可以通过option覆盖
  26. protocol: defaultConfig.protocol, // 协议
  27. letLoginIp: defaultConfig.loginIp, // 环境配置
  28. letPort: defaultConfig.port, // 端口配置
  29. letUserCode: localStorage.getItem('userId'), // 用户code
  30. wsUri: 'ws://localhost:1234',
  31. token: localStorage.getItem('token'), // token
  32. getVersion: null, // option里面的获取版本信息的回调函数通知
  33. loginSuccess: null, // 登陆成功会调通知
  34. errorInfo: null, // 异常回调通知
  35. isDefaultShow: true, // 是否默认显示视频
  36. onCreateVideoSuccess: false, // 客户端被拉起通知
  37. };
  38. this.startCoinRegionPOX = 0; // 默认menu菜单距离浏览器左边的距离
  39. this.startCoinRegionPOY = 0; // 默认menu菜单距离浏览器顶部的距离
  40. this.zoom = 1; // 默认伸缩;实时存放网页伸缩倍数
  41. this.ifmToTop = 0; // iframe距离区域的距离
  42. this.menuWidth1 = 0; // 实时菜单宽度
  43. this.menuHeight1 = 0; // 实时菜单高度
  44. this.settings = Object.assign({}, this.defaults, options); // 覆盖默认配置操作
  45. this.websocketOnerror = false;
  46. this.ServerVersion = 8888888; // 模拟服务器版本号
  47. this.ClientLocalVersion = 0; // 获取本地版本号
  48. this._toolHeight = 0; // 顶部高度
  49. this.status = true; // 记录显示隐藏
  50. this.status = document.querySelector(spaceId).clientHeight !== 0;
  51. }
  52. createHeader() {
  53. var obj = {};
  54. obj.loginIp = this.settings.letLoginIp;
  55. obj.method = '';
  56. obj.userCode = this.settings.letUserCode;
  57. obj.params = {};
  58. obj.params.array = [];
  59. return obj;
  60. }
  61. // 初始化
  62. init() {
  63. this.calcTools();
  64. this.initClientPanel();
  65. this.winMaxMinOpt();
  66. window.addEventListener('resize', () => {
  67. this.resize();
  68. });
  69. window.onunload = () => {
  70. this.closeClient();
  71. };
  72. }
  73. // webSocket交互
  74. webSocketSend(data) {
  75. if (this.websocket == null) {
  76. return;
  77. }
  78. if (this.websocket.readyState === 1) {
  79. this.websocket.send(data);
  80. } else {
  81. setTimeout(() => {
  82. this.webSocketSend(data);
  83. }, 1000);
  84. }
  85. }
  86. // 检测浏览器的缩放状态实现代码
  87. detectZoom() {
  88. var ratio = 0;
  89. var screen = window.screen;
  90. var ua = navigator.userAgent.toLowerCase();
  91. if (window.devicePixelRatio !== undefined) {
  92. ratio = window.devicePixelRatio;
  93. } else if (~ua.indexOf('msie')) {
  94. if (screen.deviceXDPI && screen.logicalXDPI) {
  95. ratio = screen.deviceXDPI / screen.logicalXDPI;
  96. }
  97. } else if (
  98. window.outerWidth !== undefined &&
  99. window.innerWidth !== undefined
  100. ) {
  101. ratio = window.outerWidth / window.innerWidth;
  102. }
  103. if (ratio) {
  104. ratio = Math.round(ratio * 100);
  105. }
  106. return ratio;
  107. }
  108. gethandname() {
  109. return this.handleName.replaceAll("#", "");
  110. }
  111. // 实时传递给客户端的位置大小
  112. dragResize(width, height, posX, posY) {
  113. var c = this.space.getBoundingClientRect();
  114. posX = Math.round((c.left * window.outerWidth) / window.innerWidth);
  115. posY = Math.round(
  116. // (c.top * window.outerWidth) / window.innerWidth +
  117. // window.outerHeight -
  118. // window.innerHeight -
  119. // 10,
  120. (c.top * window.outerWidth) / window.innerWidth +( window.outerHeight - window.innerHeight )
  121. );
  122. width = Math.round((c.width * window.outerWidth) / window.innerWidth);
  123. height = Math.round((c.height * window.outerWidth) / window.innerWidth);
  124. // console.log(c)
  125. // 实时存储目前视频的大小位置;
  126. this.width = Math.round(
  127. width * window.devicePixelRatio + 5 * window.devicePixelRatio,
  128. );
  129. this.height = Math.round(
  130. height * window.devicePixelRatio + 5 * window.devicePixelRatio,
  131. );
  132. this.posX = Math.round(
  133. posX * window.devicePixelRatio + 5 * window.devicePixelRatio,
  134. );
  135. this.posY = Math.round(
  136. posY * window.devicePixelRatio + 5 * window.devicePixelRatio,
  137. );
  138. // this.width = width;
  139. // this.height = height;
  140. // this.posX = posX;
  141. // this.posY = posY;
  142. // const params = {
  143. // loginIp: this.settings.letLoginIp,
  144. // method: 'adjustSizePosition',
  145. // params: {
  146. // width: this.width,
  147. // height: this.height,
  148. // posX: this.posX,
  149. // posY: this.posY,
  150. // handleName: this.handleName,
  151. // },
  152. // userCode: this.settings.letUserCode,
  153. // socketCode: this.socketCode,
  154. // };
  155. const ccp = this.createHeader();
  156. ccp.method = "setCtrlPos";
  157. ccp.params = {
  158. array: [
  159. {
  160. ctrlCode: this.gethandname(),
  161. posX: this.posX,
  162. posY: (this.posY < 0 ? 0 : this.posY),
  163. width: this.width,
  164. height: this.height,
  165. ratio: 100,
  166. scrollX: 0,
  167. scrollY: 0,
  168. scrollXH: 0,
  169. scrollYW: 0,
  170. cutList: [],
  171. },
  172. ],
  173. };
  174. // console.log(JSON.stringify(params))
  175. this.webSocketSend(JSON.stringify(ccp));
  176. }
  177. // 设置菜单遮挡问题
  178. setCoinRegion(flag, dorpDownIdArr) {
  179. const isEmbed = flag;
  180. let menu;
  181. let menuLeftX = 0;
  182. let menuLeftY = 0;
  183. const arr = [];
  184. this.zoom = this.detectZoom() / 100; // 910add
  185. if (flag === true) {
  186. // const obj = {};
  187. dorpDownIdArr.map((item, index) => {
  188. arr.push({});
  189. // obj[index] = document.querySelector(v);
  190. menu = document.querySelector(item);
  191. // 菜单宽高
  192. arr[index]['width'] = Math.round(menu.clientWidth * this.zoom);
  193. arr[index]['height'] = Math.round(menu.clientHeight * this.zoom);
  194. // 菜单左上角相对浏览器左上角的坐标
  195. // 菜单左上角相对浏览器左上角的坐标
  196. menuLeftX = Math.round(
  197. menu.getBoundingClientRect().left * this.zoom - 2,
  198. );
  199. menuLeftY = Math.round(
  200. menu.getBoundingClientRect().top * this.zoom + this._toolHeight,
  201. );
  202. arr[index]['posX'] = Math.round(
  203. menuLeftX + this.iframetoWinX * this.zoom,
  204. );
  205. arr[index]['posY'] = Math.round(
  206. menuLeftY + this.iframetoWinY * this.zoom,
  207. );
  208. });
  209. /* Array.from(arguments).splice(1, Array.from(arguments).length - 1).forEach((v, index) => {
  210. arr.push({});
  211. obj[index] = document.querySelector(v);
  212. menu = document.querySelector(dorpDownId);
  213. // 菜单宽高
  214. arr[index]["width"] = Math.round(obj[index].clientWidth * _this.zoom);
  215. arr[index]["height"] = Math.round(obj[index].clientHeight * _this.zoom);
  216. // 菜单左上角相对浏览器左上角的坐标
  217. menuLeftX = Math.round(obj[index].getBoundingClientRect().left* _this.zoom - 2);
  218. menuLeftY = Math.round(obj[index].getBoundingClientRect().top* _this.zoom + _this._toolHeight);
  219. arr[index]["posX"] = Math.round(menuLeftX + _this.iframetoWinX * _this.zoom);
  220. if (_this.zoom == 1) { //正常比例
  221. arr[index]["posY"] = Math.round(menuLeftY + _this.iframetoWinY * _this.zoom);
  222. } else { //缩放比例
  223. if (menu) {
  224. arr[index]["posY"] = Math.round(obj[index].getBoundingClientRect().top * _this.zoom + _this.ifmToTop * _this.zoom +_this._toolHeight);
  225. //console.log(_this.startCoinRegionPOY,menu.getBoundingClientRect().top*_this.zoom,_this.ifmToTop,Math.round(window.parent.outerHeight - (window.parent.innerHeight)*_this.zoom),_this.zoom);
  226. }
  227. }
  228. }) */
  229. }
  230. // console.log(arr);
  231. const params = {
  232. loginIp: this.settings.letLoginIp,
  233. method: 'setCoinRegion',
  234. params: {
  235. bCoincide: isEmbed,
  236. region: arr,
  237. handleName: this.handleName,
  238. },
  239. userCode: this.settings.letUserCode,
  240. socketCode: this.socketCode,
  241. };
  242. this.webSocketSend(JSON.stringify(params));
  243. }
  244. // 计算顶部距离,网页伸缩不变,这个针对不同分辨率的电脑,如果不准,第三方自己修改,只提供如下几种适配电脑。
  245. calcTools() {
  246. // const toolh = Math.round(window.outerHeight - (window.innerHeight) * this.detectZoom() / 100);
  247. // this._toolHeight = toolh < 0 ? 80 : toolh;
  248. // this.zoom = this.detectZoom() / 100;
  249. this.zoom = this.detectZoom() / 100;
  250. if (this.zoom === 0.67) {
  251. // 现场笔记本
  252. this._toolHeight = 80;
  253. } else if (this.zoom === 1.5) {
  254. this._toolHeight = 110;
  255. } else if (this.zoom === 3) {
  256. this._toolHeight = 232;
  257. } else {
  258. const toolh = Math.round(
  259. window.outerHeight - (window.innerHeight * this.detectZoom()) / 100,
  260. );
  261. this._toolHeight = toolh < 0 ? 90 : toolh;
  262. }
  263. }
  264. // 网页变操作化大小
  265. resize() {
  266. if (!this.status || !this.vModeObj.embedVideoMode) {
  267. return false;
  268. }
  269. const calcDomWidth =
  270. this.space.clientWidth || this.space.getBoundingClientRect().width;
  271. const calcDomheight =
  272. this.space.clientHeight || this.space.getBoundingClientRect().height;
  273. const zoom = this.detectZoom() / 100;
  274. const realClientWidth = Math.round(calcDomWidth * zoom);
  275. const realClientHeight = Math.round(calcDomheight * zoom);
  276. console.log('zoom---_toolHeight---', zoom, this._toolHeight);
  277. // 防止初始化后设置隐藏hide后拖动浏览器再show显示在左上方问题
  278. if (this.space.clientWidth === 0 && this.space.clientHeight === 0) {
  279. return;
  280. }
  281. if (zoom === 1) {
  282. // 默认伸缩状态
  283. // posX:距离浏览器左顶点横轴距离;posY:距离浏览器左顶点纵轴距离
  284. let posX = this.space.getBoundingClientRect().left;
  285. let posY;
  286. if (window.outerWidth === window.innerWidth) {
  287. // 普通浏览器最大化状态
  288. if (this.fullToolH == null) {
  289. // 为空时才计算,避免上下拖动改变浏览器大小事,视频窗口抖动
  290. this.fullToolL = (window.outerWidth - window.innerWidth) / 2;
  291. // _this.fullToolH = window.outerHeight - window.innerHeight - _this.fullToolL + 10;
  292. this.fullToolH = this._toolHeight;
  293. }
  294. posY = this.space.getBoundingClientRect().top + this.fullToolH;
  295. } else if (window.outerWidth - window.innerWidth < 0) {
  296. // F11全屏窗口计算
  297. posX = this.space.getBoundingClientRect().left;
  298. posY = this.space.getBoundingClientRect().top;
  299. } else {
  300. // 浏览器非最大化状态
  301. if (this.toolH == null) {
  302. this.toolL = (window.outerWidth - window.innerWidth) / 2;
  303. this.toolH = window.outerHeight - window.innerHeight - this.toolL;
  304. }
  305. posX = this.space.getBoundingClientRect().left;
  306. posY = this.space.getBoundingClientRect().top + this.toolH + 0;
  307. }
  308. posX = Math.round(posX);
  309. posY = Math.round(posY);
  310. this.dragResize(realClientWidth, realClientHeight, posX, posY);
  311. console.log(
  312. 'dragResize1-->',
  313. realClientWidth,
  314. realClientHeight,
  315. posX,
  316. posY,
  317. );
  318. } else {
  319. if (
  320. window.outerHeight - window.innerHeight === 288 ||
  321. window.outerWidth - window.innerWidth < 0
  322. ) {
  323. // 最大化
  324. const longW = Math.round(
  325. this.space.getBoundingClientRect().left * zoom,
  326. );
  327. const longH = Math.round(this.space.getBoundingClientRect().top * zoom);
  328. this.dragResize(realClientWidth, realClientHeight, longW, longH);
  329. console.log(
  330. '最大化dragResize2-->',
  331. realClientWidth,
  332. realClientHeight,
  333. longW,
  334. longH,
  335. );
  336. } else {
  337. const longW = Math.round(
  338. this.space.getBoundingClientRect().left * zoom,
  339. );
  340. const longH = Math.round(
  341. this.space.getBoundingClientRect().top * zoom + this._toolHeight,
  342. );
  343. this.dragResize(realClientWidth, realClientHeight, longW, longH);
  344. console.log(
  345. 'dragResize2-->',
  346. realClientWidth,
  347. realClientHeight,
  348. longW,
  349. longH,
  350. );
  351. }
  352. }
  353. }
  354. // 创建视频窗口
  355. createVideoDialog(obj) {
  356. const {
  357. rows = 2,
  358. cols = 2,
  359. wndSpaceing = 0,
  360. embedVideoMode = true,
  361. playerCtrlBarEnable = false,
  362. displayMode = 3,
  363. playMode = 0,
  364. playParams = {},
  365. webControlExpend = false,
  366. } = obj;
  367. let playParamsObj = null;
  368. playMode === 0 ? (playParamsObj = {}) : (playParamsObj = playParams);
  369. return;
  370. var cccr = this.createHeader();
  371. cccr.method = 'createCtrl';
  372. cccr.params = {
  373. array: [
  374. {
  375. ctrlCode: 'vPlayArea',
  376. domId: 'vPlayArea',
  377. ctrlType: 'realMonitorUI',
  378. ctrlProperty: {
  379. displayMode: 1,
  380. splitNum: 1,
  381. channelList:[],
  382. ctrlBarVisible: false,
  383. },
  384. visible: true,
  385. posX: 0,
  386. poxY: 0,
  387. width: 1200,
  388. viewWidth: 1920,
  389. viewHeight:478,
  390. height: 800,
  391. ratio: 100,
  392. scrollX: 0,
  393. scrollY: 0,
  394. scrollXH: 0,
  395. scrollYH: 0,
  396. cutList: [],
  397. },
  398. ],
  399. };
  400. // const params = JSON.stringify({
  401. // "loginIp": this.settings.letLoginIp,
  402. // "userCode": this.settings.letUserCode,
  403. // "socketCode": this.socketCode,
  404. // "method": "createCtrl",
  405. // "params": {
  406. // "handleName": this.handleName,
  407. // "rows": rows,
  408. // "cols": cols,
  409. // "wndSpaceing": wndSpaceing, // 视频播放窗口间隔,默认为0
  410. // "embedVideoMode": embedVideoMode, // 视频窗口是否为嵌入式。true:嵌入式(列表框云台和标题栏不展示),false:弹出式(展示列表框云台和标题栏)
  411. // "playerCtrlBarEnable": playerCtrlBarEnable, // 视频窗口上的鼠标云台是否使能。true:展示,false:不展示
  412. // "displayMode": displayMode, // 窗口显示模式,用于播放控制栏0:视频监控,显示播放控制栏; 1:轮播,隐藏播放控制栏
  413. // "playMode": playMode, // playMode:播放模式,0: 普通模式,1:轮播模式,默认为普通播放模式
  414. // "playParams": playParamsObj, // playMode=0,playParams为空;playMode=1,playParams格式如下:// 轮播时间间隔,单位秒,默认为5s
  415. // "webControlExpend": webControlExpend
  416. // }
  417. // });
  418. const params = JSON.stringify(cccr);
  419. this.webSocketSend(params);
  420. }
  421. //初始化窗口
  422. initClientPanel() {
  423. this.createVideoDialog(this.vModeObj);
  424. }
  425. // 实时预览视频
  426. realTimeVideo(
  427. arr = [
  428. {
  429. channelId: '',
  430. },
  431. ],
  432. ) {
  433. // return;
  434. // debugger;
  435. var createObj1 = this.createHeader();
  436. createObj1.method = 'destroyCtrl';
  437. createObj1.params = {
  438. array: [
  439. {
  440. ctrlCode: this.gethandname(),
  441. },
  442. ],
  443. };
  444. this.webSocketSend(JSON.stringify(createObj1));
  445. var createObj = this.createHeader();
  446. // var cccr = this.createHeader();
  447. createObj.method = 'createCtrl';
  448. createObj.params = {
  449. array: [
  450. {
  451. ctrlType: 'playerWin',
  452. visible: true,
  453. ctrlCode: this.gethandname(),
  454. ctrlProperty: {
  455. displayMode: 4,
  456. splitNum: 1,
  457. channelList: arr,
  458. ctrlBarVisible: false,
  459. },
  460. cutList: [
  461. {
  462. posX: 0,
  463. posY: 0,
  464. width: 0,
  465. height: 0,
  466. },
  467. ],
  468. posX: 0,
  469. posY: 0,
  470. width: 10,
  471. height: 10,
  472. ratio: 100,
  473. scrollX: 0,
  474. scrollY: 0,
  475. scrollXH: 0,
  476. scrollYW: 0,
  477. viewWidth: 10,
  478. viewHeight: 10,
  479. domId: this.gethandname,
  480. },
  481. ],
  482. };
  483. setTimeout(() => {
  484. var ccpd = this.createHeader();
  485. // ccpd.method = 'openVideo';
  486. // ccpd.params = {
  487. // array: arr,
  488. // displayMode:1
  489. // };
  490. ccpd.method = 'openCtrlPreview';
  491. ccpd.params = {
  492. array:arr
  493. }
  494. this.webSocketSend(JSON.stringify(ccpd));
  495. }, 3000);
  496. // createObj.method = 'openRealMonitorDialog';
  497. // createObj.params = {
  498. // destinationCode: "0",
  499. // toolBarFucList:[0,1,2]
  500. // };
  501. // createObj.params = {
  502. // array: [
  503. // {
  504. // ctrlCode: 'vPlayArea',
  505. // array: arr,
  506. // },
  507. // ],
  508. // };
  509. // for (var index = 0; index < arr.length; index++) {
  510. // var code = arr[index].channelId;
  511. // createObj.params.array[index] = {};
  512. // createObj.params.array[index].ctrlCode = code;
  513. // createObj.params.array[index].array = arr.map((i) => i.channelId);
  514. // }
  515. var varJson = JSON.stringify(createObj);
  516. console.log(varJson);
  517. setTimeout(() => {
  518. this.webSocketSend(varJson);
  519. this.dragResize(0,0,0,0);
  520. }, 100);
  521. // const params = JSON.stringify({
  522. // "loginIp": this.settings.letLoginIp,
  523. // "method": "openVideo",
  524. // "params": {
  525. // "array": arr, // [{"channelId": channelId}]
  526. // "handleName": this.handleName
  527. // },
  528. // "userCode": this.settings.letUserCode,
  529. // "socketCode": this.socketCode
  530. // });
  531. // this.webSocketSend(params);
  532. this.winMaxMinOpt();
  533. }
  534. // 录像回放 //paramsArr传开始时间,结束时间,通道号
  535. playBack(paramsArr) {
  536. this.resize();
  537. const params = JSON.stringify({
  538. loginIp: this.settings.letLoginIp,
  539. method: 'openRecord',
  540. params: {
  541. array: paramsArr, // [{"beginTime": "2019-12-27 00:00:00","channelId": "mA2I9l1kA1BOPTAPHT74P8","endTime": "2019-12-27 23:59:59"}]
  542. handleName: this.gethandname(),
  543. },
  544. userCode: this.settings.letUserCode,
  545. socketCode: this.socketCode,
  546. });
  547. this.webSocketSend(params);
  548. this.winMaxMinOpt();
  549. setTimeout(() => {
  550. this.resize();
  551. }, 1000);
  552. }
  553. // 关闭客户端
  554. closeClient() {
  555. const params = {
  556. loginIp: this.settings.letLoginIp,
  557. method: 'logout',
  558. userCode: this.settings.letUserCode,
  559. socketCode: this.socketCode,
  560. };
  561. this.webSocketSend(JSON.stringify(params));
  562. this.stopWebSocket();
  563. this.websocket = null;
  564. }
  565. // debug(message) { // 客户端调试返回信息操作
  566. // debugTextArea.value += message + "\n\n";
  567. // debugTextArea.scrollTop = debugTextArea.scrollHeight;
  568. // }
  569. sendMessage() {
  570. const msg = document.getElementById('inputText').value;
  571. const strToSend = msg;
  572. if (this.websocket != null) {
  573. document.getElementById('inputText').value = '';
  574. this.webSocketSend(strToSend);
  575. }
  576. }
  577. stopWebSocket() {
  578. if (this.websocket) {
  579. this.websocket.close();
  580. }
  581. this.websocket = null;
  582. }
  583. // 客户端显示隐藏操作;
  584. showBrower(flag,handles) {
  585. // return
  586. const params = this.createHeader();
  587. params.method = "setCtrlVisible";
  588. params.params = {
  589. array: [
  590. {
  591. ctrlCode: `${handles}`,
  592. visible: flag,
  593. },
  594. ],
  595. };
  596. // const params1 = {
  597. // loginIp: this.settings.letLoginIp,
  598. // method: 'whetherShowVideoWnd',
  599. // params: {
  600. // bShow: flag,
  601. // handleName: this.handleName,
  602. // },
  603. // userCode: this.settings.letUserCode,
  604. // socketCode: this.socketCode,
  605. // };
  606. this.display = flag;
  607. this.status = flag;
  608. this.resize(); // 隐藏时候不走resize,显示时候感知下位置,但是,这不能加延时,否则切换标签页有问题。
  609. this.webSocketSend(JSON.stringify(params));
  610. }
  611. // 客户端-释放窗口
  612. destroyVideoDialog() {
  613. const params = {
  614. loginIp: this.settings.letLoginIp,
  615. method: 'DestroyVideoDialog',
  616. params: {
  617. handleName: this.handleName,
  618. },
  619. userCode: this.settings.letUserCode,
  620. socketCode: this.socketCode,
  621. };
  622. this.webSocketSend(JSON.stringify(params));
  623. }
  624. // 视频置顶操作
  625. setVideoWndOnTop(flag) {
  626. const params = {
  627. loginIp: this.settings.letLoginIp,
  628. method: 'setVideoWndOnTop',
  629. params: {
  630. bOnTop: flag,
  631. handleName: this.handleName,
  632. },
  633. userCode: this.settings.letUserCode,
  634. socketCode: this.socketCode,
  635. };
  636. this.webSocketSend(JSON.stringify(params));
  637. }
  638. // 最大化最小化操作;
  639. winMaxMinOpt() {
  640. if (document.addEventListener) {
  641. document.addEventListener('webkitvisibilitychange', () => {
  642. if (document.webkitVisibilityState === 'hidden') {
  643. // 最小化
  644. const temp = this.status;
  645. // this.showBrower(false);
  646. this.status = temp;
  647. console.log('hidden');
  648. } else if (document.webkitVisibilityState === 'visible') {
  649. // 最大化
  650. // 延时的目的:最大化的瞬间 走resize中的window.outerWidth - window.innerWidth < 0这个条件,缺少浏览器顶部栏的高度,导致高度上移
  651. console.log('visible');
  652. setTimeout(() => {
  653. // this.showBrower(this.status);
  654. }, 200);
  655. }
  656. });
  657. }
  658. }
  659. // 关闭所有视频
  660. closeAllVideo() {
  661. const params = JSON.stringify({
  662. loginIp: this.settings.letLoginIp,
  663. method: 'closeVideo',
  664. userCode: this.settings.letUserCode,
  665. params: {
  666. handleName: this.handleName,
  667. },
  668. socketCode: this.socketCode,
  669. });
  670. this.webSocketSend(params);
  671. }
  672. // 拉app视频
  673. openAppVideo(paramsArr) {
  674. const params = JSON.stringify({
  675. loginIp: this.settings.letLoginIp,
  676. method: 'openAppVideo',
  677. params: {
  678. handleName: this.handleName,
  679. array: paramsArr,
  680. /* [
  681. {
  682. "channelId": "AcqRGNrqA1B15042F6AMEO",
  683. "userCode": "xxxxxx",
  684. "regionId": "xxxxx",
  685. "domainId": "xxxxx",
  686. }
  687. ] */
  688. },
  689. userCode: this.settings.letUserCode,
  690. socketCode: this.socketCode,
  691. });
  692. this.webSocketSend(params);
  693. }
  694. // 设置窗口分割数
  695. setDesignDivision(rows, cols) {
  696. const params = JSON.stringify({
  697. loginIp: this.settings.letLoginIp,
  698. method: 'SetDesignDivision',
  699. userCode: this.settings.letUserCode,
  700. params: {
  701. handleName: this.handleName,
  702. rows: Number(rows),
  703. cols: Number(cols),
  704. },
  705. socketCode: this.socketCode,
  706. });
  707. this.webSocketSend(params);
  708. }
  709. // 设置视频双击后位置大小
  710. setDesignDivision(obj) {
  711. const { width = '0', height = '0', posX = '0', posY = '0' } = obj;
  712. const params = JSON.stringify({
  713. loginIp: this.settings.letLoginIp,
  714. method: 'expendVideoCtrl',
  715. userCode: this.settings.letUserCode,
  716. params: {
  717. handleName: this.handleName,
  718. expend: true,
  719. width: width,
  720. height: height,
  721. posX: posX,
  722. posY: posY,
  723. },
  724. socketCode: this.socketCode,
  725. });
  726. this.webSocketSend(params);
  727. }
  728. // 通用方法第三方传方法名和参数体
  729. commonUse(method, paramsObj) {
  730. const params = JSON.stringify({
  731. loginIp: this.settings.letLoginIp,
  732. method: method,
  733. userCode: this.settings.letUserCode,
  734. params: paramsObj,
  735. socketCode: this.socketCode,
  736. });
  737. this.webSocketSend(params);
  738. }
  739. }