(标签-webrtc|关键词-stream)

Question

我使用webrtc-streamer实现前端可以显示rtsp流显示在页面上，rtsp://admin:123456@192.168.2.104:554/Streaming/Channels/201请求这个的时候黑窗口一直显示 Requested URL : rtsp://admin:jsrh123456@192.168.2.100:554/Streaming/Channels/201。但是我请求通道号101直接就请求出来了。但是通道号往后排类似201、301、401，就会一直显示请求

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在尝试使用 webrtc-streamer 来播放 RTSP 流，但遇到了一些问题。根据你的描述，当尝试连接到特定的通道（例如 201、301 或者 401）时，浏览器会持续显示请求状态，而其他通道则能正常工作。

首先，我们需要确保网络设备（可能是摄像头或NVR）支持这些通道，并且它们是可用的。其次，确认 RTSP URL 的格式是否正确，特别是用户名和密码部分。如果你已经确认了这些问题，那么可能的原因是在 WebRTC 流处理过程中存在某种限制或者兼容性问题。

为了帮你解决这个问题，我会提供一个基本的 JavaScript 示例，用于创建并连接到 RTSP 流。请确保你已经在项目中安装了 webrtc-streamer，如果没有，可以通过 npm 安装：

npm install webrtc-streamer --save

然后，在你的 JavaScript 文件中，使用以下代码：

// 引入 webrtc-streamer 库
const streamer = require('webrtc-streamer');

async function startStream(url, videoElementId) {
    // 创建一个新的 MediaStream 对象
    const mediaStream = new MediaStream();

    try {
        // 连接到 RTSP 流
        await streamer.rtmpToWebRtc(url, { iceServers: [] }, (err, remoteStream) => {
            if (err) {
                console.error(`Error connecting to RTSP stream: ${err}`);
                return;
            }

            // 将远程流添加到视频元素
            mediaStream.addTrack(remoteStream.getVideoTracks()[0]);
            mediaStream.addTrack(remoteStream.getAudioTracks()[0]);

            // 设置视频元素的 srcObject 为媒体流
            document.getElementById(videoElementId).srcObject = mediaStream;

            // 开始播放视频
            document.getElementById(videoElementId).play();
        });
    } catch (error) {
        console.error(`Error starting stream: ${error}`);
    }
}

// 使用你的 RTSP URL 替换这里的 url 变量
const url = 'rtsp://admin:jsrh123456@192.168.2.104:554/Streaming/Channels/201';
const videoElementId = 'videoElement'; // 在 HTML 中创建一个具有此 id 的 <video> 元素

startStream(url, videoElementId);

这段代码会在网页上的指定视频元素中播放 RTSP 流。如果仍然存在问题，建议检查网络设备日志，查看是否有任何与特定通道相关的错误消息。同时，确保你的浏览器支持 WebRTC 和 RTSP 转换。对于某些较旧的浏览器，可能需要额外的插件或调整设置。

如果你的问题依然没有得到解决，可能需要进一步排查 WebRTC Streamer 库本身的问题，或者考虑使用其他的 RTSP 到 WebRTC 转换库，比如 JSMPEG 或者 simple-peer。

注意：这个示例假设你已经在HTML文件中有一个名为<video id="videoElement"></video>"的视频元素。如果没有，请在你的HTML中添加它。