基於vue的實時視頻流開發

背景：多個實時視頻的介入

技術：hls.js的流媒體，支持格式已m3u8為主

解決了什么：多個實時視頻長時間播放會有卡頓的情況

具體代碼實現：

import Hls from 'hls.js'

　　playVideo(id) {

 let hls = new Hls(); const _this = this let video = $("#camera-video")[0] if(Hls.isSupported()) {//查看瀏覽器是否支持 hls.loadSource(this.videoSrc);//輸入視頻源 hls.attachMedia(video);//添加到視頻標簽里 hls.on(Hls.Events.MANIFEST_PARSED,function() { video.play(); });
　　　　　　this.hlsObj=hls;　 }else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = this.videoSrc; video.addEventListener('loadedmetadata',function() { video.play(); }); } },

銷毀視頻 destoryVideo() { this.$refs.cameraVideo.pause(); this.hlsObj.destroy(); this.hlsObj = null; }