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

资料:

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

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中使用该方法

方案二调试后成功可行!

相关推荐
我命由我123451 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
海天胜景2 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
2501_915374352 小时前
WebRTC与RTMP
webrtc
_pengliang2 小时前
WebRTC 双向视频通话
音视频·webrtc
天天向上10243 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y3 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁3 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
写不出来就跑路4 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
1undefined25 小时前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
paopaokaka_luck5 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序