首页 前端知识 vue 视频流播放

vue 视频流播放

2024-04-29 11:04:31 前端知识 前端哥 358 921 我要收藏

采用的技术是vue+flv.js

前言

常见视频流格式
● RTMP(推流端、拉流端)
● RTSP(推流端)
● HLS(拉流端)
● FLV(拉流端)

视频流是否依赖插件直播/点播协议web/移动端
flv直播点播HTTP-FLVweb
RTSP浏览器不能直接播放【只能通过转码或者插件】直播点播RTSP协议web
hls【以m3u8后缀结尾】否【浏览器用video.js可以播放,但5秒左右的延迟】点播基于httpios系统
RTMP浏览器中用flash播放器 但谷歌在2020年底带头不支持flash插件 或者 video.js直播RTMPweb/移动端

在这里插入图片描述

RTSP

需要安装插件或者转码
vue播放rtsp视频流

方案二:RTSP转RTMP到RTMP服务器,转http-flv,播放端用flv.js播放
方案三:RTSP转RTMP到RTMP服务器,转hls,播放端用video.js播放
方案四:VLC或者SmartPlayer第三方插件播放
方案五:RTSP转WebRTC播放

HLS

Http Live Streaming (简称HLS) ,是苹果公司(Apple Inc.)实现的基于HTTP的流媒体传输协议,它在移动 Web 浏览器支持挺好,所以现在好多移动端直播都在用此协议。但在 PC Chrome,Firefox 上不支持,所以还需要借助flash 或者 video.js 这个插件,但是它不直接支持播放 HLS 协议的播放. 需要借助 videojs-contrib-hls ,找见了这个库FZ-live 我看他也是基于 video.js 的。
还有个要求,就是资源 不能跨域,需要在同一域下。
而且因为HLS流是分片下载播放,需要浏览器先下载然后播放,所以延迟很高,在十秒多甚至更多。并且对浏览器和网速的要求还是比较高的,视频流畅度取决于网速。

可实现流媒体的直播和点播 ,主要应用在iOS系统,为iOS设备(如iPhone、iPad)提供音视频直播和点播方案。

video.js
npm install video.js
npm i videojs-contrib-hls --save
vue3-video-player
EasyPlayer.js

使用开源的EasyPlayer.js播放,这个控件支持多种流的播放,网上选择的也比较多。GITHUB

RTMP

需要安装插件; video.js 插件能提供 RTMP 的播放 但是需要flash支持
VLC media player用于检测rtmp是否可以正常播放;https://www.videolan.org/vlc/
rtmp视频流实际上就是以rtmp流媒体协议生成的流媒体;

视频流:视频流其实就是流媒体(streaming media),是指将一连串数据压缩后,经过网络分段发送,即时传输以供观看音视频的一种技术。监控、直播等实时播放的功能一般都使用的是流媒体。
流媒体协议:流媒体协议是一种标准化的传递方法,用于将视频分解为多个块,将其发送给视频播放器,播放器重新组合播放,常见的有rtmp、hls、hds、mss、MPEG-DASH等。
视频格式(format):视频格式指视频文件格式(container fORMat)。常见 container format 包括 .mp4、.m4v、.avi、.mov等。

FLV【已自测】

HTTP FLV则是将RTMP封装在HTTP协议之上的,可以更好的穿透防火墙等。rtmp和http-flv的视频格式都是flv格式的,只是传输协议而不同。rtmp是tcp的传输协议,而http-flv是http长链接的传输协议。

官方文档:
中文文档
官方文档

flvjs

flvjs是一个H5播放器。HTTP FLV是一种协议。FLV是一种格式。flvjs可以用于播放FLV格式的视频。 flvjs是一个较成熟的前端处理flv格式的插件库,是B站视频的开源插件,纯原生 JavaScript 开发,没有用到 Flash。

概览:
一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF(MP4 碎片)片段,然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。

flv.js 是使用 ECMAScript 6 编写的,然后通过 Babel Compiler 编译成 ECMAScript 5,使用 Browserify 打包。

推流端视频编码必须是H.264

