背景

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

巡检根据不同的筛选项精准获取视频播放地址，查看视频，根据直播在线情况，验收现场。

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

调研

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

流媒体传输协议

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一样，早已形成了自己的盈利链。
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 中播放视频流有几种解决方案，以下是一些常见的方法：

HTML5 Video 标签：HTML5 提供了 <video> 标签，可以在网页上直接嵌入视频内容。你可以通过设置 src 属性来指定视频的 URL，然后浏览器会自动处理播放。这对于常规的视频文件（如 MP4、WebM、Ogg 等格式）非常有效。
HLS（HTTP Live Streaming）：HLS 是苹果推出的一种流媒体传输协议，适用于在网页上播放实时的音视频流。HLS 将视频内容切分为小块，并生成一个包含媒体资源的 M3U8 播放列表文件。HTML5 Video 标签支持 HLS，但在不同的浏览器上可能需要不同的处理方式。通常，你可以使用 video.js、hls.js 等 JavaScript 库来更好地支持 HLS。
MPEG-DASH（Dynamic Adaptive Streaming over HTTP）：与 HLS 类似，MPEG-DASH 也是一种流媒体传输协议，适用于在网页上播放实时的音视频流。MPEG-DASH 使用 .mpd 格式的播放列表文件，通过适应网络带宽动态调整视频质量。同样地，需要使用 JavaScript 库（如 dash.js）来更好地支持 MPEG-DASH。
WebRTC（Web Real-Time Communication）：如果你需要实时通信，如视频会议或实时视频流传输，WebRTC 是一个强大的选择。它允许浏览器之间直接进行点对点的音视频传输，而不需要传统的中间服务器。
RTMP（Real-Time Messaging Protocol）：RTMP 是一种流媒体传输协议，广泛用于实时视频流传输。然而，由于浏览器对 RTMP 的支持有限，通常需要使用 Flash 或其他插件来播放 RTMP 流。
服务器代理：如果服务器不支持跨域访问，你可以在你自己的服务器上设置代理，将视频流从服务器获取然后传递给前端。这样，你可以在代理服务器上处理 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）流的视频需要一些设置。以下是一般步骤：

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

在组件中引入和使用：在你的 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 属性来播放。

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

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

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