华为实时视频使用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;
   }
}

可播放

相关推荐
傻小胖17 分钟前
ES6 Proxy 用法总结以及 Object.defineProperty用法区别
前端·javascript·es6
Web极客码21 分钟前
如何跟踪你WordPress网站的SEO变化
前端·搜索引擎·wordpress
横冲直撞de39 分钟前
高版本electron使用iohook失败(使用uiohook-napi替代)
前端·javascript·electron
_Eden_40 分钟前
认识Electron 开启新的探索世界一
前端·javascript·electron
~怎么回事啊~41 分钟前
electron中调用C++
前端·javascript·electron
海上彼尚44 分钟前
electron-vite 构建后路由失效问题
前端·javascript·electron
OpenIM1 小时前
零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
前端·electron·开源
缘来是黎1 小时前
Python 进阶:生成器与上下文管理器
java·前端·python
HsuYang1 小时前
Vite源码学习(十一)——热更新(中)
前端·javascript·架构
不怕麻烦的鹿丸1 小时前
web前端录制canvas视频和video的声音,并合并成一个文件进行下载
前端·javascript·音视频·canvas