webRtc播放rtsp视频流(vue2、vue3+vite+ts)

news/2024/5/19 21:27:40/

一、下载webRtc

开发环境用的win10版本的。

github上直接下载,速度感人。

Releases · mpromonet/webrtc-streamer · GitHub

提供资源下载,0积分

https://download.csdn.net/download/weiqiang915/87700892

二、启动,测试

webrtc-streamer.exe -o -H 0.0.0.0:9001

-o:无需转码,降低CPU

-H:指定端口号

 打开浏览器,输入 127.0.0.1:9001/webrtcstreamer.html?video=rtsp://192.168.10.112:8557/h264

 测试用的臻识C3相机的rtsp视频流。

到此,说明webRtc插件没问题。下面整合到Vue2、Vue3+vite中使用 。

三、vue2中使用webRtc

1、两个js文件放入public文件夹下。(js文件在下载的插件中找)

  

2、vue源码

<template><div><video id="video" autoplay width="900" height="900"></video></div>
</template><script>
export default {name: 'index1',data() {return {webRtcServer: null}},mounted() {//video:需要绑定的video控件ID//127.0.0.1:8000:启动webrtc-streamer的设备IP和端口,默认8000this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//192.168.10.26:9001')//需要查看的rtsp地址this.webRtcServer.connect('rtsp://192.168.10.112:8557/h264')},beforeDestroy() {this.webRtcServer.disconnect()this.webRtcServer = null},methods: {}
}
</script><style scoped></style>

四、vue3+ts+vite中使用webRtc

1、assets文件夹下放两个js文件(js文件在下载的插件中找)

2、index.html中引用js

 3.指定vue中使用

<video id="video" autoplay width="1050" height="1050"></video>//获取webRtc服务
const webRtcServer = ref<any>()
const initWebRtcServer = async () => {nextTick(() => {video:需要绑定的video控件ID//127.0.0.1:8000:启动webrtc-streamer的设备IP和端口,默认8000// webRtcServer.value = new WebRtcStreamer('video', location.protocol + '//192.168.10.26:8000')webRtcServer.value = new WebRtcStreamer('video', `${location.protocol}//${webRtcServerIp.value}:8000`)//需要查看的rtsp地址webRtcServer.value.connect(`rtsp://${ipAddr.value}:8557/h264`)})
}
//页面销毁时销毁webRtc
const webRtcServerDis = computed(() => {webRtcServer.value.disconnect()webRtcServer.value = null
})调用initWebRtcServer()方法即可

4、打包注意事项

打包生成dist文件夹后,在文件内新建两个文件夹src\assets,用于存放两个js文件。否则会出现上线后webRtc无法实例化的情况。

 

 五、坑

1、控制台报错

Uncaught TypeError: Cannot set properties of null (setting 'srcObject')
    at WebRtcStreamer.onAddStream (webrtcstreamer.js:241:37)
    at pc.onaddstream (webrtcstreamer.js:152:40)
WebRtcStreamer.onAddStream @ webrtcstreamer.js:241
pc.onaddstream @ webrtcstreamer.js:152
webrtcstreamer.js:259 

 解决办法

 2、webRtc服务内存占用过高,启动时加 -o 参数。

3、Access to fetch at 'http://192.168.10.26:9001/api/getIceServers' from origin 'http://dpzn.cc:9230' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `private`.
webrtcstreamer.js:45 
        GET http://192.168.10.26:9001/api/getIceServers net::ERR_FAILED

 解决办法:

浏览器输入:edge://flags/#block-insecure-private-network-requests

 


http://www.ppmy.cn/news/47044.html

相关文章

辉煌优配|刚刚!“中字头”再度爆发

今天早盘&#xff0c;A股全体持续震动收拾&#xff0c;上证50指数跌破2700点整数关口&#xff0c;沪深300亦失守4100点。 盘面上&#xff0c;国防军工、种业、中字头、电气设备等板块涨幅居前&#xff0c;前期抢手的人工智能、半导体、信创、软件服务等板块全线回调。北上资金净…

高效又稳定的ChatGPT大模型训练技巧总结,让训练事半功倍!

文&#xff5c;python 前言 近期&#xff0c;ChatGPT成为了全网热议的话题。ChatGPT是一种基于大规模语言模型技术&#xff08;LLM&#xff0c; large language model&#xff09;实现的人机对话工具。现在主流的大规模语言模型都采用Transformer网络&#xff0c;通过极大规模的…

腾讯新增长,AI扛大旗?

经历了疫情期间的低谷与波折&#xff0c;腾讯正在恢复它的活力。 3月22日&#xff0c;腾讯发布了2022年第四季度及全年财报。财报显示&#xff0c;2022全年营收为5546亿元人民币&#xff0c;归母净利润(Non-IFRS)为1156亿元人民币&#xff1b;2022年腾讯第四季度的营收为1450亿…

Python爬虫实战——获取电影影评

Python爬虫实战——获取电影影评 前言第三方库的安装示例代码效果演示结尾 前言 使用Python爬取指定电影的影评&#xff0c; 注意&#xff1a;本文仅用于学习交流&#xff0c;禁止用于盈利或侵权行为。 操作系统&#xff1a;windows10 家庭版 开发环境&#xff1a;Pycharm Co…

nginx 简介 第四章

一、Nginx简介 1、Nginx简介 Nginx&#xff08;特点&#xff1a;占用内存少&#xff0c;并发能力强&#xff09; Nginx是一个高性能的 HTTP 和反向代理服务器。 Nginx是一款轻量级的 Web 服务器/反向代理服务器及电子邮件 单台物理服务器可支持30 000&#xff5e;50 000个并发…

当,Kotlin Flow与Channel相逢

Flow之所以用起来香&#xff0c;Flow便捷的操作符功不可没&#xff0c;而想要熟练使用更复杂的操作符&#xff0c;那么需要厘清Flow和Channel的关系。 本篇文章构成&#xff1a; 1. Flow与Channel 对比 1.1 Flow核心原理与使用场景 原理 先看最简单的Demo&#xff1a; fun…

WMS智能仓储

子产品介绍篇--智能仓储 智能仓储 我们通常也称 WMS 系统。是一个实时的计算机软件系统&#xff0c;它能够按照运作的业务规则和运算法则&#xff0c;对信息、资源、行为、存货和分销运作进行更完美地管理&#xff0c;提高效率。 一. 仓储管理系统&#xff08;wms&#xff09;…

柔性数组【结构体和动态内存的结合】

全文目录 前言柔性数组的定义语法柔性数组的特点柔性数组的使用柔性数组的优势 前言 很多人可能没有听过柔性数组这个概念&#xff0c;但是在C99中柔性数组是确实存在的。我个人感觉有点像动态内存和结构体的结合。 柔性数组的定义语法 结构中的最后一个元素允许是未知大小的…

IO多路复用 学习笔记 (阻塞 IO,非阻塞IO,select 模型,poll 模型,epoll 模型)

参考了一下网络资源做的笔记 什么是IO多路复用 就是用一个线程或者一个进程监控文件描述符是否能执行 IO操作 传统网络IO - 阻塞 IO &#xff08;BIO&#xff09; 阻塞IO就是当我们执行一次IO操作中&#xff0c;整个程序是阻塞的&#xff0c;意味在途中我们必须等待返回才…

你了解C语言中的数组指针和函数指针吗?

如题&#xff0c;本篇文章重点讲解C语言中的数组指针和函数指针。这2种指针其实都不是很常用&#xff0c;个人感觉使用起来代码的可读性不是很高&#xff0c;但是还是需要了解一下。 数组指针 数组指针&#xff0c;即指向数组的指针&#xff0c;是用来存放数组的地址的。那如…

车载网络 - Autosar网络管理 - 跳转状态

四、Autosar网络管理跳转状态 网络模式对应报文状态 Autosar网络管理报文各个状态对应的网络管理报文和应用报文的发送和接收状态。 网络模式 网络管理报文 应用报文 收发类型 发送报文 接收报文 发送报文 接收报文 总线睡眠模式(BSM) No Yes No NA 准备总线睡眠模…

第14届蓝桥杯 | 冶炼金属

作者&#xff1a;指针不指南吗 专栏&#xff1a;第14届蓝桥杯真题 &#x1f43e;慢慢来&#xff0c;慢慢来&#x1f43e; 文章目录 题目代码摸索第一次 AC 5/10第二次 AC 100% 反思 题目 链接&#xff1a; 4956. 冶炼金属 - AcWing题库 小蓝有一个神奇的炉子用于将普通金属 O …

老宋 带你五分钟搞懂vue

Vue 1.1 什么是框架 任何编程语言在最初的时候都是没有框架的&#xff0c;后来随着在实际开发过程中不断总结『经验』&#xff0c;积累『最佳实践』&#xff0c;慢慢的人们发现很多『特定场景』下的『特定问题』总是可以『套用固定解决方案』。于是有人把成熟的『固定解决方案…

javascript之函数

什么是函数&#xff1f; &#xff08;函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。&#xff09; 是封装了一段可以重复调用执行的代码&#xff0c;通过找个代码块&#xff0c;能够实现大量代码的重复使用 使用函数的方式&#xff1a; 声明函数调用函数 声…

使用vscode+cmake进行c++代码编写

1. 前言 因为vcode的主题格式比visual studio好看&#xff0c;而且注释使用ctr/注释非常方便。所以对于一下小型的c代码测试&#xff0c;例如用不到外部库&#xff0c;只需要纯c自己语法&#xff0c;我就想和python一样&#xff0c;在vscode上写。因此记录一下比较简单的典型的…

C++算法初级10——动态规划

C算法初级10——动态规划 文章目录 C算法初级10——动态规划最优化问题动态规划分析流程和条件 最优化问题 生活中我们常常遇到这样一些问题&#xff1a; 看到上面的例子&#xff0c;我们发现这些问题都是在最大化&#xff08;或者最小化&#xff09;某个指标&#xff1a;最小…

剪枝与重参第七课:YOLOv8剪枝

目录 YOLOv8剪枝前言1.Overview2.Pretrain(option)3.Constrained Training4.Prune4.1 检查BN层的bias4.2 设置阈值和剪枝率4.3 最小剪枝Conv单元的TopConv4.4 最小剪枝Conv单元的BottomConv4.5 Seq剪枝4.6 Detect-FPN剪枝4.7 完整示例代码 5.YOLOv8剪枝总结总结 YOLOv8剪枝 前…

你真的会用iPad吗,如何使iPad秒变生产力工具?在iPad上用vscode写代码搞开发

目录 前言 视频教程 1. 本地环境配置 2. 内网穿透 2.1 安装cpolar内网穿透(支持一键自动安装脚本) 2.2 创建HTTP隧道 3. 测试远程访问 4. 配置固定二级子域名 4.1 保留二级子域名 4.2 配置二级子域名 5. 测试使用固定二级子域名远程访问 6. iPad通过软件远程vscode…

Java的时代依然还在,合格的Java工程师成为紧缺人才

Java的时代依然还在&#xff0c;合格的Java工程师成为紧缺人才 编程语言的世界变化莫测&#xff0c;在其中浮浮沉沉28年的Java&#xff0c;也经历见证了很多语言的兴起和衰败。在最新的编程语言排行榜中&#xff0c;Java依旧位居前三&#xff0c;可见Java的发展后劲有多强&…

C++linux高并发服务器项目实践 day3

Clinux高并发服务器项目实践 day3 文件IO标准C库IO函数与LinuxIO函数虚拟地址空间文件描述符Linux系统IO函数open与close mode:八进制的数&#xff0c;表示用户对创建出的新的文件的操作权限 最终的权限是&#xff1a;mode & ~umask 0777 r(读) w(写) x(可执行)都有这样的权…