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

相关推荐
Watermelo61720 分钟前
Vue3调度器错误解析,完美解决Unhandled error during execution of scheduler flush.
前端·javascript·vue.js·elementui·html·es6·bug
低代码布道师23 分钟前
第一部分:网页的骨架 —— HTML
前端·html
PyAIGCMaster25 分钟前
穷鬼计划:react+tailwindcss+vercel
前端·react.js·前端框架
好_快30 分钟前
Lodash源码阅读-difference
前端·javascript·源码阅读
好_快30 分钟前
Lodash源码阅读-differenceWith
前端·javascript·源码阅读
好_快33 分钟前
Lodash源码阅读-differenceBy
前端·javascript·源码阅读
凌晨一点的程序员2 小时前
antd中的表格穿梭框(Transfer)如何使用
前端·javascript·html·react·antd·transfer
^小桃冰茶2 小时前
HTML 从标签到动态效果的基础
前端·html
火柴盒zhang2 小时前
基于HTML CANVAS和EXCEL的xlsx文件展示工具websheet
前端·javascript·html·spreadsheet·websheet
一城烟雨_7 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf