webLive.html 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  6. <title>ImouPlayer</title>
  7. <script src="./imouplayer.js"></script>
  8. <style>
  9. * {
  10. /* font-family: PingFaangSC-Regular, Arial, 'Microsoft YaHei'; */
  11. margin: 0;
  12. padding: 0
  13. }
  14. button {
  15. display: block;
  16. width: 120px;
  17. line-height: 30px;
  18. border: 1px solid #409eff;
  19. background-color: #409eff;
  20. color: #fff;
  21. border-radius: 5px;
  22. cursor: pointer;
  23. margin-left: 73px;
  24. }
  25. .wrap {
  26. width: 80%;
  27. max-width: 600px;
  28. margin: 0 auto;
  29. }
  30. .icon {
  31. display: inline-block;
  32. width: 20px;
  33. line-height: 20px;
  34. text-align: center;
  35. background-color: #c1c1c1;
  36. border-radius: 50%;
  37. color: #fff;
  38. font-style: normal;
  39. cursor: pointer;
  40. position: relative;
  41. transition: background-color 0.3s ease;
  42. }
  43. .tip {
  44. display: block;
  45. text-align: right;
  46. font-size: 12px;
  47. color: #999;
  48. }
  49. @media only screen and (max-width: 768px) {
  50. html,
  51. body {
  52. padding: 0;
  53. margin: 0;
  54. }
  55. .wrap {
  56. width: 100%;
  57. }
  58. p {
  59. padding: 0 20px;
  60. }
  61. }
  62. </style>
  63. <script defer="defer" src="imouplayer.js"></script>
  64. </head>
  65. <body>
  66. <div id="app"></div>
  67. <div id="error"></div>
  68. <script>
  69. window.onload = function() {
  70. let urlParams = getUrlParams(window.location.search);
  71. console.log(urlParams);
  72. let player;
  73. let playerOption = {
  74. isEdit: false,
  75. url: urlParams.url || 'imou://open.lechange.com/6H0BXXXXXXX3D90/0/1?streamId=1',
  76. kitToken: urlParams.kitToken || 'Kt_3baccxxxxxxxxxxxxxxxxxxxxxa183e',
  77. // 是否自动播放
  78. autoplay: true,
  79. // 是否显示控制台
  80. controls: true,
  81. // 是否开启静音
  82. automute: true,
  83. themeData: [{
  84. area: 'header',
  85. fontColor: '#F18D00',
  86. backgroundColor: '#FFFFFF',
  87. activeButtonColor: '#0E72FF',
  88. buttonList: [{
  89. show: true,
  90. id: 'deviceName',
  91. name: '设备名称',
  92. position: 'left',
  93. }, {
  94. show: true,
  95. id: 'channalId',
  96. name: '设备通道',
  97. position: 'left',
  98. }, {
  99. show: true,
  100. id: 'cloudVideo',
  101. name: '云录像',
  102. position: 'right',
  103. }, {
  104. show: true,
  105. id: 'localVideo',
  106. name: '本地录像',
  107. position: 'right',
  108. }]
  109. }, {
  110. area: 'footer',
  111. fontColor: '#F18D00',
  112. backgroundColor: '#FFFFFF',
  113. activeButtonColor: '#0E72FF',
  114. buttonList: [{
  115. show: true,
  116. id: 'play',
  117. name: '播放',
  118. position: 'left',
  119. }, {
  120. show: true,
  121. id: 'mute',
  122. name: '音量控制',
  123. position: 'left',
  124. }, {
  125. show: true,
  126. id: 'talk',
  127. name: '语音对讲',
  128. position: 'left',
  129. }, {
  130. show: true,
  131. id: 'capture',
  132. name: '截图',
  133. position: 'left',
  134. }, {
  135. show: true,
  136. id: 'definition',
  137. name: '清晰度控制',
  138. position: 'right',
  139. }, {
  140. show: true,
  141. id: 'PTZ',
  142. name: '云台控制',
  143. position: 'right',
  144. }, {
  145. show: true,
  146. id: 'webExpend',
  147. name: '网页全屏',
  148. position: 'right',
  149. }, {
  150. show: true,
  151. id: 'extend',
  152. name: '全屏控制',
  153. position: 'right',
  154. }]
  155. }],
  156. };
  157. // 填写默认值
  158. function $(selector) {
  159. return document.querySelector(selector);
  160. }
  161. document.body.addEventListener('touchmove', function(e) {
  162. e.preventDefault();
  163. console.log('禁止拖动');
  164. }, {
  165. passive: false
  166. });
  167. function getUrlParams(data) {
  168. let paramsList = {};
  169. let paramsString = data.slice(1);
  170. let list
  171. if (paramsString.indexOf('%7C') != -1) {
  172. list = paramsString.split('%7C');
  173. } else {
  174. list = paramsString.split('|');
  175. }
  176. list.forEach(item => {
  177. let list = item.split('=');
  178. key = list.shift();
  179. value = list.join('=');
  180. paramsList[key] = value;
  181. })
  182. return paramsList
  183. }
  184. function initLive() {
  185. if (player) {
  186. player.destroy()
  187. }
  188. player = new ImouPlayer('#app');
  189. // const url = $('#url').value.trim();
  190. // const kitToken = $('#kitToken').value.trim();
  191. const url = playerOption.url;
  192. const kitToken = playerOption.kitToken;
  193. const urlArr = [];
  194. url.split('%').forEach(function(item, index) {
  195. const obj = {
  196. url: item,
  197. kitToken: kitToken,
  198. talk: {
  199. success: (msg) => {
  200. console.log('type', msg)
  201. },
  202. failed: (msg) => {
  203. console.log('failed', msg)
  204. }
  205. }
  206. };
  207. urlArr.push(obj)
  208. });
  209. // const width = window.innerWidth;
  210. const width = checkMobile() ? $('body').clientWidth : window.innerWidth;
  211. console.log(width);
  212. const height = checkMobile() ? parseInt(width * 9 / 16) : window.innerHeight;
  213. // const height = window.innerHeight;
  214. const params = {
  215. src: urlArr,
  216. width: width,
  217. height: height,
  218. isEdit: playerOption.isEdit,
  219. autoplay: playerOption.autoplay,
  220. controls: playerOption.controls,
  221. automute: playerOption.automute,
  222. themeData: playerOption.themeData
  223. };
  224. // console.log(params, '11111111111111111111111111');
  225. player.setup(params);
  226. };
  227. function checkMobile() {
  228. if (!navigator) return false;
  229. const reg = /(iPhone|iPod|Android|ios|SymbianOS)/i;
  230. return reg.test(navigator.userAgent);
  231. }
  232. (function() {
  233. initLive();
  234. })();
  235. // $('#init').onclick = function() {
  236. // initLive();
  237. // }
  238. // $('#startTalk').onclick = function() {
  239. // player.startTalk()
  240. // }
  241. // $('#stopTalk').onclick = function() {
  242. // player.stopTalk()
  243. // }
  244. };
  245. </script>
  246. </body>
  247. </html>