场景

Node-RED简介与Windows上安装、启动和运行示例：

Node-RED简介与Windows上安装、启动和运行示例_霸道流氓气质的博客-CSDN博客_nodered windows

Node-RED怎样导出导入流程为json文件：

Node-RED怎样导出导入流程为json文件_霸道流氓气质的博客-CSDN博客_怎么导出json文件

Node-RED安装图形化节点dashboard实现订阅mqtt主题并在仪表盘中显示温度：

Node-RED安装图形化节点dashboard实现订阅mqtt主题并在仪表盘中显示温度_霸道流氓气质的博客-CSDN博客

在上面的基础上，怎样访问电脑摄像头并截取进行预览。

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、节点管理-安装node-red-ui-webcam节点

2、设计流程如下

3、流程json数据

[{"id": "f4a4d8eab7935bc8","type": "tab","label": "流程 3","disabled": false,"info": "","env": []},{"id": "c428312d1f6165d1","type": "mqtt-broker","name": "mqtt","broker": "127.0.0.1","port": "1883","clientid": "","autoConnect": true,"usetls": false,"protocolVersion": "4","keepalive": "60","cleansession": true,"birthTopic": "","birthQos": "0","birthPayload": "","birthMsg": {},"closeTopic": "","closeQos": "0","closePayload": "","closeMsg": {},"willTopic": "","willQos": "0","willPayload": "","willMsg": {},"sessionExpiry": ""},{"id": "51eee50b4ec9422f","type": "ui_group","name": "dashboardDemo","tab": "29ae4c620f43ee0d","order": 1,"disp": true,"width": "6","collapse": false,"className": ""},{"id": "29ae4c620f43ee0d","type": "ui_tab","name": "Home","icon": "dashboard","disabled": false,"hidden": false},{"id": "a506c767a5c1edbd","type": "ui_base","theme": {"name": "theme-light","lightTheme": {"default": "#0094CE","baseColor": "#0094CE","baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited": true,"reset": false},"darkTheme": {"default": "#097479","baseColor": "#097479","baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited": false},"customTheme": {"name": "Untitled Theme 1","default": "#4B7930","baseColor": "#4B7930","baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"},"themeState": {"base-color": {"default": "#0094CE","value": "#0094CE","edited": false},"page-titlebar-backgroundColor": {"value": "#0094CE","edited": false},"page-backgroundColor": {"value": "#fafafa","edited": false},"page-sidebar-backgroundColor": {"value": "#ffffff","edited": false},"group-textColor": {"value": "#1bbfff","edited": false},"group-borderColor": {"value": "#ffffff","edited": false},"group-backgroundColor": {"value": "#ffffff","edited": false},"widget-textColor": {"value": "#111111","edited": false},"widget-backgroundColor": {"value": "#0094ce","edited": false},"widget-borderColor": {"value": "#ffffff","edited": false},"base-font": {"value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}},"angularTheme": {"primary": "indigo","accents": "blue","warn": "red","background": "grey","palette": "light"}},"site": {"name": "Node-RED Dashboard","hideToolbar": "false","allowSwipe": "false","lockMenu": "false","allowTempTheme": "true","dateFormat": "DD/MM/YYYY","sizes": {"sx": 48,"sy": 48,"gx": 6,"gy": 6,"cx": 6,"cy": 6,"px": 0,"py": 0}}},{"id": "248cbbb0.18e794","type": "ui_group","name": "MyGroup","tab": "3f79c420.cfc1bc","order": 1,"disp": true,"width": "6","collapse": false},{"id": "3f79c420.cfc1bc","type": "ui_tab","name": "Home","icon": "dashboard","disabled": false,"hidden": false},{"id": "a0954be5.a7f7e8","type": "ui_group","name": "MyInput","tab": "3f79c420.cfc1bc","order": 2,"disp": true,"width": "6","collapse": false},{"id": "508bd6f8398ab80f","type": "ui_group","name": "OpenWeatherMap","tab": "3f79c420.cfc1bc","order": 3,"disp": true,"width": "6","collapse": false},{"id": "8824dea1.83e31","type": "websocket-client","path": "ws://localhost:9898/","tls": "","wholemsg": "false"},{"id": "51c3503.61936b","type": "MySQLdatabase","name": "","host": "127.0.0.1","port": "3306","db": "test","tz": "","charset": "UTF8"},{"id": "89952106.631b3","type": "ui_group","name": "IFrame","tab": "5967b7da.b44598","order": 3,"disp": true,"width": "6","collapse": false},{"id": "5967b7da.b44598","type": "ui_tab","name": "Home","icon": "dashboard","order": 1,"disabled": false,"hidden": false},{"id": "531fcba07de311b5","type": "ui_group","name": "Image","tab": "5967b7da.b44598","order": 2,"disp": true,"width": "6","collapse": false},{"id": "4d266930e254e1ee","type": "ui_group","name": "WebCam","tab": "5967b7da.b44598","order": 1,"disp": true,"width": "10","collapse": false},{"id": "2855a617781cded9","type": "ui_group","name": "WebCam","tab": "5967b7da.b44598","order": 1,"disp": true,"width": "10","collapse": false,"className": ""},{"id": "96ec2b1fa3684c6b","type": "ui_webcam","z": "f4a4d8eab7935bc8","name": "","group": "2855a617781cded9","order": 0,"width": "8","height": "6","countdown": false,"autoStart": false,"hideCaptureButton": false,"showImage": "2","mirror": true,"format": "png","x": 300,"y": 240,"wires": [["488b1488202928f5"]]},{"id": "488b1488202928f5","type": "image","z": "f4a4d8eab7935bc8","name": "","width": 160,"data": "payload","dataType": "msg","thumbnail": false,"active": true,"pass": false,"outputs": 0,"x": 480,"y": 240,"wires": []}
]

Node-RED中通过node-red-ui-webcam节点实现访问摄像头并截取照片预览相关推荐

layui列表显示缩略图_layui 表格中实现照片预览，点击查看原图
人员表格中实现照片预览,并且可点击放大.查看原图 js //定义列 var cols = [ [{ type: 'radio', width: 60 }, { type: 'numbers', wid ...
在报表(FastReport)中动态载入jpg照片,预览时所有的记录都显示的是一张照片
在报表(FastReport)中动态载入jpg照片,预览时所有的记录都显示的是一张照片 unit Unit1; interface uses Windows, Messages, SysUtils, ...
layui 表格中实现照片预览，点击查看原图
人员表格中实现照片预览,并且可点击放大.查看原图 <table id="dutyInfoTable" class="layui-hide">< ...
vue中使用gojs实例、包括调色板、线条流动、缩略预览、节点中实现分组、全屏，更换主题等实例
代码比较多,但是好在复制即可用,可以根据需求更改 HTML部分 <div class="editor-flowC-chart"><div id="myP ...
Vue中使用a标签实现点击在新标签页中打开实现照片预览
场景显示某抓拍系统的照片,在点击该照片后面的预览时,在新标签页中打开图片的网络URL地址. 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众 ...
webcam html5+PHP 实现网站调用摄像头拍照，存储照片和照片预览功能
1HTML <div><div id="camera" style="float: left"></div><div ...
C#照片预览，好处是图片不在项目中也可以查看
//在一个页面中添加image控件,后台指向一个新页面,在新页面获取图片的二进制流,再展现在页面上 <body> <div class="pNavigation&q ...
php拍照从手机相册中选择,微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例...
本文实例讲述了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法.分享给大家供大家参考,具体如下: 目前中js-sdk 1.0版本中,预览图片提供了2个接口,接口的定义参考官方文档 1.预览 ...
在Windows 7中的Windows Media Player 12中快速预览歌曲
Do you ever wish you could quickly preview a song without having to play it? Today we look at a quic ...

Node-RED中通过node-red-ui-webcam节点实现访问摄像头并截取照片预览

场景

实现

Node-RED中通过node-red-ui-webcam节点实现访问摄像头并截取照片预览相关推荐

最新文章

热门文章