How to use webcam

Hello everyone, i don't know if this question goes here, but i hope to find some guidance in this forum.

I'm trying to stream the captured webcam image on the browser and i've got this code from some post and i've got it working on this jsfiddle:

https://jsfiddle.net/4jg36Lr2/

and when i try to do the same on node-red, ussing the template node it does not work

code on NR: https://pastebin.com/Z8136yNX

what am i doing wrong?

Hi Andres, your code works for my Node-Red, did you give permissions to your browser, to your Node-Red address permissions to use the camera?

I have tried things like that on node-red, and after many attempts I managed to get up to a video player on canvas, even make a recording and download it

It never ask for permission, and on console throws this:

prueba2:35 Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
at init (prueba2:35)
at prueba2:46

referencing to this line: errorMsgElement.innerHTML = 'navigator.getUserMedia error:${e.toString()}';

and highlight this: = 'navigator.getUserMedia error:${e.toString()}';

What browser are you using?
In chrome it works perfectly. In firefox you have to look at compatibility issues. I think the code is specified for chrome.
I hope this website helps you, mozilla gave me a lot of problems when using the webcam
I hope these links help you a little

https://www.html5rocks.com/en/tutorials/video/basics/

https://www.youtube.com/watch?v=n9gFQ0QKYB8

I'm using chrome, and actually in firefox works for me. Does the non https has something to do with this?

The code is correctly done, the problem is probably some configuration of your browser. I had this problem with firefox, granted permission to use the camera and it works correctly. If your chrome doesn't have camera permits, be sure to give them to them

Hi Andres,

Here it works for me also when I use a Template node for my dashboard (in Chrome) ...

It asks me nicely whether it is allowed to use my microphone and webcam:

image

Are you sure you have used the correct Template node, i.e. the one for the dashboard:

[{"id":"1ee47625.5a7ffa","type":"ui_template","z":"60ad596.8120ba8","group":"2e442781.0c5608","name":"","order":5,"width":0,"height":0,"format":"<!-- Stream video via webcam -->\n<div class=\"video-wrap\">\n    <video id=\"video\" playsinline autoplay></video>\n</div>\n\n<!-- Trigger canvas web API -->\n<div class=\"controller\">\n    <button id=\"snap\">Capture</button>\n</div>\n\n<!-- Webcam video snapshot -->\n<canvas id=\"canvas\" width=\"640\" height=\"480\"></canvas>\n\n<script>\n    'use strict';\n    \n\tconst video = document.getElementById('video');\n    const canvas = document.getElementById('canvas');\n    const snap = document.getElementById(\"snap\");\n    const errorMsgElement = document.querySelector('span#errorMsg');\n\n    const constraints = {\n      audio: true,\n      video: {\n        width: 1280, height: 720\n      }\n    };\n\n    // Access webcam\n    async function init() {\n      try {\n        const stream = await navigator.mediaDevices.getUserMedia(constraints);\n        handleSuccess(stream);\n      } catch (e) {\n        errorMsgElement.innerHTML = 'navigator.getUserMedia error:${e.toString()}';\n      }\n    }\n\n    // Success\n    function handleSuccess(stream) {\n      window.stream = stream;\n      video.srcObject = stream;\n    }\n\n    // Load init\n    init();\n\n    // Draw image\n    var context = canvas.getContext('2d');\n    snap.addEventListener(\"click\", function() {\n            context.drawImage(video, 0, 0, 640, 480);\n    });\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":360,"y":340,"wires":[[]]},{"id":"2e442781.0c5608","type":"ui_group","z":"","name":"Hikvision","tab":"4779176.99cd2e8","disp":true,"width":"6","collapse":false},{"id":"4779176.99cd2e8","type":"ui_tab","z":"","name":"Camera","icon":"dashboard","disabled":false,"hidden":false}]

Question of of curiosity. I see great potential in capturing the dashboard's webcam and microphone signal and send both audio and video data to your Node-RED flow. But your example captures the webcam and microphone, but plays both again on the same machine (i.e. the pc where the dashboard is being displayed). Is there an existing use case for that, or is it just an experiment to get started?

sorry for the delay in the answer. about the permissions, chrome is not asking for them, but if i use the same code in another page, like jsfiddle, works fine. i'm thinking about the non https.

@BartButenaers the potential that i need is to read barcodes with any webcam, so if there is a way to do that, it would be great.

Andrés