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:"