0

I am planning to use the camera to capture images stream and make it can be shown in the web, just like a live stream. I have done the client part and the server part can receive the base64 data of each captured image. Below is the server code and the message represents the base64 data. My question is that how can I transfer the "message" to html file so that it can be used as src to locate the images? THX.

let WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({ port: 3303 });

wss.on('connection', function (ws) {
    console.log('client is connected');
    ws.on('message', function (message) {
        wss.clients.forEach(function each(client) {
            client.send(message);
        });
        console.log(message);
    });
})

Below is the code of html file. What should I use to fill the "src" part?

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <img id="resImg" src = ""> </img>
</div>
<script src="jquery.min.js" ></script>
<script>
        let ws = new WebSocket("ws://127.0.0.1:3303/");
        ws.onopen = function(evt) {
            console.log("Connection open ...");
            ws.send("Hello WebSockets!");
        };

        ws.onmessage = function(evt) {
            $("#resImg").attr("src",evt.data);
            console.log( "Received Message: " + evt.data);
           // ws.close();
        };

        ws.onclose = function(evt) {
            console.log("Connection closed.");
        };

</script>
</body>
</html>
brucez23
  • 1
  • 1
  • 1
    `dynamic src from java files?` Where are the JAVA files? Or JAVA for that matter – mplungjan Sep 05 '22 at 09:06
  • The first block is the java file for the server. The "message" returns the base64 data of img, and I think the value of "message" should be in src='' in html file. The point is how to transfer it? – brucez23 Sep 05 '22 at 09:16
  • @brucez23 You mean `Javascript` not `Java`?! – Adnane Ar Sep 05 '22 at 09:20
  • 1
    @brucez23 Actually websock does the job for you, you'll only need to manipulate the DOM element at certain time. So in your case, instead of `console.log("Received message...")` you should do something like `img.src = evt.data` – Adnane Ar Sep 05 '22 at 09:24
  • Perhaps you mean this: https://stackoverflow.com/questions/11089732/display-image-from-blob-using-javascript-and-websockets – mplungjan Sep 05 '22 at 09:24

0 Answers0