1. 安装
npm install --save flv.js
2. 引入

搭建组件

<template>
  <!-- 增加静音属性:muted -->
  <video
    autoplay
    muted
    id="myVideo"
  ></video>
</template>

<script setup lang="ts">
/* eslint-disable */
import { ref, onMounted, onUnmounted } from 'vue';
import flvjs from 'flv.js/dist/flv.min.js'; // 代替  import flvjs from 'flv.js'; 否则504

const props = defineProps<{
  videoSrc: string;
}>();

const flvPlayer = ref<any>(''); // 要声明一个播放器的容器  flvPlayer

onMounted(() => {
  //在mounted声明周期里调用 如果出现DOM没加载出来的原因 可以使用定时器
  videoPlayer();
});

const videoPlayer = () => {
  // flvjs.isSupported() 判断当前浏览器是否支持flv。
  if (flvjs.isSupported()) {
    var videoElement = document.getElementById('myVideo');
    flvPlayer.value = flvjs.createPlayer(
      // 创建直播流,加载到DOM中去
      {
        type: 'auto', // 媒体类型 flv 或 mp4,默认 flv
        // isLive: true, // 是否是直播流
        // hasAudio: true, // 是否有音频
        // hasVideo: true,
        // enableStashBuffer: true,
        url: props.videoSrc
      }
      // {
      //   cors: true, // 是否跨域
      //   enableWorker: false, // 是否多线程工作
      //   enableStashBuffer: false, // 是否启用缓存 关闭IO隐藏缓冲区
      //   stashInitialSize: 128, // 缓存大小(kb)  默认384kb
      //   autoCleanupSourceBuffer: true, // 是否自动清理缓存
      //   lazyLoad: false
      // }
    );
    flvPlayer.value.attachMediaElement(videoElement); // 挂载video标签。
    flvPlayer.value.load(); //加载流
    // flvPlayer.value.play(); //播放流

    // !!!!!!这里需要注意,有的时候load加载完成不一定可以播放,要是播放不成功,用settimeout 给下面的this.player.play() 延时几百毫秒再播放
    setTimeout(() => {
      flvPlayer.value.play(); //播放流
    }, 1000);
  }
};

// 在销毁的声明周期中  必须要销毁掉播放器的容器!!!!不然会占用TCP个数,导致其他页面的监控也播放不了
onUnmounted(() => {
  if (flvPlayer.value) {
    flvPlayer.value.pause();
    flvPlayer.value.unload();
    flvPlayer.value.detachMediaElement();
    flvPlayer.value.destroy();
    flvPlayer.value = null;
  }
});

defineExpose({
  videoPlayer
});
</script>

<style lang="scss" scoped>
video {
  height: 100%;
  width: 100%;
}
</style>


⚠️: 流地址 也可以不是flv结尾的

webrtc播放

webrtc可实现的功能特别强大,网上可参考的资料很少,目前尝试的是webrtc-streamer插件,实现了rtsp直接播放

有时候视频加载不出来,不是前端代码的问题,而是视频流提供的有问题,可以参看我这篇文章测试一下自己得到的flv是否正常
https://blog.csdn.net/changyana/article/details/126304833

我代码中的url是一个目前可用的在线测试的flv,只要视频流正常就可以在前端加载出来了!

测试-视频流2022/10/08
RTMP:
美国1: rtmp://ns8.indexforce.com/home/mystream
美国2: rtmp://media3.scctv.net/live/scctv_800
韩国GoodTV: rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp

FLV:
超清 https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv
高清 https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-480p.flv
标清 https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv

HLS(m3u8)
https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8

使用flv时候开发遇到的问题

  1. 报错 504
    解决方式:引入方式改变
import flvjs from 'flv.js/dist/flv.min.js'; // 代替  import flvjs from 'flv.js'; 否则504
  1. 视频不自动播放
    解决方式:增加autoplay 属性
