本地摄像头转RTSP推流步骤
第一步 下载ffmpeg并配置环境变量
- 下载完之后，添加系统环境变量，在系统变量中配置地址。
第二步 利用开源的流媒体平台框架 EasyDarwin
下载后解压到本地，运行文件夹下的EasyDarwin.exe, 弹出下面窗口 保持着窗口不要关闭。
接着在浏览器输入127.0.0.1:10008 这个地址，出现下面图则说明启动成功了。
第三步 用ffmpeg来实现rtsp推流
打开cmd, 通过以下命令获取摄像头名称
ffmpeg -list_devices true -f dshow -i dummy
接着就是用上面的摄像头名称来实现推流了（重点）
ffmpeg -f dshow -i video="Integrated Camera" -c:v h264 -preset ultrafast -tune zerolatency -b:v 1000k -vf scale=1920:1080 -r 30 -f rtsp rtsp://127.0.0.1/test
推流完成后，cmd窗口如下图。
然后重新回到浏览器 127.0.0.1:10008 窗口，看到如下图说明推拉流成功了。
第四步，通过VLC打开上面rtsp地址
-
打开网络串流
-
正常打开
前端步骤
第一步: 安装 ffmpeg （上面已经实现）
第二步: 下载一份 jsmpeg.min.js
第三步: npm或yarn等安装node-rtsp-stream
用于启动rtsp推流, 安装后, 通过node启动下面代码的js文件。这里的rtsp一定要实时推流, 运行代码后, 终端这串码一直在动才是推流成功。通过VLC查看rtsp地址能不能正常播放。
const Stream = require("node-rtsp-stream");
new Stream({
name: 'rtsp',
streamUrl: 'rtsp地址',
wsPort: '8888',
ffmpegOptions: {
"-stats": "",
},
});
第四步: 页面上使用canvas, 通过 jsmpeg 推流将代码呈现到页面上
引入上面的 jsmpeg.min.js
注意：这里的端口要与上面wsPort的端口一致, 下述js代码要在页面加载完成后执行。
<canvas id="canvas"></canvas>
new window.JSMpeg.Player('ws://localhost:8888', {
canvas: document.getElementById('canvas'),
});
前端展示效果
详细代码如下
代码层级
server.js
const Stream = require("node-rtsp-stream");
new Stream({
name: "rtsp",
streamUrl: "rtsp://127.0.0.1/test",
wsPort: 8888,
ffmpegOptions: {
"-stats": "",
},
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./jsmpeg.min.js"></script>
<title>本地摄像头推流</title>
<style>
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<canvas id="canvas" style="width: 600px; height: 450px"></canvas>
</div>
<script>
new window.JSMpeg.Player("ws://localhost:8888", {
canvas: document.getElementById("canvas"),
});
</script>
</body>
</html>
