基于vue的实时视频流开发

  • Z时代
  • 2024-01-10
  • 分类：综合

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;
    }

以上是 基于vue的实时视频流开发 的全部内容， 来源链接： utcz.com/z/375377.html

回到顶部