Accessing the iPhone camera in iOS Safari on Node-Red Dashboard 2.0

Dashboard
,
1

Hello everyone,

I'm trying to access the camera of iPhone(iOS 17) in safari with a web app I'm building on Node-Red(v3.1.3) (Node.js v20.11.0). What I want to do is to display camera feed on Dashboard 2.0 and be able to take a picture, record video and store them in the server. I am using the code shared in this StackOverflow question in a ui-template node.

So far I'm able to implement this code in Node-Red and it works on PC Chrome. Chrome asks me to enable the camera for the dashboard and if I allow I can view the camera output. But when I try to use same dashboard on iPhone Safari, I cannot see the camera display. It doesn't even ask for my permission to use the camera. By the way when I open the CodePen link shared in the StackOverflow question on my iPhone, it actually works, so I know the code works fine. Can you help me find what's wrong?.

Below is the exported Node-Red flow I've built so far.

Thanks.

2

Have you tried: node-red-dashboard-2-ui-webcam (node) - Node-RED

It doesn't quite have all the functionality you need (doesnt allow for recording, although PRs/contributions I know are welcome), but it'll be quick to test and compare whether it works or not in Safari/iPhone

3

Thanks for the suggestion. I've just tried it. Result is the same as the code I've tried. It works on PC Chrome but does not work on iPhone Safair or Chrome. When I click on camera icon on the ui-webcam ui element in the dashboard nothing happens. I think something common causes both node and the ui-template code not to work.

4

Are you accessing over HTTPS and have valid certs?

3 Likes
5

I was not, thanks for pointing it out!. Now both ui-template and webcam node works on Safari when accesing over HTTPS. :grinning: :+1:

1 Like