Websocket video stream

General
1

Hello,

Thank you in advence for your help. I have just start with Node-RED. I have tried for 2 weeks to code to share the video of my Esp32 Cam.

I would like to get the video stream and to share it with 3 clients.

I tried with the Websocket, and I think it is ok to get the video via port 81 but I can not send the video to Client on a page web.

Sorry for my English ( I am French)

Have a nice day,

Sam

2

Hello,

Can you share some more details about what you’ve tried and how it failed please.

I would say a Websocket-in node in client mode to connect to the Camera and WebSocket-out node in server mode should work if you just need to forward WebSocket frames. You may need to delete some msg properties between the 2 nodes to make sure it works cleanly, but that should be it if it’s just a simple pipe you need.

My only concern would be what the message/frame rate is and having the write code in the webpage to decode the frames.

1 Like
4

Your code has been corrupted, as you have not used the correct process.

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil: icon.

See this post for more details - How to share code or flow json

5

If I remember correctly, the default firmware for the esp32-cam allows just one client at a time so this might be the actual problem you are experiencing

There is other firmware you can find & flash that will allow multiple cilent connections

6

Hello, sorry I was out this weekend.

Of course, here is my json code :

[{"id":"4f45bd28.fe7ea4","type":"http in","z":"310ea8f8.e72128","name":"","url":"/stream","method":"get","upload":false,"swaggerDoc":"","x":230,"y":120,"wires":[["1db9868.3f9a7fa","2a94f37ec98316e7"]]},{"id":"fc8f27e5.3f4af","type":"http response","z":"310ea8f8.e72128","name":"","statusCode":"","headers":{},"x":630,"y":120,"wires":[]},{"id":"1db9868.3f9a7fa","type":"template","z":"310ea8f8.e72128","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"plain","template":"<html>\n<head>\n    <title>Streamer</title>\n</head>\n<body>\n    <video autoplay></video>\n    <script>\n        // get video dom element\n        const server = window.location.hostname;\n        const video = document.querySelector('video');\n        \n        // request access to webcam\n        navigator.mediaDevices.getUserMedia({video: {width: 360, height: 240}}).then((stream) => video.srcObject = stream);\n        \n        // returns a frame encoded in base64\n        const getFrame = () => {\n            const canvas = document.createElement('canvas');\n            canvas.width = video.videoWidth;\n            canvas.height = video.videoHeight;\n            canvas.getContext('2d').drawImage(video, 0, 0);\n            const data = canvas.toDataURL('image/png');\n            return data;\n        }\n\n        const WS_URL = `ws://${server}:1880/ws/cam`;\n        console.log(WS_URL);\n        const FPS = 10;\n        const ws = new WebSocket(WS_URL);\n        ws.onopen = () => {\n            console.log(`Connected to ${WS_URL}`);\n            setInterval(() => {\n                ws.send(getFrame());\n            }, 1000 / FPS);\n        }\n    </script>\n</body>\n</html>","output":"str","x":460,"y":160,"wires":[["fc8f27e5.3f4af"]]},{"id":"15b57638.12e582","type":"websocket in","z":"310ea8f8.e72128","name":"","server":"524d85f.8ebbc7c","client":"","x":230,"y":220,"wires":[["63433a007dae4ca1"]]},{"id":"e7cc856b.d2f17","type":"comment","z":"310ea8f8.e72128","name":"http://192.168.1.97:81/stream>","info":"Go to <http://192.168.1.97:81/stream>","x":290,"y":60,"wires":[]},{"id":"2a94f37ec98316e7","type":"debug","z":"310ea8f8.e72128","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":540,"y":40,"wires":[]},{"id":"63433a007dae4ca1","type":"debug","z":"310ea8f8.e72128","name":"debug 3","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":520,"y":280,"wires":[]},{"id":"524d85f.8ebbc7c","type":"websocket-listener","path":"/ws/cam","wholemsg":"false"}]

Today, I can use VLC to read the video on this http.

Thank you in advance,

Regards,

Samuel

7

Hello,

Yes you are right only one client at a time.

This is for this reason I woukd like to share this video with Node-Red via WebSocket.

Samuel

8

Just dumping your current flow isn’t all that helpful.

You need to also explicitly explain how you tested it and how it failed.

Also understand that most (if not all) of us here probably do not have the hardware to test any of it locally.

9

I don’t think that will work either. With that you are not creating a video server that is able to serve multiple clients. I assume you would just forward the underlying url so you would end up with the same limitation. What you would need to do is to use a video server sw that connects to the camera and then is able to serve multiple clients with a video that is provided by the server itself. But easier would be to get that other fw for the esp32-cam (I think the one I use can serve 10 clients simultaniously)

10

Hello,

I understand but it is my first project and I used an example.

My first problem is when I look at debug 2 I have no message. I am not sur that it is normal.

My first bloc is http in with GET and http://192.168.1.97:81/stream for URL.

Please, could you tell me if it is ok and if I have to get information in debug 2 ?

Thank you.

Sam

11

Hello,

Thank you for your help.

But could you share me your program with esp32-cam ? Because I didn’t know it will be possible to do that driectly with Arduino IDE.

Thank you,

Sam

12

Did you try doing a Google search with something like code for esp32-cam multi user

1 Like
13

My first problem is when I look at debug 2 I have no message. I am not sur that it is normal.

By default debug nodes only show the value of msg.payload and HTTP GET request do not have a payload, so you will only see an empty message when you point a browser at http://localhost:1880/stream

If you configure the node to show the whole message object you will see more, but it will just be details about the request from the browser.

14

Here is the example with the ESP32-CAM w multiple client supported FW. I just added the same camera 10 times just to demonstrate. The only thing you need in Node-RED is a simple code like below in the dashboard ui template node and then other clients can use the same url (or hey can access the camera url directly if you like)

I assume your clients are on your local network and not accessing via internet? Otherwise you have a challenging security setup in front of you

image
image1833Ă—649 146 KB

image

<!DOCTYPE html>
<html>
<style>
    img {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 2px;
        width: 320px;
        height: 240px;
    }
</style>

<center>
    <table>
        <!-- put the link address of your cam in this line: -->
        <tr>
            <!-- Row 1 -->
            <td style="text-align: center"><img src="http://192.168.0.160/mjpeg/1" id="c31" /></td>
        </tr>
    </table>
</center>

</html>
2 Likes