node-red-contrib-web-components
Some Node-red nodes and web components that make integrating some aspects of web sites with Node-red a little easier.
How does it work?
Each Node-RED node has a corresponding web component that handles the UI and interaction between the two across the network.
The rationale for this can be found here.
For example, if you want to use a camera in a web page, you can drag the component-camera node onto your Node-RED flow, configure it to have a unique name (camera1), and then add the following piece of markup to your page
<node-red-camera data-nr-name="camera1" data-nr-type="still"></node-red-camera>These two nodes are now linked by way of the unique name. When the web page is loaded, and the component initialised, any data created by that node (in this instance a video or still image) will be passed to the specific node in the Node-RED.
Quickstart
Having installed the node-red-contrib-web-components in your Node-RED instance through to Manage Pallete UI, follow the next steps.
- Copy the content of the
demo-flow.jsonfile in this repo. - Head to your Node-RED instance and create a new flow.
- Click on the hamburger nenu at the top-right corner of the screen and go to
import > Clipboardand paste the code you copied fromdemo-flow.json - Click on deploy and head to
https://YOUR_NODE_RED_INSTANCE_URL.com/wcdemo
Prerequisites for usage
Polyfill
Not all browsers support web components natively, but you can include the following shim/polyfills in the <head> of each web page that you use your components in to increase the availability of your chosen web components.
<script src="https://unpkg.com/@webcomponents/custom-elements"></script>
<script src="https://unpkg.com/@webcomponents/shadydom"></script>
Script Tags
To use each component, you need to first include a <script> tag in the <head> of your HTML document that contains the code for that component. For each component you wish to use there is an individual <script> tag required.
For example, the camera component will require
<script src="/web-components/camera"></script>You can also have an absolute URL if you have a cloud-based Node-RED instance, but that's not required <script src="http://node-red.blah/web-components/camera"></script>
<script src="/web-components/camera"></script>Available Nodes
Camera
Chatbot
Additional Nodes
Only the camera-component is currently complete, but I think the following as a minimum set will make it much easier to build web apps that integrate well with Node-RED nodes.
- A file selector
- An audio capture node for recording sound
- An output node for the server to send data to a client from within a Node-RED flow