基于网页实现RTSP/RTMP流的web直播(监控)

2024-01-05

字数统计: 2k字 | 阅读时长: 8分

环境：windows
技术栈：
bilibili flv.js
hls.js
node-media-server(一个 Node.js 实现的RTMP/HTTP/WebSocket/HLS/DASH流媒体服务器)
win环境安装ffmpeg
app软件：IP摄像头Lite(沈垚)
本地使用 node media server 推流，再在前端用flv.js/hls.js 加载直播流地址播放,播放器在线地址：https://gitxieada.github.io/Demo/player/index.html

参考：
Node-Media-Server官方说明 https://github.com/illuspas/Node-Media-Server/blob/master/README_CN.md
IP摄像头 - 旧手机变身远程监控 https://zhuanlan.zhihu.com/p/346696961
旧手机不要丢，装个App能当多功能监控摄像头，能开启onvif和rtsp https://post.smzdm.com/p/a5kl24z3/
Electron 低延迟视频流播放方案探索 https://bobi.ink/2020/04/05/video-stream/
Web 播放 RTSP 推流最佳方案实践 https://juejin.cn/post/7221858081485963324
Node-Media-Server - 白色程序猿 - 博客园 https://www.cnblogs.com/ldy-blogs/p/10081787.html
FFmpeg 视频处理入门教程 http://www.ruanyifeng.com/blog/2020/01/ffmpeg.html
视频直播知识之二：推流、拉流和服务端处理 https://www.stupidcode.net/blog/2021/05/07/video-2/
使用node-media-server搭建一个简易的流媒体服务器（windows环境） https://blog.csdn.net/QiZi_Zpl/article/details/107259935
VLC搭建简单的RTSP流媒体服务器 https://blog.csdn.net/u012478275/article/details/121513675

基础知识

视频流操作过程：

搭建流媒体服务器
推流（上传视频流到流媒体服务器）
拉流（从流媒体服务器下载视频流）
RTMP/RTSP介绍
RTMP：
英文全称：Real Time Messaging Protocol
中文意思：实时消息协议
底层协议：TCP
应用级视频流协议
视频编解码器：H.264
音频编解码器：AAC
延迟：3 - 30 秒
RTSP：
英文全称：Real Time Streaming Protocol
中文意思：实时流协议
底层协议：TCP 和 UDP
网络控制协议
视频编解码器：H.265
音频编解码器：AAC
延迟：2 秒
播放方案

RTSP
RTSP流不能直接在浏览器播放，所以需要转码

RTSP 转 RTMP
RTMP的流需要在浏览器中用flash播放器，但是谷歌已经在2020年底带头不支持flash插件了
RTSP 转 HLS
HLS：HTTP Live Streaming，是由苹果公司提出的基于HTT的流媒体网络传输协议。
在苹果的相关系统上Safari浏览器是可以直接打开m3u8地址的。在别的系统上需要借助h5的video标签，前端在处理HLS的视频流时，引入了video.js。【后端将视频转成HLS流，以m3u8后缀结尾。通过浏览器用video.js可以正常播放，但是发现和原视频存在5秒左右的延迟，不符合项目的实时性需求，所以有实时视频的需求不建议用HLS流播放。】
优点：客户端支持简单，只需要支持HTTP请求即可，方便通过防火墙或者代理服务器。因为他会将数据分割成多个片段，所以客户端可以很快的实现码率切换，以适应不同的带宽，主要应用于手机端。
缺点：因其自己的实现方式，需要多次请求，HLS存在延迟的延迟比别的协议会高，不适用于直播，HLS对于网络质量的要求比较高。
RTSP 转 FLV （采用）
FLV：FLASH VIDEO,基于flash来播放，是目前增长最快、最为广泛的视频传播格式。
优点: flv用http服务器即可实现传统的流媒体服务器的功能。flv文件体积小，视频质量良好。众多视频网站均采用此视频格式。

在 window 上安装 FFmpeg,VLC

FFmpeg

下载 FFmpeg：前往 FFmpeg 官网 ,选择 windows from gyan.dev,找到 release builds,点击 ffmpeg-release-essentials.zip,下载最新版的 FFmpeg。
解压缩：将下载的压缩包解压到您想要安装 FFmpeg 的目录中。
配置环境变量：在 Windows 中打开“控制面板”，点击“系统和安全” -> “系统” -> “高级系统设置”，在弹出的窗口中点击“环境变量”，在“系统变量”中找到“Path”，双击它，在弹出的窗口中点击“新建”，输入 FFmpeg 的安装目录，并点击“确定”保存设置。
完成安装：打开命令提示符（Windows+R，输入 cmd 回车），执行 ffmpeg -version 命令，如果输出 FFmpeg 的版本信息，说明安装成功。

VLC

下载 VLC Media Player测试是否可以播放，下载后点击“媒体”、“打开网络串流”、“输入地址”、“播放”。
可以通过 VLC、西瓜视频播放器验证拉流地址是否正确
准备好一个可播放的rtsp视频地址：
西瓜播放器测试视频: https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv
如果flv、hls 链接失效，从西瓜播放器测试网站 https://h5player.bytedance.com/examples/ 重新获取即可。

