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