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

资料：

webrtc目录

前端集成

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

  <video
    ref="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

阿里云运行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中使用该方法

方案二调试后成功可行！