放一下效果圖
PC端
PC端.png
移動(dòng)端
移動(dòng)端.png
這里我們就當(dāng)一些基礎(chǔ)的準(zhǔn)備工作已經(jīng)做好,直接開始直播實(shí)現(xiàn)
1. 技術(shù)準(zhǔn)備
- node:
nodeMediaServer(用來(lái)接收流的服務(wù)器)
NodePlayer.js(視頻播放器)
- ffmpeg: 推流
2. node
服務(wù)端
-
Node-Media-Server
我們用它來(lái)做流媒體服務(wù)器
首先我們先搭建起來(lái)
mkdir nms
cd nms
npm install node-media-server
vi app.js
const NodeMediaServer = require('node-media-server');
const config = {
rtmp: {
port: 1935, // rtmp服務(wù)端口為1935
chunk_size: 60000,
gop_cache: true,
ping: 30,
ping_timeout: 60
},
http: {
port: 8000, // http-flv的服務(wù)端口為8000
allow_origin: '*'
}
};
var nms = new NodeMediaServer(config)
nms.run();
我們需要開放1935跟8000端口(我的防火墻是基于debian的ufw. ubuntu,debian, Raspbian通用)
sudo ufw allow 1935
sudo ufw allow 8000
sudo ufw reload
最后將服務(wù)運(yùn)行起來(lái)
node app.js
出現(xiàn)這個(gè)則說(shuō)明我們運(yùn)行成功了
運(yùn)行成功.png
- 客戶端播放器
NodePlayer.js
使用方法可以直接看git上作者的demo,淺顯易懂
DEMO
直接復(fù)制將websocket地址修改即可
注:我們?yōu)槭裁从脀ebsocket的方式播放,因?yàn)橹苯硬シ舝tmp流的話需要用到flash, flash在PC端上可以播放,但是在移動(dòng)端卻不能播放,這款插件是跟Node-Media-Server配套的一款視頻播放插件,在上面的Node-Media-Server啟動(dòng)成功的截圖中我們也看到了websocket服務(wù)端口開啟成功的提示,這款插件他就是通過將rtmp轉(zhuǎn)arraybuffer的方式, 用websocket傳輸給前端,前端通過canvas顯示視頻的方式來(lái)展示我們的流,這樣的好處在于兼任各種平臺(tái),PC端移動(dòng)端,公眾號(hào)以及各種小程序
3. ffmpeg攝像頭推流
ffmpeg -re -i /dev/video0 -f flv -vcodec libx164 rtmp://你的推流地址:1935/live/v1
-vcodec libx164
這個(gè)很重要,之前我因?yàn)槿鄙龠@個(gè)參數(shù)導(dǎo)致websocket跟http-flv方式播放流失敗,因?yàn)閒lv播放流需要h264格式, 所以我們加上這個(gè)就可以了
4.最后我們?cè)L問NodePlayer播放器頁(yè)面
image.png
出現(xiàn)這個(gè)畫面就是成功了
除了NodePlayer.js外,還有一個(gè)播放器也可以使用,那就是flv.js,這里就不多做描述了
