【前端】rtsp 与 rtmp 视频流的播放方法

你的名字 2022-12-29 04:55 426阅读 0赞

### 【前端】rtsp 与 rtmp 视频流的播放方法 ###

*  导读
 *  写在前面
 *  前端如何在网页上播放 rtsp 视频流
 *   *  方法一 、浏览器安装插件
     *  方法二、转 rtmp
     *  方法三、转码推流
 *  参考资料

前端如何在网页上播放 rtsp 视频流？

# 导读 #

RTSP（Real Time Streaming Protocal），RFC2326，实时流传输协议，是 `TCP/IP` 协议体系中的一个应用层协议。…  
额，算了，不写这些了；想了解科普知识的，自己去网上查；而且这也不是我写博文的风格，咋们直接上干货！

# 写在前面 #

如何生成一个 `rtsp` 的视频流？如何播放 `rtsp` 视频流？  
你可以在网上搜一下 `rtsp 测试视频流`，看有没有现成的 `rtsp` 视频流连接可用。（不过，搜出来的大部分都不理想，不可用。)

[这是我找的 rtmp 视频流][rtmp]

在网上下载一个 [vlc软件][vlc]，它可以播放 rtsp 视频流，也可以将视频文件转成 `rtsp` 视频流

视频文件转 rtsp 视频流，具体操作如下：  
![在这里插入图片描述][20201222193639645.gif]  
这样就会得到一个 rtsp 的视频流，链接是： rtsp://127.0.0.1:8554/a

我们再开一个 vlc， 来播放它：  
![在这里插入图片描述][20201222194711512.gif]  
OK，现在，我们已经学会制作 rtsp 视频流，也能用 vlc 工具来播放 rtsp 视频流了，那么下一步，就是在网页上如何播放 rtsp 视频流

# 前端如何在网页上播放 rtsp 视频流 #

## 方法一 、浏览器安装插件 ##

**【这是一个不推荐的方案】**

因为，IE浏览器需要安装插件，火狐需要安装插件，谷歌浏览器需要安装插件，所有的的浏览器都需要安装插件才能在浏览器上直接播放 `rtsp` 视频流；而且插件都不一样，而且插件只有很旧版本的谷歌、火狐浏览器才可以支持使用；较新一点的浏览器都不支持这种方法了。

> 举个例子、谷歌浏览器需要安装 vlc 插件，依靠这个插件才能让 RTSP 协议在网页上能播放，但是目前高版本的 Chrome 浏览器不支持 NPAPI 插件，也就是说高版本的 Chrome 浏览器还是不能播放（46以上的版本都不行）。

所以、这种方案极其不推荐，建议你也别去试了！

## 方法二、转 rtmp ##

将 `rtsp` 转 `rtmp`；这种方案，后端将 `rtsp` 视频流转换成 `rtmp` 视频流。  
`RTMP` 是 `Macromedia` 开发的一套视频直播协议，属于 `Adobe`。想要在浏览器中实现 `rtmp` 推流，就必须借助 `flash` 的帮助。而且 `HTML5` 规范里面并没有针对 `RTMP` 的实现。毕竟这个协议标准是 `Adobe` 公司指定的。

但是现在是 2021 年了，谷歌浏览器不再支持 Flash 了，Flash 也不再更新，建议用户卸载了；所以浏览器直播播放 `rtmp` 的方式也不推荐。

## 方法三、转码推流 ##

> 抛开上面两种思路以后，借助后端转码推流将是必要的操作

常见的包括但不限于以下几种：

*  转 flv
 *  转 websocket
 *  转 http-flv
 *  转 m3u8
 *  转 hls

1、 [rtsp 转 flv 源码教学][rtsp _ flv]；这个很详细了，然后关于 ffmpeg 的安装与使用：[ffmpeg的安装与使用][ffmpeg] ；ffmpeg 安装包我已经下载好并上传了，自取 => [ffmpeg 安装包][ffmpeg 1]

2、 [rtsp 转 websocket 源码教学][rtsp _ websocket]；  
这里其实有一个思考就是是：【jsmpeg提供了一种播放ws协议视频流的直接方案】

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.jsmpeg, #video-canvas {
         
    			border: 2px solid green;
    			width: 300px;
    			height: 300px;
    		}
    	</style>
    </head>
    <body>
    	<script src="https://cdn.bootcdn.net/ajax/libs/jsmpeg/0.2/jsmpg.min.js"></script>
    	<div class="jsmpeg" data-url="ws://127.0.0.1:3000"></div>
    	<canvas id="video-canvas"></canvas>
    	<script>
    		var canvas = document.getElementById('video-canvas')
    		var url = 'ws://127.0.0.1:3000'
    		var player = new JSMpeg.Player(url, {
          canvas: canvas })
    		player.play()
    	</script>
    </body>
    </html>

3、[rtsp 转 hls/m3u8 源码教学][rtsp _ hls_m3u8]

> 转 `hls` 流出来，缺点是 `hls` 流延迟更大。

4、将 RTSP/ RTMP 视频流转流，然后分发到 RTMP 服务器，然后服务器转 `http-flv` 出来，浏览器直接播放 `http-flv` 流；

# 参考资料 #

[ffmpeg的安装与使用][ffmpeg]

[https://www.cnblogs.com/dwj192/p/7040250.html][https_www.cnblogs.com_dwj192_p_7040250.html]

[百度云-cyberplayer][-cyberplayer]

\-----------------(正文完)\------------------

前端学习交流群，想进来面基的，可以加群： 685486827，832485817；  
![Vue学习交流][Vue] ![React学习交流][Vue]

写在最后： 约定优于配置 —— 软件开发的简约原则

\--------------------------------(完)\--------------------------------------

我的：  
个人网站： [https://neveryu.github.io/neveryu/][https_neveryu.github.io_neveryu]  
Github： [https://github.com/Neveryu][https_github.com_Neveryu]  
新浪微博： [https://weibo.com/Neveryu][https_weibo.com_Neveryu]  
微信： miracle421354532

更多学习资源请关注我的新浪微博…好吗

[rtmp]: https://www.cnblogs.com/juanxincai/p/12900303.html
[vlc]: https://www.videolan.org/
[20201222193639645.gif]: /images/20221120/3196dc37230d4fb5bcd9182ec2e152ab.png
[20201222194711512.gif]: /images/20221120/83ac195708744adab62858469196df70.png
[rtsp _ flv]: https://www.bilibili.com/video/BV12k4y197YK
[ffmpeg]: https://blog.csdn.net/qq_39516859/article/details/81843419
[ffmpeg 1]: https://download.csdn.net/download/csdn_yudong/15355499
[rtsp _ websocket]: https://www.bilibili.com/video/BV1mV411o7Gy
[rtsp _ hls_m3u8]: https://www.bilibili.com/video/BV13V411o7mg
[https_www.cnblogs.com_dwj192_p_7040250.html]: https://www.cnblogs.com/dwj192/p/7040250.html
[-cyberplayer]: http://cyberplayer.bcelive.com/demo/new/index.html
[Vue]: 
[https_neveryu.github.io_neveryu]: https://neveryu.github.io/neveryu/
[https_github.com_Neveryu]: https://github.com/Neveryu
[https_weibo.com_Neveryu]: https://weibo.com/Neveryu