index.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <link rel="stylesheet" href="./static/WSPlayer/player.css">
  9. <script src="./static/jquery-3.6.0.min.js"></script>
  10. <script src="./static/WSPlayer/PlayerControl.js"></script>
  11. </head>
  12. <body style="margin: 0; width: 100%; height: 100%">
  13. <div id="ws-record-player" style="width: 100%; height: 600px;"></div>
  14. </body>
  15. <script type="module">
  16. import WSPlayer from "./src/WSPlayer/WSPlayer.js";
  17. let recordPlayer = new WSPlayer({
  18. el: 'ws-record-player', // 必传
  19. type: 'record', // real | record
  20. serverIp: '36.26.62.70',
  21. num: 1,
  22. showControl: true,
  23. })
  24. let url = location.href;
  25. let rtsps = url.split('?')[1];
  26. let token = url.split('?')[2];
  27. let rtsp = rtsps + '?' + token;
  28. console.log(rtsp)
  29. recordPlayer.playRecord({
  30. rtspURL: rtsp, // String | Array[String] 可以传入多个rtsp地址,将会按照顺序在播放器中播放,最多播放四个
  31. decodeMode: 'canvas', // 解码方式, video|canvas 可以不传,自动识别,h264使用video播放,265使用canvas播放
  32. // wsURL: '' // 选择传递,默认播放器是连接服务器对应的websocket,但是也可以指定连接websocket地址
  33. })
  34. </script>
  35. </html>