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

可播放

相关推荐
gnip15 分钟前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员32 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘37 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出39 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的39 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解42 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man1 小时前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下1 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构