写在前面

很多通过摄像头拿到的视频流格式都是Rtsp协议的，比如：海康威视摄像头。在现代的浏览器中，已经不支持直接播放Rtsp视频流，而且，海康威视提供的本身的webSdk3.3.0视频插件有很多问题，比如：视频插件没有dom树的概念，且总是浮动在所有元素的最上层。所以，通过转流方式进行在网页上播放视频是替代官网sdk的一种尝试。

Rtsp视频流是什么？

RTSP（Real Time Streaming Protocol）是一种实时流媒体传输协议，用于在网络上实时传输音视频数据。它可以用于各种应用，例如视频监控、远程教育、视频会议等。

RTSP 是一种基于文本的协议，它使用 TCP 或 UDP 进行传输。RTSP 工作在应用层，它使用 RTP/RTCP 协议来传输音视频数据。

RTSP 的主要特点包括：

实时性：RTSP 可以实时传输音视频数据，因此可以用于视频监控、远程教育等实时应用。
可靠性：RTSP 使用 TCP 或 UDP 进行传输，因此可以保证数据的可靠性。
可扩展性：RTSP 可以扩展到支持多种音视频格式和传输协议。

RTSP 的工作原理如下：

客户端向服务器发送一个 RTSP OPTIONS 请求，以获取服务器支持的功能。
服务器向客户端发送一个 RTSP OPTIONS 响应，列出服务器支持的功能。
客户端向服务器发送一个 RTSP DESCRIBE 请求，以获取媒体流的描述信息。
服务器向客户端发送一个 RTSP DESCRIBE 响应，包含媒体流的描述信息。
客户端向服务器发送一个 RTSP SETUP 请求，以建立媒体流的传输会话。
服务器向客户端发送一个 RTSP SETUP 响应，表示媒体流的传输会话已经建立。
服务器开始向客户端发送媒体流数据。
客户端接收媒体流数据并播放。

RTSP 的常见应用场景包括：

视频监控：RTSP 可以用于视频监控系统，实时传输监控摄像头的视频数据。
远程教育：RTSP 可以用于远程教育系统，实时传输课堂教学的视频数据。
视频会议：RTSP 可以用于视频会议系统，实时传输参会者的视频数据。

海康威视通过RTSP获取视频流的方式

海康威视的摄像头通常支持通过RTSP（Real Time Streaming Protocol）获取视频流。以下是通过RTSP获取海康威视摄像头视频流的一般步骤：

确定RTSP URL格式：

海康威视的RTSP URL通常遵循一定的格式，例如：rtsp://[username]:[password]@[camera-ip-address]:[port]/h264/ch1/main/av_stream
其中，username 和 password 是摄像头的登录凭据，camera-ip-address 是摄像头的IP地址，port 是RTSP服务的端口号（通常为554），/h264/ch1/main/av_stream 是视频流的具体路径。

设置摄像头：

登录到摄像头的Web界面，找到视频流相关的设置选项。
启用RTSP服务，并设置相应的传输协议（TCP/UDP）和端口号（如果默认端口554未被修改，则无需更改）。

构建RTSP URL：

根据你的摄像头设置和所需的视频流类型（主码流或子码流），构建正确的RTSP URL。
例如，如果你的摄像头IP是192.168.1.64，用户名是admin，密码是12345，你想要获取主码流，那么RTSP URL将是：rtsp://admin:12345@192.168.1.64:554/h264/ch1/main/av_stream

使用媒体播放器测试：

在尝试集成到Vue项目之前，首先使用媒体播放器（如VLC或EasyPlayer）测试RTSP URL是否能够正确获取视频流。
将RTSP URL粘贴到媒体播放器的网络流地址栏中，并尝试播放。

集成到Vue项目中：

由于浏览器通常不直接支持RTSP，你可能需要将RTSP流转换为HLS或WebRTC等浏览器兼容的格式。
使用媒体服务器软件（如Wowza、Kurento、Janus等）进行转换。
在Vue项目中，你可以使用<video>标签或第三方库（如Video.js、Hls.js等）来播放视频流。

安全性和隐私性：

请确保采取适当的安全措施来保护你的视频流，例如使用HTTPS、加密和身份验证等。
不要将RTSP流直接暴露在互联网上，而是将其限制在安全的内部网络中，并通过VPN或其他安全方式进行远程访问（如果需要的话）。

根据上述描述，结合你的摄像头设备，获取 Rtsp 视频地址。比如： rtsp://admin:12345@192.168.1.64:554/h264/ch1/main/av_stream(后面这一串基本是固定)，你知道知道你设备登录的用户名，密码， IP地址，端口号，就可以拼接出该地址。

操作步骤

通过vlc检查rtsp视频流是否可用

此处为语雀图册卡片，点击链接查看：
https://www.yuque.com/clean-pfi5o/kg4uhy/seslxg24moabpiyg#lqxrb

点击串流， vlc 软件能正常播放视频即可。

本地下载ffmpeg软件，并配置到path目录中

ffmpeg下载，加压到你的系统中

ffmpeg-6.1.1-full_build.7z

将ffmpeg软件的bin目录配置到系统path路径

此处为语雀图册卡片，点击链接查看：
https://www.yuque.com/clean-pfi5o/kg4uhy/seslxg24moabpiyg#AWXDR

本地安装Node.js

参考:

https://blog.csdn.net/redrose2100/article/details/121675915

下载jsmpeg.min.js

jsmpeg.min.js

编写Server.js代码

const Stream = require("node-rtsp-stream");

new Stream({
  name: "camera3",
  streamUrl: "rtsp://username:password@192.168.3.xxx:554/h264/ch1/main/av_stream",
  wsPort: 10023,
  ffmpegOptions: {
    '-stats': '',
    '-r': 20,
    '-s': '1280 720'
  },
});

编写客户端html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jsmpeg.min.js"></script>

  </head>
  <body>
    <canvas id="canvas"></canvas>

    <script>

      const canvas = document.querySelector("#canvas");

      new JSMpeg.Player("ws://localhost:10023", { canvas });

    </script>
  </body>
</html>

代码总目录结构

hello.rar

运行代码

安装Node依赖

npm i node-rtsp-stream

运行server端，进行转码

出现次效果，证明已经在成功转码。

双击Html运行查看视频效果

只要写的 rtps 地址是对的，应该可以在浏览器中，正常播放视频。我亲测可以。

写在最后

这种方式是将Rtsp格式的视频流转换成ws://(websocket,我们使用的海康威视摄像头不支持websocket取流)格式的视频流。然后通过 JSMpeg播放器配合h5的canvas标签使用。就视频转流来讲，是成功的。而且ws://格式的视频流，前端有不少支持方案。

但是，现在摄像头都带有云台(控制摄像头上下左右移动)，语音对讲等功能，依然需要探索。

参考:

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

https://juejin.cn/post/7221858081485963324

醋醋百科网

Good Luck To You!

将摄像头视频流从Rtsp协议转为websocket协议