index.html 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  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 recordPlayer = new WSPlayer({
  26. el: "ws-record-player", // 必传
  27. type: "record", // real | record
  28. serverIp: "36.26.62.70",
  29. num: 1,
  30. showControl: true,
  31. });
  32. let url = location.href;
  33. let rtsps = url.split("?")[1];
  34. let token = url.split("?")[2];
  35. let rtsp = rtsps + "?" + token;
  36. recordPlayer.playRecord({
  37. rtspURL: rtsp, // String | Array[String] 可以传入多个rtsp地址,将会按照顺序在播放器中播放,最多播放四个
  38. decodeMode: "canvas", // 解码方式, video|canvas 可以不传,自动识别,h264使用video播放,265使用canvas播放
  39. // wsURL: '' // 选择传递,默认播放器是连接服务器对应的websocket,但是也可以指定连接websocket地址
  40. });
  41. </script>
  42. </html>