vue3+WebRTC拉流(正确姿势)

这篇具有很好参考价值的文章主要介绍了vue3+WebRTC拉流(正确姿势)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue3+WebRTC拉流(正确姿势)


缘由

最近我要改老项目的一个vr实时同步画面的问题,后端返回我的是一个前缀为webrtc://**.flv 的视频链接,于是我开始与这个链接进行长达两天的斗争,下面是斗争结果,各位同志过目


提示:以下是本篇文章正文内容,下面案例可供参考

一、webRtc拉流是什么?

WebRTC(Web Real-Time Communication)是一种用于浏览器之间实时通信的开放标准和技术集合。它提供了一组用于音频、视频和数据传输的API,使开发者能够在浏览器中构建实时通信应用程序,如音视频通话、视频会议、文件共享和屏幕共享等。

WebRTC 的主要特点包括:

1.实时通信:

WebRTC 允许浏览器之间进行实时的音视频传输和数据交换,实现了低延迟、高质量的实时通信体验。

2.网络穿越:

WebRTC 使用了一种称为 ICE(Interactive Connectivity Establishment)的技术,可以克服网络中的防火墙和 NAT(Network Address Translation)等障碍,使浏览器能够直接建立点对点的连接。

3.媒体处理:

WebRTC 提供了对音频和视频流的捕获、编解码、传输和渲染的能力。它支持多种音视频编解码器,并且能够自适应网络状况进行带宽管理。

4.数据通道:

除了音视频传输,WebRTC 还提供了数据通道,允许浏览器之间直接传输任意数据,用于实现点对点的数据传输和协作。
在使用 WebRTC 进行实时通信时,通常涉及两个主要角色:发送者和接收者。发送者可以通过浏览器捕获音频和视频流,并将其发送给接收者。接收者可以接收到发送者的音频和视频流,并在浏览器中进行播放或处理。

5.使用场景:

在拉流的场景中,接收者通过 WebRTC 从发送者那里接收音视频流。这可以是实时的音视频通话、视频会议中的参与者之间的流传输,或者从一个直播源获取流进行播放等。

WebRTC 的核心技术包括媒体获取和处理、网络穿越和点对点连接建立等,通过这些技术,它提供了一种便捷的方式在浏览器中实现实时的音视频传输和数据交换。

二、使用webRtc引用到Vue项目步骤

1.引入库


我使用的是jswebrtc

2.git仓库地址 (项目 /dist里有jswebrtc.min.js文件):

链接: GitHub - kernelj/jswebrtc: JSWebrtc – 支持 SRS 的 Webrtc 播放器

3.示例代码(播放单个拉流视频)

在你项目中的index.html中引入jswebrtc.min.js
​​
​​​​​​​​​​​​​​​​vue3 webrtc,webrtc,vr,vue

页面中设置video元素

//页面中设置video的样式以及类名,ref等
<video id="webrtc" ref="webrtc" controls style="width: 100%;height: 100%;object-fit: fill">
</video>

代码逻辑

let videoSrc = 'webrtc://192.168.0.11/live/c.flv'
		const initVideo = (url) => {
 
				// 播放器存在 清空重置
				if (player) {
					player.destroy()
					player = null
				}
				let videoDom = document.getElementById('webrtc')		// 初始化播放器 
				player = new JSWebrtc.Player(url, {
					video: videoDom,
					autoplay: true,
					onPlay: (obj) => {
						// 监听video元素状态,可播放时进行播放 。 某些情况下  autoplay 会失效
						// mdn https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/canplay_event
						// 菜鸟 https://www.runoob.com/tags/av-event-canplay.html
						videoDom.addEventListener('canplay', function () {
							videoDom.play()
						})
						// console.log(obj, '播放器开始播放!')
					}
				})
 
		}

调用这个方法的时候吧url传进去就可以了

	initVideo(videoSrc)

4.示例代码(播放多个拉流视频)

<div class="bodychild" v-for="(item) in monData">
                <video :id="item.deviceNo" ref="webrtc" controls style="width: 100%;height: 100%;object-fit: fill"></video>
</div>
	let monData: any = ref()
 
const upData = () => {
    let params = {
        pageNum: num.value,
        pageSize: size.value
    }
    GetVideo(params).then((res: any) => {
        if (res.data.message == "数据为空") {
            nulla.value = false
            return
        }
        monData.value = res.data.data.list
        monData.value.forEach((el: any) => {
            initVideo(el.rtmpPullAddress.replace('.flv', ''), el.deviceNo)
        })
    })
}
 
 
let player: any = null
let initVideo = (url: any, visitNo: any) => {
    setTimeout(() => {
        let videoDom = document.getElementById(visitNo)		// 初始化播放器 
        player = new JSWebrtc.Player(url, {
            video: videoDom,
            autoplay: true,
            onPlay: (obj: any) => {
                // 监听video元素状态,可播放时进行播放 。 某些情况下  autoplay 会失效
                // mdn https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/canplay_event
                // 菜鸟 https://www.runoob.com/tags/av-event-canplay.html
                videoDom.addEventListener('canplay', function () {
                    videoDom.play()
                })
            }
        })
    }, 1000)
}

总结

