如何使用webrtc-streamer实现rtsp在公网访问视频

Question

使用webrtc-streamer公网无法rtsp访问视频

Windows11安装webrtc-streamer

本地可以正常访问，路由器已经做了端口转发

如何使用webrtc-streamer实现rtsp在公网访问视频

Answer 1

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

要通过Webrtc-Streamer实现在公网访问RTSP流，你需要遵循以下步骤：

1. 安装Webrtc-Streamer: 首先，在Windows 11上安装Node.js，然后打开命令提示符（管理员模式）并运行以下命令来全局安装Webrtc-Streamer:

npm install -g webrtc-streamer

1. 配置RTSP源: 确保你的设备（例如摄像头）提供RTSP流，并且你知道正确的URL。例如，一个典型的RTSP URL可能是这样的：rtsp://username:password@ip_address:port/path

2. 启动Webrtc-Streamer服务器: 在命令提示符中，导航到你想存放配置文件的目录，创建一个名为config.json的文件，并添加以下内容（将your_rtsp_url替换为你的实际RTSP URL）:

{
    "input": {
        "type": "rtsp",
        "uri": "your_rtsp_url"
    },
    "output": [
        {
            "type": "web",
            "port": 8080,
            "path": "/stream",
            "hls": true
        }
    ]
}

1. 端口转发: 在你的路由器设置中，你需要设置端口转发规则，将外部端口（比如8080或其他未被占用的端口）映射到内部IP地址（通常是你的计算机IP）的8080端口。

2. 启动Webrtc-Streamer服务: 回到命令提示符，启动Webrtc-Streamer服务，指向你刚刚创建的配置文件:

webrtc-streamer --config config.json

1. 在Vue.js应用中访问直播: 在Vue.js应用中，你可以使用HTML5的<video>标签结合HLS技术来播放流。创建一个新的Vue组件，例如VideoPlayer.vue，并插入以下代码:

<template>
  <div>
    <video ref="video" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'http://your_public_ip:8080/stream.m3u8', // 替换为你的公共IP地址
    };
  },
  mounted() {
    this.$refs.video.src = this.url;
    this.$refs.video.load();
  },
};
</script>

1. 在你的Vue项目中使用这个组件: 在需要显示视频的地方，导入并使用VideoPlayer组件。

注意: 如果你遇到任何网络问题，可能需要检查防火墙设置，确保允许来自8080端口的入站连接。此外，如果你的设备不在同一网络内，你可能还需要检查NAT穿透问题。Webrtc-Streamer通常会处理一些基本的穿透，但如果问题依然存在，你可能需要更复杂的解决方案，比如UPnP或STUN/TURN服务器。

按照上述步骤操作后，你应该能在公网通过Vue.js应用访问到RTSP视频流了。