使用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播放
我們的前端代碼不變，只修改服務端的代碼.
利用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尋找，找到後將流來回來，前端正常播放。