vue使用JSWebrtc播放webrtc视频流

1、下载JSWebrtc.min.js文件

地址：https://github.com/kernelj/jswebrtc/tree/master/dist

 

或者再此路径下载 https://files.cnblogs.com/files/blogs/702532/jswebrtc.min.js?t=1710839018&download=true

2、使用jswebrtc

2.1文件放到public/static目录下,位置不能放错

 

2.2在index.html中引用

<script src="static/jswebrtc.min.js" type="text/javascript"></script>

 

 

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.initVideo();
    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');
      // let url = 'webrtc://192.168.50.188/01/0001/aivision/stream'
      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组件

import webrtcPlarer from "…/./../components/webrtcPlayer/webrtcPlarer.vue";
 export default {
  name:'test',
  components: {webrtcPlarer},
  data(){}
} 

<webrtcPlarer  :videosrc="vediosrcTemp" width="100%" > <webrtcPlarer>

this.vediosrcTemp="webrtc:"