前端播放直播视频流(flv+m3u8)

最近公司接的项目中需要播放摄像头画面,这里主要有两种摄像头

  • 萤石摄像头:提供的视频流地址是flv格式
  • 乐橙摄像头:提供的视频流是么m3u8格式

前端无法直接使用video标签进行视频流的播放,因此我们需要借助一些库,由于不同的视频流格式需要的库也不同,所以我们开始前先确定视频流的格式

javascript 复制代码
https://**********/*****/**/**.m3u8?proto=https
https://****/***/**/****.flv?**=**&**=**&*=***&*=**

//上面分别是两种视频流格式,我们可以看到地址中是带有视频流格式的

下面是html结构

html 复制代码
<video
    :id="d.id"
    class="video-js vjs-default-skin vjs-big-play-centered"
    autoplay
    controls
    preload="auto"
    width="100%"
    height="100%"
    data-setup="{}">
  <source id="source" :src="d.value" type="application/x-mpegURL"/>
</video>

1 flv格式 对于flv格式我这里使用的是flv.js这个库来实现的

js 复制代码
if (flvjs.isSupported()) {
    //检查当前浏览器是否支持 flv.js
  var videoElement = document.getElementById(this.d.id);
  
  //创建一个 flv.js 播放器实例
  this.d.flvPlayer = flvjs.createPlayer({
    type: "flv",//指定视频类型
    isLive: true,//标记视频流是否为直播流
    hasAudio: false,//标记视频流是否包含音频轨道
    url: this.d.value, //视频流的 URL 地址
  });
  //使用 `attachMediaElement()` 方法将视频元素与 flv.js 播放器关联起来
  this.d.flvPlayer.attachMediaElement(videoElement);
  
  //加载视频流
  this.d.flvPlayer.load();
  
  //开始播放视频
  this.d.flvPlayer.play();
}

------------------------------------------------------------------------------------------------------

//销毁
  this.d.flvPlayer.destroy()

2.m3u8格式 对于m3u8格式我这里使用的是videojs实现

js 复制代码
this.d.flvPlayer = videojs(this.d.id, {
  bigPlayButton: true,//是否显示大播放按钮
  textTrackDisplay: false,//是否显示字幕轨道
  posterImage: false,//是否显示海报图片
  errorDisplay: false,//是否显示错误信息
  autoplay: true,//是否自动播放视频
})

//这里注意将视频流地址设置给this.d.value

------------------------------------------------------------------------------------------------------

//卸载
  this.d.flvPlayer.dispose()

我这里还对接了海康的摄像头,给的视频流格式是flv的,其实这个格式可以沟通的,如果是上面两种摄像头,基本上固定了格式,但是海康的可以与其他开发人员沟通给你需要的格式。

相关推荐
Asort3 分钟前
JavaScript 从零开始(三):浏览器控制台与VS Code协同工作环境搭建详解
前端·javascript
跟橙姐学代码4 分钟前
自动化邮件发送的终极秘籍:Python库smtplib与email的完整玩法
前端·python·ipython
我是ed28 分钟前
# vue3 实现甘特图
前端
m0_616188491 小时前
el-table的隔行变色不影响row-class-name的背景色
前端·javascript·vue.js
zheshiyangyang1 小时前
Vue3组件数据双向绑定
前端·javascript·vue.js
xw51 小时前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝
大翻哥哥1 小时前
Python上下文管理器进阶指南:不仅仅是with语句
前端·javascript·python
IT_陈寒2 小时前
React 性能优化必杀技:这5个Hook组合让你的应用提速50%!
前端·人工智能·后端
再吃一根胡萝卜2 小时前
Git 强制推送指南:新手必读的「危险操作」解析
前端
诚实可靠王大锤2 小时前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为