华为实时视频使用FLV播放RTSP流

import flvjs from 'flv.js';

安装flv

复制代码
<video style="width:100%;height:100%;" ref="videoHWRef" ></video>

  // src 华为rtsp流    rtsp://admin:Huaweivideo@10.10.8.151:554/xxx/trackID=1
  // url 需要后端提供视频源地址
  playVideo() {
	if (flvjs.isSupported() && src) {
	   let video = this.$refs['videoHWRef']
	   if (video) {
	     this.flvPlayer = flvjs.createPlayer(
	       {
	           type: "flv",
	           isLive: true,
	           hasAudio: false,
	           url: `${baseUrl}/iot/live/${window.btoa(src)}/live.flv`
	       },
	       {
	           autoCleanupSourceBuffer: true,
	           enableWorker: false, //不启用分离线程
	           enableStashBuffer: true, //关闭IO隐藏缓冲区
	           isLive: true,
	           lazyLoad: false,
	       }
	     );
	     this.flvPlayer.attachMediaElement(video);
	     try {
	       this.flvPlayer.load();
	       this.flvPlayer.play();  // 他还有很多的函数可以看一下flv.js的官方文档
	       // this.listenVideo(index);
	     } catch (error) {
	         console.log(error);
	     };
	   }
	 }
	}
  }

beforeDestroy() {
  if (this.flvPlayer) {
     this.flvPlayer.pause();
     this.flvPlayer.unload();
     this.flvPlayer.detachMediaElement();
     this.flvPlayer.destroy();
     this.flvPlayer = null;
   }
}

可播放

相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github