流媒体 rtmprtsp 实现浏览器 flv.js播放

    技术2022-07-11  136

    使用node-media-server模块, flv.js 编写流媒体服务

    实现接收 rtmp流,播放用 http播放

    编写服务端

    安装node-media-server模块

    mkdir live-app cd live-app npm init --yes npm install node-media-server --save

    编写服务端代码

    single_app.js

    const NodeMediaServer = require('node-media-server'); const config = { rtmp: { port: 1935, chunk_size: 60000, gop_cache: true, ping: 60, ping_timeout: 30 }, http: { port: 8000, allow_origin: '*' }, } var nms = new NodeMediaServer(config) nms.run();

    启动服务端

    node single_app.js

    测试

    我是windows环境,可以下载ffmpeg,将bin目录放入到环境变量中 链接:https://pan.baidu.com/s/1ncnBKBwPp8JI4ahNh3rZAw 提取码:zsbc

    # 使用ffmpeg 推送 rtmp ffmpeg.exe -re -i test.mp4 -c:v libx264 -preset superfast -tune zerolatency -c:a aac -ar 44100 -f flv rtmp://localhost/live/abc # 使用ffplay 播放http版本的流媒体 ffplay -i http://localhost:8000/live/abc.flv

    编写客户端

    前端播放,可以使用 flv.js

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script> <video id="videoElement" style="width: 80%;" controls="controls"></video> <script> if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ type: 'flv', url:'http://127.0.0.1:8000/live/abc.flv' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } </script> </body> </html>

    如何希望在 HTML 中播放 RTSP, 我们也可以实现我们

    实现接收 rtsp流,播放用 http播放 需要注意的是,如果使用flv.js,编码必须为h264 + aac

    我们的前端代码不变,只修改服务端的代码.

    利用node-media-server模块给我们提供的特性,使用中继模式

    每次请求过来,如果符合条件,就去我们配置的服务器拉取rtsp流,拉取回来就可以使用http-flv播放了。

    其中,还需要再配置一个rtsp服务,我们使用go编写的easydarwin

    链接:https://pan.baidu.com/s/1MDSSYrwm6HUCxHdsQLlP1Q 提取码:wy1l

    下载windows版本,直接执行EasyDarwin.exe,就可以接收rtsp流了。

    # 启动rtsp服务端 EasyDarwin.exe # 使用ffmpeg 推送rtsp流 到 easydarwin ffmpeg -re -i 1.mp4 -vcodec copy -codec copy -rtsp_transport tcp -f rtsp rtsp://127.0.0.1/live/abc

    编写node.js服务端,修改上面的js文件

    const NodeMediaServer = require('node-media-server'); const config = { rtmp: { port: 1935, chunk_size: 60000, gop_cache: true, ping: 60, ping_timeout: 30 }, http: { port: 8000, allow_origin: '*' }, relay: { ffmpeg: 'D:\\Dev\\Dev-Plugins\\ffmpeg-20200628-4cfcfb3-win64-static\\bin\\ffmpeg.exe', tasks: [ { //应用名称 app: 'live', //工作模式 静态即可 mode: 'pull', // 静态static //中继地址 edge: 'rtsp://127.0.0.1:8554', //访问资源名称 name: 'rtsp', //传输协议 rtsp_transport : 'tcp', //['udp', 'tcp', 'udp_multicast', 'http'] } ] }, }; var nms = new NodeMediaServer(config) nms.run(); # 启动 node .\single_app.js

    然后浏览器访问,前端代码不变,node服务端发现没有这个流,自动会去easydarwin寻找,找到后将流来回来,前端正常播放。

    Processed: 0.010, SQL: 9