网页全终端h5浏览器视频流解决方案RTSP/FLV/HLS

背景

项目上需要基于视频巡检，在线勘查填写定制表单，降低巡检成本。

本文着重讲前端部分视频流展示解决方案。

调研

流媒体（streaming media）是指将一连串的媒体数据压缩后，经过网上分段发送数据，在网上即时传输影音以供观赏的一种技术与过程，此技术使得数据包得以像流水一样发送；如果不使用此技术，就必须在使用前下载整个媒体文件。流式传输可传送现场影音或预存于服务器上的影片，当观看者在收看这些影音文件时，影音数据在送达观看者的计算机后立即由特定播放软件播放。用户边下载边观看，而不必等待整个文件下载完毕;通过网络播放流媒体文件时，文件本身不会在本地磁盘中存储，这样就节省了大量的磁盘空间开销。流媒体实际指的是一种新的媒体传送方式，有声音流、视频流、文本流、图像流、动画流等。流媒体服务器广泛应用于视频点播、视频会议、远程教育（直播游戏或者在线课堂时候电脑窗口画面转播给其他人）、远程医疗、在线直播系统中、校园安防接入的摄像头视频流、

流媒体传输协议

1. RTSP (Real-Time Streaming Protocol):
   • 特点：RTSP 由Real Networks 和 Netscape共同提出的，基于文本的多媒体播放控制协议。RTSP定义流格式，流数据经由RTP传输；RTSP实时效果非常好，适合视频聊天，视频监控等方向。一般摄像头都是RTSP格式的。h5原生不支持这种格式。
   • 优势：可以控制到视频帧，因此可以承载实时性很高的应用。这个优点是相对于HTTP方式的最大优点。复杂度主要集中在服务器端，可以进行倍速播放功能，其他视频协议都无法支持。 网络延时低，一般在0.5S以内；
   • 缺点：就是服务器端的复杂度也比较高，实现起来也比较复杂。ios端不支持该协议，对移动端支持较弱；除了 Firefox 浏览器可以直接播放 RTSP 流之外,几乎没有其他浏览器可以直接播放 RTSP 流。RTSP协议，此协议和RTMP效果差不多，在技术上只是区别于传输数据上占用多少通道、传输格式流不太一样而已，RTSP其实也可以用于直播。但依然是因为市场环境，RTSP目前主要应用在安防监控上，和RTMP一样，早已形成了自己的盈利链。
2. HTTP:
   • 特点：HTTP: 当使用http协议的时候视频格式需要是m3u8或HTTP-FLV协议视频流。HLS 协议由三部分组成：HTTP、M3U8、TS。这三部分中，HTTP 是传输协议，M3U8 是索引文件，TS 是音视频的媒体信息m3u8是有延迟的。并不能实时，实时传输方面不如rtmp协议。因为m3u8的直播原理是将直播源不停的压缩成指定时长的ts文件（比如9秒，10秒一个ts文件）并同时实时更新m3u8文件里的列表以达到直播的效果。这样就会有一个至少9,10秒的时间延迟。如果压缩的过小，可能导致客户端网络原因致视频变卡。HTTP-FLV 即将流媒体数据封装成 FLV 格式，然后通过 HTTP 协议传输给客户端 HTTP协议中有个约定：content-length字段，http的body部分的长度服务器回复http请求的时候如果有这个字段，客户端就接收这个长度的数据然后就认为数据传输完成了，如果服务器回复http请求中没有这个字段，客户端就一直接收数据，直到服务器跟客户端的socket连接断开。http-flv直播就是利用第二个原理，服务器回复客户端请求的时候不加content-length字段，在回复了http内容之后，紧接着发送flv数据，客户端就一直接收数据了
     
     

其他的有兴趣可以自行深入了解，除了HTTP、WebSocket类的传输协议，其他是无法通用地传输到浏览器的，所以，如果要做一款通用的H5视频播放器，基本上就是一款HTTP/WebSocket协议的视频播放器，如果是类似于RTMP、RTSP类型协议的视频源，是不可避免，需要经过服务器转换的。

调研社区常用轮子

下面是调研安装的依赖，下面有详细说明，最终使用的是hls.js

解决方案

在 HTML5 中播放视频流有几种解决方案，以下是一些常见的方法：

1. HTML5 Video 标签：HTML5 提供了 <video> 标签，可以在网页上直接嵌入视频内容。你可以通过设置 src 属性来指定视频的 URL，然后浏览器会自动处理播放。这对于常规的视频文件（如 MP4、WebM、Ogg 等格式）非常有效。

2. HLS（HTTP Live Streaming）：HLS 是苹果推出的一种流媒体传输协议，适用于在网页上播放实时的音视频流。HLS 将视频内容切分为小块，并生成一个包含媒体资源的 M3U8 播放列表文件。HTML5 Video 标签支持 HLS，但在不同的浏览器上可能需要不同的处理方式。通常，你可以使用 video.js、hls.js 等 JavaScript 库来更好地支持 HLS。

3. MPEG-DASH（Dynamic Adaptive Streaming over HTTP）：与 HLS 类似，MPEG-DASH 也是一种流媒体传输协议，适用于在网页上播放实时的音视频流。MPEG-DASH 使用 .mpd 格式的播放列表文件，通过适应网络带宽动态调整视频质量。同样地，需要使用 JavaScript 库（如 dash.js）来更好地支持 MPEG-DASH。

4. WebRTC（Web Real-Time Communication）：如果你需要实时通信，如视频会议或实时视频流传输，WebRTC 是一个强大的选择。它允许浏览器之间直接进行点对点的音视频传输，而不需要传统的中间服务器。

