index.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!--
  2. * @Author: your name
  3. * @Date: 2021-12-07 09:45:10
  4. * @LastEditTime: 2021-12-23 08:51:21
  5. * @LastEditors: your name
  6. * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  7. * @FilePath: \hyyfClient\public\static\dahua\index.html
  8. -->
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12. <meta charset="UTF-8" />
  13. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  14. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  15. <title>Document</title>
  16. <link rel="stylesheet" href="./static/WSPlayer/player.css" />
  17. <script src="./static/jquery-3.6.0.min.js"></script>
  18. <script src="./static/WSPlayer/PlayerControl.js"></script>
  19. </head>
  20. <body style="margin: 0; width: 100%; height: 100%">
  21. <div id="ws-record-player" style="width: 100%; height: 600px;"></div>
  22. </body>
  23. <script type="module">
  24. import WSPlayer from "./src/WSPlayer/WSPlayer.js";
  25. let url = location.href;
  26. console.log(url)
  27. let rtsps = url.split("?")[1];
  28. let token = url.split("?")[2];
  29. let serveIp = url.split('?')[3];
  30. let rtsp = rtsps + "?" + token;
  31. let recordPlayer = new WSPlayer({
  32. el: "ws-record-player", // 必传
  33. type: "record", // real | record
  34. serverIp: serveIp,
  35. num: 1,
  36. showControl: true,
  37. });
  38. recordPlayer.playRecord({
  39. rtspURL: rtsp, // String | Array[String] 可以传入多个rtsp地址,将会按照顺序在播放器中播放,最多播放四个
  40. decodeMode: "canvas", // 解码方式, video|canvas 可以不传,自动识别,h264使用video播放,265使用canvas播放
  41. // wsURL: '' // 选择传递,默认播放器是连接服务器对应的websocket,但是也可以指定连接websocket地址
  42. });
  43. </script>
  44. </html>