使用手机摄像头做网络ip摄像头

IP摄像头Lite(沈垚) https://apps.apple.com/us/app/ip-camera-lite/id1013455241
在设置，找到“无客户端连接时关闭摄像头省电模式”然后把这项关了，再设置用户名和密码的地方，修改默认的账号密码后保存。
返回到首页，点击底部的“打开摄像头服务器”，开启。
VLC验证rtsp://admin:12345@192.168.0.100:8554/live是否能播放
注意要先生成rtsp流，再启动node-media-server ，rtsp转为rtmp的中继服务才有用(工作模式静态)。

node-media-server

https://www.npmjs.com/package/node-media-server
新建app.js。并编写下述代码，然后运行app.js

const NodeMediaServer = require('node-media-server');
const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 30,
    ping_timeout: 60
  },
  http: {
    port: 8000,
    mediaroot: './media/',
    allow_origin: '*'
  },
  trans: {
    ffmpeg: 'D:/ffmpeg-6.1.1-essentials_build/bin/ffmpeg.exe',
    tasks: [// 转hls流
      {
        app: 'live',
        hls: true,
        hlsFlags: '[hls_time=2:hls_list_size=3:hls_flags=delete_segments]',
        dash: true,
        dashFlags: '[f=dash:window_size=3:extra_window_size=5]'
      }
    ]
  },
  //引入中继模式任务
  // 静态拉流模式在服务启动时执行，当发生错误时自动重连。可以是一个直播流，也可以是一个本地文件。理论上并不限制是RTSP或RTMP协议
  // 使用ffmpeg实现RTMP/RTSP的中继服务。（将rtsp转为rtmp）,这种方法无需使用cmd执行FFmpeg命令
  // ffmpeg -rtsp_transport tcp -re -i rtsp://admin:12345@192.168.0.100:8554/live -c copy -f flv rtmp://127.0.0.1:1935/iptv/rtsp
  // rtmp://(服务器所在IP)/iptv/rtsp
  // rtmp://localhost/iptv/rtsp VLC播放
  // 会生成一个http://localhost:8000/iptv/rtsp.flv的地址。前端可以通过这个地址来播放实时流媒体视频。
  // 这种方法可以产生两种视频流，一种rtmp一种flv。
  relay: {
    //指定ffmpeg可执行文件位置
    ffmpeg: 'D:/ffmpeg-6.1.1-essentials_build/bin/ffmpeg.exe',
    tasks: [
      {
        //应用名称
        app: 'iptv',
        //工作模式 静态即可
        mode: 'static',
        //中继地址 替换成自己的rtsp地址
        edge: 'rtsp://admin:12345@192.168.0.100:8554/live',
        //访问资源名称STREAM_NAME
        name: 'rtsp',
        //传输协议
        rtsp_transport: 'tcp' //['udp', 'tcp', 'udp_multicast', 'http']
      },
      {
        app: 'mv', // rtmp://127.0.0.1/mv/test 会生成一个http://localhost:8000/mv/test.flv的地址
        mode: 'static',
        edge: 'D:/nms/output.mkv',//本地文件
        name: 'test'
      }
    ]
  },
};
var nms = new NodeMediaServer(config)
nms.run();

启动后，可以访问 localhost:8000/admin ，是node_media_server服务的管理端界面。

使用 FFmpeg 推流

如果你有一个音视频编码为H.264+AAC的视频文件转为直播:
ffmpeg -re -i INPUT_FILE_NAME -c copy -f flv rtmp://localhost/live/STREAM_NAME
或者有个其他编码格式，需要转为h.264+AAC的编码再转直播:
ffmpeg -re -i INPUT_FILE_NAME -c:v libx264 -preset veryfast -tune zerolatency -c:a aac -ar 44100 -f flv rtmp://localhost/live/STREAM_NAME
如：ffmpeg -re -i "D:/nms/1.2.mp4" -c:v libx264 -preset veryfast -tune zerolatency -c:a aac -ar 44100 -f flv rtmp://localhost/live/home
使用FFmpeg进行推流，稍等一会，你就会发现在mediaroot指向的目录下生成一个live/home的文件夹，里面存放着m3u8文件。由于需要先生成m3u8文件，所以如果是推流摄像头的话，会存在比较大的延迟。
查看管理平台，如下图：
播放直播流
使用vlc、ffplay或播放器(在线地址：https://gitxieada.github.io/Demo/player/index.html) 进行验证
RTMP 流格式　ffplay rtmp://localhost/live/STREAM_NAME
http-flv 流格式 ffplay http://localhost:8000/live/STREAM_NAME.flv
拉流地址:
rtmp://localhost/live/home
http://localhost:8000/live/home.flv
http://localhost:8000/live/home/index.m3u8

ws://localhost:8000/mv/test.flv
http://localhost:8000/mv/test.flv

http://localhost:8000/iptv/rtsp.flv