放一下效果图
PC端
PC端.png
移动端
移动端.png
这里我们就当一些基础的准备工作已经做好,直接开始直播实现
1. 技术准备
- node:
nodeMediaServer(用来接收流的服务器)
NodePlayer.js(视频播放器)
- ffmpeg: 推流
2. node
服务端
-
Node-Media-Server
我们用它来做流媒体服务器
首先我们先搭建起来
mkdir nms
cd nms
npm install node-media-server
vi app.js
const NodeMediaServer = require('node-media-server');
const config = {
rtmp: {
port: 1935, // rtmp服务端口为1935
chunk_size: 60000,
gop_cache: true,
ping: 30,
ping_timeout: 60
},
http: {
port: 8000, // http-flv的服务端口为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
最后将服务运行起来
node app.js
出现这个则说明我们运行成功了
运行成功.png
- 客户端播放器
NodePlayer.js
使用方法可以直接看git上作者的demo,浅显易懂
DEMO
直接复制将websocket地址修改即可
注:我们为什么用websocket的方式播放,因为直接播放rtmp流的话需要用到flash, flash在PC端上可以播放,但是在移动端却不能播放,这款插件是跟Node-Media-Server配套的一款视频播放插件,在上面的Node-Media-Server启动成功的截图中我们也看到了websocket服务端口开启成功的提示,这款插件他就是通过将rtmp转arraybuffer的方式, 用websocket传输给前端,前端通过canvas显示视频的方式来展示我们的流,这样的好处在于兼任各种平台,PC端移动端,公众号以及各种小程序
3. ffmpeg摄像头推流
ffmpeg -re -i /dev/video0 -f flv -vcodec libx164 rtmp://你的推流地址:1935/live/v1
-vcodec libx164
这个很重要,之前我因为缺少这个参数导致websocket跟http-flv方式播放流失败,因为flv播放流需要h264格式, 所以我们加上这个就可以了
4.最后我们访问NodePlayer播放器页面
image.png
出现这个画面就是成功了
除了NodePlayer.js外,还有一个播放器也可以使用,那就是flv.js,这里就不多做描述了
