放一下效果圖
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

2. 客戶端播放器
   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ù)端口開啟成功的提示,這款插件他就是通過(guò)將rtmp轉(zhuǎn)arraybuffer的方式, 用websocket傳輸給前端,前端通過(guò)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問(wèn)NodePlayer播放器頁(yè)面

image.png

出現(xiàn)這個(gè)畫面就是成功了

除了NodePlayer.js外,還有一個(gè)播放器也可以使用,那就是flv.js,這里就不多做描述了