本文仅仅简单介绍了webRtc拉流的使用,而jswebrtc提供了大量能使我们快速便捷地处理拉流的函数和方法,详情请看链接: JSWebrtc – 支持 SRS 的 Webrtc 播放器。文章来源地址https://www.toymoban.com/news/detail-785966.html

到了这里,关于vue3+WebRTC拉流(正确姿势)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SRS服务器RTMP2WebRTC外网拉流配置

    将前端服务开放到外网,并且在外网使用WebRTC拉流,要求全部使用同一端口。 外网地址:10.172.59.42(域名:test.com)外网端口为33333 内网SRS服务器地址:192.168.5.177,内网端口为10090 路由器将外网33333端口映射到内网192.168.5.177:10090 一、使用docker搭建SRS服务器 1、编辑~/.bashrc,添

    2024年04月11日
    浏览(37)
  • Vue3.0正确引入Element UI组件的正确姿势 (Element-plus)

    1命令引入参照官方文档:https://element.eleme.cn/#/zh-CN/component/installation npm i element-ui -S main.js中引入 报错后 看官方文档 发现vue3已经不支持原来的饿了么ui了 需要使用与vue3适配的Element-plus 官网说明 :https://element-plus.gitee.io/#/zh-CN/component/installation 这次是得注意安装 element-plus 最后

    2024年02月13日
    浏览(56)
  • 视频直播新时代,低延时直播交互,Web,Android,WebRtc推流拉流测试

    直播现在已经深入了生活,学习,工作和娱乐方方面面,由于前些年的技术所限,传统rtmp,flv,m3u8 技术让直播快速启动项目产品,但也有很多不足,特别的交互式直播,一直是其中的痛点,延时较大(1-10秒不等) 让用户即想用,已不是太爽,随技术进步,Webrtc已经切入了视

    2024年01月19日
    浏览(58)
  • VUE3 播放RTSP实时、回放(NVR录像机)视频流(使用WebRTC)

    1、下载webrtc-streamer,下载的最新window版本 Releases · mpromonet/webrtc-streamer · GitHub  2、解压下载包  3、webrtc-streamer.exe启动服务 (注意:这里可以通过当前文件夹下用cmd命令webrtc-streamer.exe -o这样占用cpu会很少,直接双击exe文件会占用cpu) cmd  webrtc-streamer.exe -o 启动如下图所示,

    2024年04月12日
    浏览(64)
  • 在vue3中使用WebSocket的正确姿势,优雅~实在是太优雅了~

    此教程针对typescript,提供断线自动重连,断线数据重发,自动心跳,自定义消息发送机制 测试用例地址:在vue3+typescript-websocket示例 安装tools-vue3工具库,此仓库提供了http请求、文件请求、websocket、signalr、cookie的功能 创建 WSUtil.ts文件 内容: 发送数据 主动断开 消息处理 对

    2024年02月12日
    浏览(38)
  • VUE3+TS+VITE+webrtc-streamer实现实时视频播放(监控设备-rtsp,进来保你成)

    目录 1、下载webrtc-streamer,下载最新window版本  2、解压下载包  3、双击webrtc-streamer.exe启动服务  4、引入webrtc-streamer         1、将下载包中html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下 2、在index.html文件里引入这两个js文件 5、使

    2024年02月05日
    浏览(41)
  • Vue3+vant库处理showToast报错正确姿势:Can‘t resolve ‘vant/es/show-toast‘

    目录 1 . 首先,要排除是自己配置全局引用错误导致的问题  2. 排除不是自己引用问题,进入下一步 移除 babel-plugin-import 3. 在此时, 似乎就已经解决showToast报错问题, 环境:  \\\"vant\\\": \\\"^4.6.3\\\", 要确保自己 引用Toast没问题 在vue页面正确的使用Toast相关提示框   这里关于app.use(

    2024年02月03日
    浏览(41)
  • Qt/C++监控推流设备推流/延迟极低/实时性极高/rtsp/rtmp推流/hls/flv/webrtc拉流/调整分辨率降低带宽

    算下来这个推流的项目作品写了有四年多了,最初第一个版本只有文件点播的功能,用的纯QTcpSocket通信实现,属于比较简单的功能。由于文件点播只支持文件形式的推流,不支持网络流或者本地设备采集,所以迫切需要打破这个瓶颈,而后加入核心的网络推流功能,这也是本

    2024年04月13日
    浏览(40)
  • Vue中webSocket+webRtc实现多人会议,webRtc实现

    已经搭建好 websocket 双端通信(可以先模拟),用于实时交换双方信息。交换的信息也就是所谓的信令。实现 webRtc 进行多人会议,屏幕共享、摄像头共享。 我这里定义的websocket信息格式如下 发给某个人,下面会用【消息格式one】指代 发给会议中所有人,下面会用【消息格式

    2024年04月23日
    浏览(51)
  • SpringBoot+WebSocket+Vue+PeerJs实现WebRTC视频通话功能,Vue视频通话,web视频通话,webrtc视频通话

    博主正在担任一款电商app的全栈开发,其中涉及到一个 视频通话 功能。但是由于业务需求及成本考虑,不能使用第三方提供的SDK进行开发。所以博主选择使用PeerJs+WebSocket来实现这个功能。 WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定

    2024年02月08日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包