WebRTC Vue 流媒体播放

本文分享来自一篇掘金社区的文章,介绍vue项目引入webrtc库实现流媒体播放,仅供参考学习。

jswebrtc库介绍

  • github 地址
  • JSWebrtc 对浏览器的 Webrtc 做了简单的封装,支持 SRS 的 RTC 流的播放.
  • WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。

开始使用(vue项目)

  • 下载jswebrtc.min.js到本地 image.png
  • 将下载好的jswebrtc.min.js引入到项目(在index.html中引入) image.png

库配置项及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 举报,一经查实,本站将立刻删除。

(1)

相关推荐

发表回复

登录后才能评论