vue 视频流播放

采用的技术是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 --><videoautoplaymutedid="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'; 否则504const props = defineProps<{videoSrc: string;
}>();const flvPlayer = ref<any>(''); // 要声明一个播放器的容器  flvPlayeronMounted(() => {//在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 属性
<videocontrolsautoplaymutedid="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添加

优秀文章
优秀文章

我先测试了能不能播放rtmp格式 但是需要flash插件 ，然后我播放hls

<template><videoid="my-video"ref="myPlayer"class="video-js"controlsmutedpreload="auto"width="340"height="164"/><!-- data-setup="{}" --><!-- <source:src="src"type="rtmp/flv"/></video> --><!-- <sourcesrc="./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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/162677.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

携程AI布局：三重创新引领旅游行业智能化升级

携程AI布局：三重创新引领旅游行业智能化升级

2023年10月24日&#xff0c;携程全球合作伙伴峰会在新加坡召开&#xff0c;携程集团联合创始人、董事局主席梁建章做了名为《旅游业是独一无二的最好的行业》的演讲&#xff0c;梁建章在演讲中宣布了携程生成式 AI、内容榜单、ESG 低碳酒店标准三重创新的战略方向。这些创新将为…
阅读更多...
掌握互联网的未来：5G时代的新机遇

掌握互联网的未来：5G时代的新机遇

随着5G技术的快速发展&#xff0c;我们正步入一个全新的互联网时代。5G不仅仅是速度的飞跃&#xff0c;它还代表着无限的可能性和前所未有的创新机遇。本文将探讨5G如何重新定义互联网&#xff0c;并为您提供洞察如何抓住这波科技浪潮。 5G技术的核心优势 超高速度&#xff1a…
阅读更多...
工业自动化工厂PLC远程控制网关物联网应用

工业自动化工厂PLC远程控制网关物联网应用

远程控制网关在工厂自动化领域中起到了至关重要的作用&#xff0c;特别是在工厂PLC数据通讯方面。它充当着数据传输的桥梁&#xff0c;连接了工厂中的各类设备和系统&#xff0c;实现了远程监控和控制的功能。本文将详细介绍远程控制网关在工厂PLC数据通讯中的应用。 远程控制网…
阅读更多...
基于PHP + MySQL实现的文章内容管理系统源码+数据库，采用前后端分离的模板和标签化方式

基于PHP + MySQL实现的文章内容管理系统源码+数据库，采用前后端分离的模板和标签化方式

文章内容管理系统 dc-article是一个通用的文章内容管理系统&#xff0c;基于开源的caozha-admin开发&#xff0c;采用前后端分离的模板和标签化方式&#xff0c;支持文章内容管理、栏目分类管理、评论管理、友情链接管理、碎片管理、远程图片获取器等功能。可以使用本系统很轻…
阅读更多...
Vue ElementUI el-tooltip 全局样式修改

Vue ElementUI el-tooltip 全局样式修改

el-tooltip 要点 此处是全局配置&#xff1b;如果想设置指定的 tooltip 可设置属性 popper-class&#xff0c;为 tooltip 的 popper 添加类名&#xff1b;代码 6 - 8 行&#xff0c;隐藏小三角&#xff1b; .el-tooltip__popper {border-radius: 4px !important;color: #9E9…
阅读更多...
建设项目管理中的 5 大预算挑战

建设项目管理中的 5 大预算挑战

为建设项目管理制定可靠、准确的预算是一项艰巨的任务&#xff0c;对于中小型建筑企业来说尤其如此。预算必须精确&#xff0c;同时还要考虑到每项工作的独特性和复杂性。 一项建筑行业相关调查统计了参与施工预算流程的人员所面临的最大挑战&#xff0c;分别是时间、预算、不…
阅读更多...
python图像处理 —— 实现图像滤镜效果

python图像处理 —— 实现图像滤镜效果

python图像处理 —— 实现图像滤镜效果 前言一、浮雕二、素描三、怀旧四、水彩画五、水波六、卡通七、流年八、美颜完整代码 前言 随着数字图像处理技术的不断发展&#xff0c;越来越多的人开始关注图像滤镜的应用。其中&#xff0c;使用Python的Opencv库实现图像滤镜效果成为…
阅读更多...
设置IDEA快捷生成方法头，类头注释

设置IDEA快捷生成方法头，类头注释

1.File->settings->editor->live templates进入Live Template界面进行设置&#xff1a; 下一步&#xff1a; 下一步&#xff1a; /*** Title: $title$* author: sunyanzeng* date: $datatime$*/在需要添加文件头的地方打出“aa”&#xff0c;回车&#xff0c;会自…
阅读更多...
输入系统应用编程

输入系统应用编程

1. 什么是输入系统 ⚫先来了解什么是输入设备&#xff1f; 常见的输入设备有键盘、鼠标、遥控杆、书写板、触摸屏等等, 用户通过这些输入设备与 Linux 系统进行数据交换。 ⚫ 什么是输入系统&#xff1f; 输入设备种类繁多&#xff0c;能否统一它们的接口&#xff1f;既在…
阅读更多...
基于跳蛛算法的无人机航迹规划-附代码

基于跳蛛算法的无人机航迹规划-附代码

基于跳蛛算法的无人机航迹规划 文章目录 基于跳蛛算法的无人机航迹规划1.跳蛛搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用跳蛛算法来优化无人机航迹规划。 1.跳蛛搜索算法 …
阅读更多...
Prometheus+Node_exporter+Grafana实现监控主机

Prometheus+Node_exporter+Grafana实现监控主机

PrometheusNode_exporterGrafana实现监控主机 如果没有安装相关的配置&#xff0c;首先要进行安装配置&#xff0c;环境是基于Linux&#xff0c;虚拟机的相关环境配置在文末给出&#xff0c;现在先讲解PrometheusNode_exporterGrafana的安装和使用。 一.Prometheus安装 虽然…
阅读更多...
基于SSM的鲜花商城系统

基于SSM的鲜花商城系统

基于SSM的鲜花商城系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 主页 鲜花列表 热销商品 商品详情 登录界面 购物车 管理员界面 摘要 基于SSM的鲜花商…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023