vue 集成 webrtc-streamer 播放视频流 - 解决阿里云内外网访问视频流问题

embedded/2025/1/1 21:10:51/

资料：

史上最详细的webrtc-streamer访问摄像机视频流教程-CSDN博客

webrtc_9">webrtc目录

前端集成

html文件夹里的webrtcstreamer.js，集成到前端，可以访问webrtc，转换rtsp为webrtc视频流，在前端video中播放

  <videoref="video"id="video"style="width: 100%; height: 100%"muted></video>const WEBRTC_URL = "http://47.116.57.xxx:8000";mounted() {this.$nextTick(() => {this.webRtcServer = new WebRtcStreamer("video", this.WEBRTC_URL);this.webRtcServer.connect("rtsp://username:password@ip:port/camera/1002000100000000000000026959100?ssrc=271168");});},beforeDestroy() {this.webRtcServer.disconnect();this.webRtcServer = null;},

工具页面

http://47.116.57.xxx:8000/help.html

http://47.116.57.xxx:8000/api/help

webrtcstreamer_51">阿里云运行webrtc-streamer

cmd命令行运行命令启动：

webrtc-streamer.exe -o

解决内外网问题

问题描述

阿里云启动webrtc服务后，阿里云服务器localhost本地打开前端页面可以正常访问视频流，但是通过外网ip47.116.57.xxx 访问视频流白屏，看webrtc的日志是刚启动一个视频解析会话，就立马被close session了

查看前端访问webrtc接口返回的数据

fetch("http://47.116.57.xxx:8000/api/getIceCandidate?peerid=0.8230299317537435", {"headers": {"accept": "*/*","accept-language": "zh-CN,zh;q=0.9","cache-control": "no-cache","pragma": "no-cache","proxy-connection": "keep-alive"},"referrer": "http://47.116.57.xxx:9999/","referrerPolicy": "strict-origin-when-cross-origin","body": null,"method": "GET","mode": "cors","credentials": "omit"
});[{"candidate" : "candidate:3994363758 1 udp 2122194687 172.28.123.36 64623 typ host generation 0 ufrag bn+Z network-id 1","sdpMLineIndex" : 0,"sdpMid" : "0"},{"candidate" : "candidate:3283065688 1 udp 2122255103 2001::348b:fb58:18fc:3bf4:d08b:c6a0 64624 typ host generation 0 ufrag bn+Z network-id 4 network-cost 50","sdpMLineIndex" : 0,"sdpMid" : "0"}
]

注意看，这里返回的数据candidate数据里的ip，竟然是阿里云的内网ip，在外面自然是连不上内网的udp端口的

解决 - 方案一

webrtc启动时其实是会获取到当前服务器的内外网ip的，默认会使用外网ip，但是阿里云的服务器不知道为什么获取不到外网ip，使用的是内网ip

但是webrtc有一个 -H ip:port的参数配置项，可以指定webrtc启动后使用哪个ip和端口号

webrtc-streamer.exe -o -H 47.116.57.xxx:8000

但是绑定失败了，改成 -H 内网ip:8000 是可以的

方案一失败！

解决 - 方案二

接口返回的数据是内网ip，webrtcstreamer.js中会使用内网ip去连udp获取视频流，那我们可以在接口返回数据后，替换内网ip为外网ip，这样js代码就能成功链接udp端口了

写一个外网ip 替换内网ip 的js方法

/*** 内网Ip 转 外网Ip*/
const InternalIP_To_ExternalIP = function (dataJsonItem) {dataJsonItem.candidate = dataJsonItem.candidate.replaceAll("172.28.123.36", "47.116.57.xxx");console.log("InternalIP_To_ExternalIP", dataJsonItem);return dataJsonItem;
};

在webrtcstreamer.js中使用该方法