(标签-前端|关键词-前端页面)

Question

我使用了rtsp2web包，让前端页面显示rtsp视频，

 var rtsp1 =
      'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
    window.onload = () => {
      // 将rtsp视频流地址进行btoa处理一下
      new JSMpeg.Player('ws://localhost:9999/rtsp?url=' + btoa(rtsp1), {
        canvas: document.getElementById('canvas-1')
      })
    
        }
      )
    }

这个可以正常显示，但是因为我的rtsp不止一个我就每五秒循环列表中的其中一个rtsp。

this.rtsps = [
                            'rtsp://admin:jsrh123456@192.168.2.100:554/Streaming/Channels/201',
                            'rtsp://admin:jsrh123456@192.168.2.100:554/Streaming/Channels/101'
                        ];
var rtsp1 = this.rtsps;
        // 每五秒切换rtsp流地址
        setInterval(() => {
            const currentIndex = this.rtsps.indexOf(this.rtsp1);
            const nextIndex = (currentIndex + 1) % this.rtsps.length;
            rtsp1 = this.rtsps[nextIndex];
            console.log(rtsp1, 'rtsp1');
            window.onload = () => {
                // 将rtsp视频流地址进行btoa处理一下
                new JSMpeg.Player('ws://localhost:9999/rtsp?url=' + btoa(rtsp1), {
                    canvas: document.getElementById('canvas-3')
                })
            }
        }, 10000);

但是画面不显示

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

这个问题可能是因为每五秒循环切换的rtsp地址没有及时更新导致的。在代码中可以尝试添加一个刷新画面的方法，每次切换地址时调用该方法刷新画面。修改后的代码如下：

this.rtsps = [
  'rtsp://admin:jsrh123456@192.168.2.100:554/Streaming/Channels/201',
  'rtsp://admin:jsrh123456@192.168.2.100:554/Streaming/Channels/101'
];
var currentRTSPIndex = 0;
function updateRTSP() {
  if (currentRTSPIndex >= this.rtsps.length) {
    currentRTSPIndex = 0;
  }
  var rtsp1 = this.rtsps[currentRTSPIndex];
  console.log(rtsp1, 'rtsp1');
  var player = new JSMpeg.Player('ws://localhost:9999/rtsp?url=' + btoa(rtsp1), {
    canvas: document.getElementById('canvas-3')
  });
  currentRTSPIndex++;
  // 刷新画面
  player.hasVideo && player.render();
}
setInterval(updateRTSP.bind(this), 5000);

在这个代码中，我们使用了一个新的方法 updateRTSP() 来更新当前的 rtsp 地址，并加载新的视频流。同时，我们还调用了 player.hasVideo && player.render() 来刷新画面。 案例中使用了一个 currentRTSPIndex 变量来记录当前 rtsp 地址的下标，每隔 5 秒调用一次 updateRTSP() 方法切换到下一个 rtsp 地址并刷新画面。 注意事项：在优化代码后需要检查代码中可能的语法错误以及漏洞，并进行必要的测试。