前端播放直播视频流(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的,其实这个格式可以沟通的,如果是上面两种摄像头,基本上固定了格式,但是海康的可以与其他开发人员沟通给你需要的格式。

相关推荐
Mintopia41 分钟前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
前端太佬1 小时前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Mintopia1 小时前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
xRainco1 小时前
Redux从简单到进阶(Redux、React-redux、Redux-toolkit)
前端
印第安老斑鸠啊1 小时前
由一次CI流水线失败引发的对各类构建工具的思考
前端
CodePencil1 小时前
CSS专题之外边距重叠
前端·css
hepherd1 小时前
Flask学习笔记 - 表单
前端·flask
求知呀1 小时前
最直观的 Cursor 使用教程
前端·人工智能·llm
仙灵灵1 小时前
前端的同学看过来,今天讲讲jwt登录
前端·后端·程序员
陈随易1 小时前
VSCode v1.99发布,王者归来,Agent和MCP正式推出
前端·后端·程序员