1. 实现方式
- 首先传统的视频实时传输是由设备视频流->流媒体服务器->客户端界面组成的。
- 设备视频流
一般是屏幕流，网络摄像头，电脑摄像头或者是一些本地的视频文件等组成。
- 流媒体服务器
我这里用的是node-media-sever这个插件去搭建一个流服务器，作为视频流的中转站，比如推流跟拉流都需要跟流媒体服务器进行打交道
- 客户端界面
通过访问流服务器暴露的http接口拉取流媒体服务器的视频
- 代码实现
- 流服务器搭建
npm i node-media-server //流媒体服务器插件const NodeMediaServer = require('node-media-server');
const config = {
rtmp: {
port: 1935,
chunk_size: 60000,
gop_cache: true,
ping: 60,
ping_timeout: 30
},//配置rtmp服务器，用于设备推流
http: {
port: 8000,
allow_origin: '*'
}//配置http服务器，用于客户端拉流
};
var nms = new NodeMediaServer(config)
nms.run();//启动流媒体服务器访问http://localhost:8000/admin，可以进入流媒体服务器的后台，可查看当前推流节点跟拉流节点
- 服务端推流代码
npm i fluent-ffmpeg //推流工具const { exec } = require('child_process');//用于创建一个子进程
// RTMP 服务器地址和流名称
const rtmpServer = 'rtmp://192.168.3.12:1935/live';
const streamKey = 'home';
// 执行命令获取屏幕流
const command = `ffmpeg -f avfoundation -capture_cursor 1 -i 1 -vf "crop=in_w:in_h-100" -c:v libx264 -pix_fmt yuv420p -preset ultrafast -f flv ${rtmpServer}/${streamKey}`;
const child = exec(command);
child.stderr.on('data', (data) => {
console.error(`stderr: ${data}`);
});
child.on('close', (code) => {
console.log(`child process exited with code ${code}`);
});- 客户端拉流代码
<!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://192.168.3.12:8000/live/home.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
</body>
</html>