本文分享来自一篇掘金社区的文章,介绍vue项目引入webrtc库实现流媒体播放,仅供参考学习。
jswebrtc库介绍
- github 地址
- JSWebrtc 对浏览器的 Webrtc 做了简单的封装,支持 SRS 的 RTC 流的播放.
- WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。
开始使用(vue项目)
- 下载jswebrtc.min.js到本地
- 将下载好的
jswebrtc.min.js
引入到项目(在index.html中引入)
库配置项及api
配置项
video
– 用于播放视频的 HTML Video 元素.autoplay
– 是否自动播放. 默认 false.onPlay(player)
– 播放后回调onPause(player)
– 暂停后回调
api
.play()
– 开始.pause()
– 暂停.stop()
– 停止.destroy()
– 停止播放并清理相关的播放资源..paused
– 只读, 是否暂停播放
封装调用代码
<template>
<video id="jswebrtc"
ref="jswebrtc"
controls
style="width: 100%;height: 100%;object-fit: fill">
</video>
</template>
<script>
export default {
name: "WebRtcPlayer",
props: {
videoSrc: {
type: String,
default: ''
}
},
data() {
return {
player: null
}
},
mounted() {
this.$watch('videoSrc', () => {
if (this.videoSrc) {
this.initVideo(this.videoSrc)
console.log('播放视频路径:', this.videoSrc)
}
}, {immediate: true})
},
methods: {
/**
* 初始化播放器并播放
* 两种调用方式
* 一种通过 watch监听 props 传过来的 src 进行播放
* 一种通过 引用组件上的 ref 直接调用 initVideo 如 this.$refs.webrtc.initVideo('src')
* */
initVideo(url) {
// 播放器存在 清空重置
if (this.player) {
this.player.destroy()
this.player = null
}
// 获取承载元素dom
let videoDom = document.getElementById('jswebrtc')
// 初始化播放器
this.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 (e) {
videoDom.play()
})
console.log(obj, '播放器开始播放!')
}
})
}
},
beforeDestroy() {
// 播放器存在清除播放器
if (this.player) {
this.player.destroy()
}
}
}
</script>
<style scoped></style>
作者:唐诗
链接:https://juejin.cn/post/6964320158806458405
版权声明:本文内容转自互联网,本文观点仅代表作者本人。本站仅提供信息存储空间服务,所有权归原作者所有。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至1393616908@qq.com 举报,一经查实,本站将立刻删除。