<video
    controls
    autoplay
    muted
    id="myVideo"
  ></video>
  1. 联调时候:报错DemuxException: type = CodecUnsupported, info = Flv: Unsupported codec in video frame: 2
    解决方式: 推流加上参数:-vcodec h264,表示强制使用h264进行编解码。-------------未解决

  2. 报错502
    强制刷新 即可

  3. DOMException: play() failed because the user didn’t interact with the document first
    原因:因为用户没有先操作文档【用户没有先去跟网页做交互再执行音频播放】
    Chrome的autoplay政策在2018年4月做了更改。
    新的行为:浏览器为了提高用户体验,减少数据消耗,现在都在遵循autoplay政策,Chrome的autoplay 政策非常简单
    muted autoplay始终被允许

    解决方案:

    • 建议您再播放资源前,进行页面交互动作,比如点击后再播放
    • 或者您可以在构建 DOM 元素时先设置 muted=“muted” 属性,调用 play 后再修改静音属性试下是否可以正常
    • 如果使用的是 5.X 版本,在获取的 track 的时候做一个判断,如果是音频就不做 track.play(),用户点击的时候进行 play()

使用videojs开发播放hls视频

测试地址【http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8;】

  1. Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document
    设置muted 静音 和上面的问题5的原因一样

  2. 黑屏 中间有播放按钮。但是不播放 也不报错

  3. VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.
    设置data-setup=“{}”

  4. video.es.js:222 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.
    出现的原因是你提供的视频连接可能没有扩展名导致,这样videojs无法知道视频的格式。
    需要在type属性指定播放视频的格式即可。

  5. video.es.js:222 VIDEOJS: ERROR: (CODE:2 MEDIA_ERR_NETWORK) HLS playlist request error at URL

  6. VIDEOJS: ERROR: (CODE:3 MEDIA_ERR_DECODE) The media playback was aborted due to a corruption problem or because the media used features your browser did not support.

  7. 跨域
    需要后端解决
    在响应中添加CORS标头添加add_header Access-Control-Allow-Origin *; 不是在播放端nginx,是在提供视频服务的Nginx添加

error属性:
返回错误状态
1=MEDIA_ERR_ABORTER 取回过程中被用户终止
2=MEDIA_ERR_NETWORK 下载时发生错误
3=MEDIA_ERR_DECODE 解码时发生错误
4=MEDIA_ERR_SRC_NOT_SUPPORTED 媒体不可用或不支持

优秀文章
优秀文章

我先测试了能不能播放rtmp格式 但是需要flash插件 ,下面的代码是播放hls的demo

<template>
  <video
    id="my-video"
    ref="myPlayer"
    class="video-js"
    controls
    muted
    preload="auto"
    width="340"
    height="164"
  />
  <!-- data-setup="{}" -->
  <!-- <source
      :src="src"
      type="rtmp/flv"
    />
  </video> -->
  <!-- <source
      src="./MY_VIDEO.mp4"
      type="video/mp4"
    />
  </video> -->
</template>

<script setup lang="ts">
/* eslint-disable */
import videoJs from 'video.js';
import { ref, nextTick, onMounted, onUnmounted } from 'vue';
import 'videojs-flash';
// const src = 'src/components/video/MY_VIDEO.mp4';
const src = 'http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8';
const myPlayer = ref();

onMounted(() => {
  // nextTick(() => {
  setTimeout(() => {
    init();
  });
  // });
});

const init = () => {
  // videoJs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
  myPlayer.value = videoJs('my-video', {
    autoplay: 'muted', //自动播放
    controls: true, //用户可以与之交互的控件
    loop: true, //视频一结束就重新开始
    muted: false, //默认情况下将使所有音频静音
    cors: true,
    // aspectRatio: '16:9', //显示比率
    // fullscreen: {
    //   options: { navigationUI: 'hide' }
    // },
    // techOrder: ['html5', 'flvjs'], // 兼容顺序
    // html5: {
    hls: {
      withCredentials: true
    },
    // },
    sources: [
      {
        src,
        type: 'application/x-mpegURL'
        // type: 'video/mp4'
        // type: 'rtmp/flv'
      }
    ]
  });
  // setTimeout(() => {
  // myPlayer.value.src([
  //   {
  //     src,
  //     type: 'video/mp4'
  //   }
  // ]);
  setTimeout(() => {
    // myPlayer.value.load();
    myPlayer.value.play(); //播放流
  }, 100);
  // }, 1000);
};

