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

方案二调试后成功可行!

相关推荐
朴拙数科13 分钟前
艺术字体AI生成阿里云WordArt锦书、通义万相、SiliconFlow、Pillow+OpenCV本地生成艺术字体
人工智能·阿里云·pillow
中云时代-防御可测试-小余40 分钟前
高防IP是如何防护DDoS攻击和CC攻击的
运维·服务器·tcp/ip·安全·阿里云·ddos·宽度优先
神仙别闹1 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
HuaHua的世界3 小时前
说说 Vue 中 CSS scoped 的原理?
css·vue.js
H5开发新纪元4 小时前
Vue 项目中 Loading 状态管理及页面切换 Bug 分析
前端·vue.js
icefiresong246 小时前
如何让 Vue 组件自动清理 EventBus 监听器?告别内存泄漏!
vue.js
tjh00018 小时前
vue3+TS 手动实现表格滚动
前端·javascript·vue.js
章若楠圈外男友8 小时前
修改了Element UI中组件的样式,打包后样式丢失
前端·vue.js
86Eric9 小时前
Vue 中 使用 Mixins 解决 多页面共用相同组件的相关问题
前端·javascript·vue.js·mixins·公用组件
Serverless社区9 小时前
MCP云托管最优解,揭秘国内最大MCP中文社区背后的运行时
阿里云·云原生·serverless·函数计算