5. RTMP（Real-Time Messaging Protocol）：RTMP 是一种流媒体传输协议，广泛用于实时视频流传输。然而，由于浏览器对 RTMP 的支持有限，通常需要使用 Flash 或其他插件来播放 RTMP 流。

6. 服务器代理：如果服务器不支持跨域访问，你可以在你自己的服务器上设置代理，将视频流从服务器获取然后传递给前端。这样，你可以在代理服务器上处理 CORS 和其他请求头，然后将流转发给前端，避免浏览器的跨域限制。

选择适合你需求的解决方案取决于你的具体情况。你可能需要考虑浏览器兼容性、服务器支持、网络带宽等因素。

RTSP

html5 + websocket_rtsp_proxy 实现视频流直播

web页面上播放RTSP视频流，通常可以采用“jwplayer +ffmpeg+red5”的方案，由于这种方案首先将RTSP协议对应的视频流转码成RTMP协议的视频流，因此延迟通常会很高。为了降低直播的延迟，最好直接能直接在页面上播放RTSP协议的视频流。

在https://github.com/Streamedian/html5_rtsp_player提供了一种“html5_rtsp_player + websock_rtsp_proxy”的技术方案，可以通过html5的video标签直接播放RTSP的视频流。

整个架构如下图所示，分为服务器端和浏览器端两部分。

官方文档：https://streamedian.com/docs/

项目地址：https://github.com/Streamedian/html5_rtsp_player

在线测试：https://streamedian.com/demonstration/ 这个我放入链接是通了的

框架示例：https://streamedian.com/#demo

项目里面的framework/react 我是跑通了。

注意：跑的时候我把socket地址改成他们测试的地址才可以。

后来发现商用要license，于是放弃了。rtsp确实是支持的，我是考虑未来风险，其实免费的也可以用的。

HTTP HLS

在 Vue 2 中使用 hls.js 来播放 HLS（HTTP Live Streaming）流的视频需要一些设置。以下是一般步骤：

1. 安装 hls.js 包：首先，你需要在你的 Vue 2 项目中安装 hls.js。你可以使用 npm 或 yarn 进行安装。在命令行中运行：

   npm install hls.js
   

   或者

   yarn add hls.js
   

2. 在组件中引入和使用：在你的 Vue 组件中，你需要引入 hls.js，创建一个 video 元素，然后将 HLS URL 和 hls.js 实例关联起来。以下是一个简单的示例：

   <template>
     <div>
       <video ref="videoElement" controls></video>
     </div>
   </template>
   
   <script>
   import Hls from 'hls.js';
   
   export default {
     mounted() {
       this.initVideoPlayer();
     },
     methods: {
       initVideoPlayer() {
         const video = this.$refs.videoElement;
   
         if (Hls.isSupported()) {
           const hls = new Hls();
           hls.loadSource('YOUR_HLS_VIDEO_URL.m3u8');
           hls.attachMedia(video);
           hls.on(Hls.Events.MANIFEST_PARSED, () => {
             video.play();
           });
         } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
           video.src = 'YOUR_HLS_VIDEO_URL.m3u8';
           video.addEventListener('loadedmetadata', () => {
             video.play();
           });
         }
       },
     },
   };
   </script>
   

   替换 'YOUR_HLS_VIDEO_URL.m3u8' 为你实际的 HLS 视频 URL。

这个示例中，我们在 mounted 钩子中调用 initVideoPlayer 方法来初始化视频播放器。如果浏览器支持 hls.js，我们使用 Hls 类来加载 HLS 流，并将其附加到 <video> 元素。如果浏览器支持原生的 HLS 播放，我们直接使用 <video> 元素的 src 属性来播放。

请注意，这只是一个基本示例。实际中，你可能需要根据你的项目结构和需求进行适当的调整和扩展。确保在组件加载时初始化播放器，并根据需要处理错误和状态变化。

这个可行，视频很流畅清晰。

下午连好以后，看视频里的大姐吃鸡爪看了一会。

最后也有试过videojs，报错，遂弃之。

总结

h5 常用就用hls，要求更高的用RTSP，有些方案需要后端配合，跨域，ws等，可以根据实际情况选型。

其他相关文章

videojs:https://blog.csdn.net/a0405221/article/details/80923090

推拉流：https://stronger.blog.csdn.net/article/details/128989752

测试视频：https://blog.csdn.net/xia296/article/details/118651949

常见方案：https://zhuanlan.zhihu.com/p/359005370

EasyPlayer：https://github.com/tsingsee/EasyPlayer.js （star挺多，装了报错）

叮嘱

以后发现过时的文章和广告贴，看到时直接关闭。

今天经过浏览多篇文章和查阅GitHub仓库，发现网络上存在大量错误信息，导致时间浪费。

当下午最终成功运行时，我突然感到自己有些愚蠢，为什么要花费如此多的时间查看未经验证的内容。

例如，这篇文章 https://zhuanlan.zhihu.com/p/75406976，底部留言有许多人称呼为“大佬”，我尝试了一下，发现无法实施。

在此再强调一点，许多网络文章的项目前提和背景可能与您当前的情况不同，因此盲目追随可能会浪费时间。最好还是从原始信息处寻找并解决问题。

然而，对于许多不熟悉的技术或业务情境，我们可能不知道从何处寻找，可能会走弯路。在这里，我要推荐 ChatGPT，向其提问可以事半功倍。这也再次提醒了我自己！