久久派安装启用USB摄像头(基于node-red)
- 功能演示
- 1、安装必要的节点
- 2、程序讲解
- 1、启动摄像头
- 2、关闭摄像头
- 3、获取久久派IP
- 4、在UI界面显示摄像头内容
- 5、摄像头抓拍
- 3、部署
文中所需网盘资料及讲解视频在文章末尾哦1。
本章使用的摄像头插件请参考久久派安装启用USB摄像头(基于mjpg-streamer)。
功能演示
实现将mjpg-streamer捕获来自各种视频输入设备(如USB摄像头)的图像显示在node-red的UI 界面。可以实现打开摄像头、关闭摄像头、查看实时界面显示内容
1、安装必要的节点
首先在node-red节点管理里,检查是否安装node-red-dashboard、node-red-contrib-ip。没有安装的小伙伴们在节点管理里自行安装一下。
2、程序讲解
程序界面展示
1、启动摄像头
开启摄像头需要我们将开启摄像头的指令添加到exec节点中,exec节点是node-red中自带节点,可以运行系统命令并返回其输出。而作为开启摄像头的button节点实现在UI界面作为触发节点发送指令的功能。
exec节点中需要发送的指令如下
cd ~/mjpg-streamer/mjpg-streamer-experimental; ./mjpg_streamer -i "input_uvc.so -d /dev/video0" -o "output_http.so -w ./www -p 8080"
完成这一步之后,在UI界面点击打开摄像头按钮后可以在http://久久派IP:8080/javascript_simple.html
查看摄像头是否有打开成功。
2、关闭摄像头
关闭摄像头与打开摄像头同理,只需修改exec节点中的指令即可
pkill -9 mjpg_streamer
完成这一步之后,在UI界面点击关闭摄像头按钮后可以在http://久久派IP:8080/javascript_simple.html
查看摄像头是否有关闭。
3、获取久久派IP
在安装node-red-contrib-ip后使用节点ip可以获取当前设备的IP地址,值得注意的是,获取到的IP是当前使用的久久派的IP,并不是用来远程访问使用的当前电脑的IP。
为了简化输出的IP内容,我们将不需要的IPV6和public的选项全部取消,只输出Internal的IPv4。在ip节点后使用split节点对输出内容进行拆分,让msg.payload的输出内容只有我们需要使用的IP地址。
node-red-contrib-ip库安装不上的小伙伴也可以直接跳过此步骤继续往下看,使用固定写法来实现。
4、在UI界面显示摄像头内容
使用node-red-dashboard库中的template节点,在节点中编写html语言嵌套网页将http://久久派IP:8080/javascript_simple.html
界面的内容显示在UI界面。
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>嵌入网页</title><script>(function(scope) {scope.$watch('msg', function(msg) {if (msg) {var iframe = document.getElementById('myIframe');iframe.src = "http://" + msg.payload + ":8080/javascript_simple.html"}});})(scope);</script>
</head>
<body><iframe id="myIframe" src="" width="100%" height="600px" frameborder="0"></iframe>
</body>
</html>
其中最重要的就是将IP地址与播放界面的网址进行拼接。
iframe.src = "http://" + msg.payload + ":8080/javascript_simple.html"
以上使用的是通用写法,如果有小伙伴因为node-red-contrib-ip节点装不上可以直接将msg.payload设置为自己的久久派IP进行使用,例如:
iframe.src = "http://192.168.1.38:8080/javascript_simple.html"
5、摄像头抓拍
使用node-red-dashboard库中的template节点,实现将http://久久派IP:8080?action=snapshot
中的抓拍照片显示出来,并输出抓拍时间。
摄像头数据抓拍节点中的html代码如下:
<html><head><title>MJPG-Streamer - Static Example</title><script>(function(scope) {scope.$watch('msg', function(msg) {if (msg.topic == "time") {document.getElementById('messagePayload').textContent = "抓拍时间:"+new Date(msg.payload);var iframe = document.getElementById('pic');iframe.src = iframe.src; // 通过重新设置src属性来刷新iframe}else{var iframe = document.getElementById('pic');iframe.src = "http://" + msg.payload + ":8080?action=snapshot";}});})(scope);</script>
</head>
<body><center><img id="pic" src="" alt="This is a static snapshot" /><p id="messagePayload"></p></center>
</body>
</html>
抓拍时使用button节点,并在节点中设置topic为time,payload为当前时间,使得template节点的在判断到抓拍按钮按下后,更新当前时间,并刷新src
if (msg.topic == "time") {document.getElementById('messagePayload').textContent = "抓拍时间:"+new Date(msg.payload);var iframe = document.getElementById('pic');iframe.src = iframe.src; // 通过重新设置src属性来刷新iframe}
同样的,如果有小伙伴因为node-red-contrib-ip节点装不上可以直接将msg.payload设置为自己的久久派IP进行使用,例如:
iframe.src = "http://192.168.1.38:8080?action=snapshot"
3、部署
点击右上角“部署”,然后打开dashboard界面,地址:http://久久派ip:1880/ui
即可查看界面。
想直接看效果的小伙伴可以将网盘中的
05安装配置USB摄像头(基于node-red)/flows.json
文件进行直接导入进来。
百度网盘链接;123网盘链接(提取码:qIq1) ;某站讲解视频链接 13:50分开始 ; ↩︎