obs+node-media-server+flv.js实现录播和直播
实现思路
- 下载obs软件,进行视频的录制
- 通过node-media-server开启一个服务,在obs中推流到该服务器
- 通过flv.js配合html5的video标签实现node-media-server中视频源的播放
node-media-server开启服务
- 新建一个空白的文件夹,执行
npm init
, 根据提示输入相关信息后,下载node-media-server
npm install node-media-server --save
- 新建一个入口文件index.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 index.js
如果看到下面的提示,表示我们已经成功开启node-media-server服务了
flv.js
flv.js是来自Bilibli的开源项目。它解析FLV文件喂给原生HTML5 Video标签播放音视频数据,使浏览器在不借助Flash的情况下播放FLV成为可能。具体的介绍请自行google哈,继续刚才的项目
- 新建一个index.html文件
<!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" width="100%" controls></video> <script> if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://localhost:8000/live/hello.flv' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } </script> </body> </html>