vue使用JSWebrtc播放webrtc视频流

1. 下载JSWebrtc

下载链接：https://github.com/kernelj/jswebrtc

2. 引入JSWebrtc

① 将下载的文件放到public目录下

② 编辑index.html

3. 自定义webrtc组件

<template>
  <!-- webrtc播放器 -->
  <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);
      }
    }, {immediate: true})
  },
  methods: {
    initVideo(url) {
      if (this.player) {
        this.player.destroy();
        this.player = null;
      }

      let videoDom = document.getElementById('jswebrtc');
      this.player = new JSWebrtc.Player(url, {
        video: videoDom,
        autoplay: true,
        onplay: (obj) => {
          videoDom.addEventListener('canplay', function(e) {
            videoDom.play();
          })
        }
      })
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.destroy();
    }
  }
}
</script>

<style>
</style>

4. 引入webrtc组件