用网页播放RTMP！

-雨声残响-

于 2024-07-12 11:09:26 发布

阅读量291

点赞数 9

文章标签： ffmpeg nginx

本文链接：https://blog.csdn.net/m0_62231223/article/details/140371490

版权

继续上一篇文章，来讲一讲如何用网页播放RTMP流。

现代浏览器并不原生支持RTMP协议。RTMP主要用于与Flash Player一起工作，但大多数浏览器已经弃用了对Flash的支持，因为Flash Player存在大量的安全漏洞并且性能较差。

所以我们得进行转流。

还是经过几个小时漫长的搜索我发现了一个合适的解决方案。

下面是步骤：

1.安装WebSocket 服务器

这一步很简单，直接在node.js直接下在ws模块即可

npm install ws

2.下载ffmpeg，目的是使用 `ffmpeg` 从 RTMP 流进行推流

Download FFmpeg

上面这个官方网址就可以下载ffmpeg，但是我实在有点懵逼，里面含的内容有点杂

所以我还是选择下载csdn上面搜索到的：

win1064位安装ffmpeg的免安装ZIP包_ffmpeg免安装,ffmpeg.zip资源-CSDN文库

步骤 1：解压文件

解压文件：
- 使用解压工具（如 7-Zip）解压文件。首先解压 .xz 文件，然后解压 .tar 文件。
- 将解压后的文件放在一个合适的目录中，例如 C:\ffmpeg。（公司的电脑，所以不必在意C盘内存，几百个G随便用）

步骤 2：配置环境变量

添加 ffmpeg 到系统路径：
- 右键点击“此电脑”图标，选择“属性”。
- 点击“高级系统设置”。
- 在“系统属性”窗口中，点击“环境变量”。
- 在“系统变量”部分，找到并选择 Path，然后点击“编辑”。
- 点击“新建”，输入 C:\ffmpeg\ffmpeg-master-latest-win64-gpl\bin（假设 ffmpeg.exe 位于 C:\ffmpeg\ffmpeg-master-latest-win64-gpl\bin）。
- 点击“确定”保存更改。

步骤 3：验证安装

验证 ffmpeg 安装：
- 打开命令提示符，输入以下命令并回车：
  ffmpeg -version
- 如果安装成功，你会看到 ffmpeg 的版本信息。

3.下载jsmpeg

github地址：（直接下载zip即可，也可以拉到本地）

phoboslab/jsmpeg: MPEG1 Video Decoder in JavaScript (github.com)

jsmpeg是GitHub上的一个开源项目，一个基于JavaScript的MPEG1视频的解码器。

他的readme是这么说的：

4.操作开始

火速安装完成后就真正开始操作了。

为了做一个demo，我直接在jsmpeg文件夹下面写了一个简单的网页。（至于为啥要在这里创建网页，因为我们主要要用到的js文件就是jsmpeg-master下面的jsmpeg.min.js和websocket-relay.js，在这创建比较方便引用）

下面是代码：

<!DOCTYPE html>
<html>
<head>
    <title>JSMpeg Stream Client</title>
    <style type="text/css">
        html, body {
            background-color: #111;
            text-align: center;
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <canvas id="video-canvas"></canvas>
    <script type="text/javascript" src="./jsmpeg-master/jsmpeg.min.js"></script>
    <script type="text/javascript">
        var canvas = document.getElementById('video-canvas');
        var url = 'ws://127.0.0.1:8082/'; // 确保这个 URL 与 WebSocket 服务器的输出端口一致
        var player = new JSMpeg.Player(url, {canvas: canvas});
    </script>
</body>
</html>

思路是播放通过WebSocket传输的MPEG-TS视频流。使用JSMpeg库处理视频流，并在<canvas>元素上进行渲染。

为了启动服务器，我写了两个bat文件，方便运行脚本

start.bat:(启动websocket服务器)

node ./jsmpeg-master/websocket-relay.js supersecret 8081 8082

start_stream.bat(通过批处理脚本简化FFmpeg流的启动和管理)

ffmpeg -i rtmp://**********（自己ip）/live -q 0 -f mpegts -codec:v mpeg1video -s 1280x720 -b:v 1500k -codec:a mp2 -ar 44100 -ac 1 -b:a 128k http://127.0.0.1:8081/supersecret

下面是参数的说明：

-i rtmp://***********/live：指定输入流地址，这里是RTMP流。
-q 0：指定视频质量，0表示最高质量（这个参数主要用于编码JPEG图片，对视频流没有实际效果，可以忽略）。
-f mpegts：指定输出格式为MPEG-TS（MPEG Transport Stream）。
-codec:v mpeg1video：指定视频编码器为MPEG-1视频编码器。
-s 1280x720：指定输出视频分辨率为1280x720（720p）。
-b:v 1500k：指定视频比特率为1500 kbps。
-codec:a mp2：指定音频编码器为MP2。
-ar 44100：指定音频采样率为44.1 kHz。
-ac 1：指定音频通道数为1（单声道）。
-b:a 128k：指定音频比特率为128 kbps。
http://127.0.0.1:8081/supersecret：指定输出流地址，通过HTTP协议推送到WebSocket服务器。

两个脚本都创建完了就应该可以愉快的运行了

1.启动nginx服务器

win10及以下，点击nginx.exe一闪而过是正常的，不会出现窗口，也可以点击html中它自带的网页验证是否成功启动。

2.开启直播，功夫熊猫4，启动！

3.打开start.bat

4.打开start_stream.bat

出现这种一直再变化的frame语句就算是成功了

5.打开网页，就显示出了直播的电影内容

画质还是很高的，声音画面同步，就是延迟在1-2秒。

本次算是用1080p的电影源很成功的模拟了1080p的摄像画面

5.总结

启动nginx-rtmp：
- 安装并配置nginx-rtmp模块，启动nginx服务。
FFmpeg推流：
- 使用FFmpeg将RTMP流推送到nginx-rtmp服务器。
设置WebSocket服务器：
- 启动websocket-relay.js脚本，将MPEG-TS流通过WebSocket传输。
前端显示：
- 编写HTML页面，使用JSMpeg库通过WebSocket接收并播放视频流。

完

-雨声残响-

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
用网页播放RTMP！

启动nginx-rtmp安装并配置nginx-rtmp模块，启动nginx服务。FFmpeg推流使用FFmpeg将RTMP流推送到nginx-rtmp服务器。设置WebSocket服务器启动脚本，将MPEG-TS流通过WebSocket传输。前端显示编写HTML页面，使用JSMpeg库通过WebSocket接收并播放视频流。完。
复制链接

扫一扫