onUnmounted(() => {
  if (myPlayer.value) {
    myPlayer.value.dispose();
  }
});
</script>

<style lang="scss" scoped></style>

使用hlsjs开发播放hls视频

安装

npm i hls.js -S

代码

<template>
  <!-- 增加静音属性:muted autoplay controls-->
  <video
    ref="videoElementRef"
    id="videoElement"
    controls
    muted
    style="width: 100%; height: 100%; object-fit: fill"
  ></video>
</template>

<script setup lang="ts">
/* eslint-disable */
import { ref, nextTick, onUnmounted, onMounted } from 'vue';
import hlsjs from 'hls.js';

// const props = defineProps<{
//   videoSrc: 'http://192.168.5.2:9080/hls_save/stream1.m3u8';
// }>();
const src = 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8';
const videoElementRef = ref<any>();
const hlsjsInstance = ref<any>();

const videoPlayer = () => {
  // const hlsjsInstance = ref();
  // const video: any = document.getElementById('videoElement');
  console.log(videoElementRef.value);

  if (hlsjs.isSupported()) {
    if (hlsjsInstance.value) {
      hlsjsInstance.value.destroy();
      hlsjsInstance.value = null;
    }
    hlsjsInstance.value = new hlsjs({
      // liveRetryDvrMaxHead: 300,
      // liveMaxLatencyDuration: Infinity,
      // manifestLoadingMaxRetry: 10,
      // manifestLoadingTimeOut: 10 * 1000
    });
    hlsjsInstance.value.loadSource(src); // 加载音视频源。
    hlsjsInstance.value.attachMedia(videoElementRef.value); // 将HLS.js与一个HTML5 video元素相关联。
    hlsjsInstance.value.on(hlsjs.Events.MANIFEST_PARSED, () => {
      // 监听HLS.js事件。
      setTimeout(() => {
        videoElementRef.value.play();
      }, 1000);
      console.log('加载成功');
    });
    hlsjsInstance.value.on(hlsjs.Events.ERROR, (event, data) => {
      console.log('加载失败');
      // 重试
      // videoPlayer();
      hlsjsInstance.value.recoverMediaError(); // 尝试恢复
    });
  } else {
    // 处理不支持的情况
    console.log('处理不支持的情况');
  }
};

// 在销毁的声明周期中  必须要销毁掉播放器的容器!!!!不然会占用TCP个数,导致其他页面的监控也播放不了
onUnmounted(() => {
  if (hlsjsInstance.value) {
    videoElementRef.value.pause();
    //HLS.js销毁
    hlsjsInstance.value.detachMedia();
    hlsjsInstance.value.destroy();
    hlsjsInstance.value = null;
    // this.$emit("closeVideo");
  }
});

onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      videoPlayer();
    });
  });
});
</script>

<style lang="scss" scoped>
video {
  height: 100%;
  width: 100%;
}
</style>

常用的事件

  1. His.isSupported):检查当前浏览器是否支持 HLS。
  2. .His.loadSource(url):加载 HLS流。url 是流的 URL。
  3. His.attachMedia(videoElement):将视频元素与 HLS 实例相关联。
  4. Hs.on(event, callback):监听特定的 HLS 事件井调用相应的回调函数。
  5. Hls.startLoad():开始加载 HLS流。
  6. His.stopLoad:停止加载 HLS流。
  7. His.destroy():销毀 HLS 实例井释放资源。
  8. Hs.recoverMediaError():尝试恢复 HLS 流中的错误。
  9. Hls.swapAudioCodec():交换音频编解码器,以支持 Apple 设备上的HILS流。
  10. Hs.detachMedia0) :从视频元素中解除 HLS 实例的关联。

https://zhuanlan.zhihu.com/p/573964295?utm_id=0

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6173.html
标签
评论
发布的文章

@JsonCreator和@JsonValue

2024-05-05 22:05:05

Python 字符串转换为 JSON

2024-05-05 22:05:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!