0

So i have a local image stream (through an eps32cam that streams images to a specific ip) that I then want to transfer to a canvas to display the RGB values. My problem is that other images work without problems only the images of the stream do not. It seems like nothing is drawn by the function drawImage() in that case.

Here is my code html code with JS (I apologize for my bad coding. I'm quite new to HTML and co.):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #canvas{
        background-color: blue;
    }
</style>

<body>
    <img src="http://192.168.137.10/" id="Image">
    <canvas id="canvas"></canvas>
    <p id="text">DATA</p>
    <p id="text1">DATA</p>

</body>
<script>

    function loop () {
        document.getElementById("Image").crossOrigin = "Anonymous";
        var rgbValuesNow = getRGBValues(document.getElementById("Image"));
        document.getElementById("text").innerHTML = "RGB Values: " + rgbValuesNow;
    }

    setInterval(loop,300);

    function getRGBValues(img) {
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext && canvas.getContext('2d'),
            rgbValues = [100,100,100], // Set a base colour as a fallback for non-compliant browsers
            pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel
            data;

        // return the base colour for non-compliant browsers
        if (!context) { alert('Your browser does not support CANVAS'); return rgbValues; }

        // set the height and width of the canvas element to that of the image
        var height = canvas.height = img.naturalHeight || img.offsetHeight || img.height,
            width = canvas.width = img.naturalWidth || img.offsetWidth || img.width;

        context.drawImage(img, 0, 0,);
        try {
            data = context.getImageData(0, 0, width, height);
        } catch (e) {
            // catch errors - usually due to cross domain security issues
            alert(e);
            return rgbValues;
        }

        data = data.data;
        length = data.length;
        rgbValues[0] = countColorValue("red", data);
        rgbValues[1] = countColorValue("green", data);
        rgbValues[2] = countColorValue("blue", data);
        return rgbValues;
    }

    function countColorValue(color, imageData) {
        let colorValue = 0;
        if (color == "red") {
            for (let i = 0; i < imageData.length; i = i + 4) {
                colorValue = colorValue + imageData[i];
            }
        }
        else if (color == "green") {
            for (let i = 1; i < imageData.length; i = i + 4) {
                colorValue = colorValue + imageData[i];
            }
        }
        else if (color == "blue") {
            for (let i = 2; i < imageData.length; i = i + 4) {
                colorValue = colorValue + imageData[i];
            }
        }
        return colorValue;
    }
</script>

</html>

I'm not sure it might be some issue with "crossOrigin". However, I'm pretty much clueless.Thanks in advance :)

Anonym
  • 1
  • 1
  • In what format is sent the image? Is it is displayed correctly in the ``? Add an `onload` and an `onerror` event handlers on your `img`, check if any fires. Note that only the first image of a JPEG stream will get rendered on the canvas. If you need to render following images, you must fetch it again entirely, e.g. by appending a `"?=" + Math.random()` query param to the src's URL. – Kaiido Jun 07 '23 at 04:50
  • How exactly should i append this to src? Btw. yep image stream gets displayed correct. The stream works out perfectly. – Anonym Jun 07 '23 at 14:05
  • And what format is this? As for the query-param add it at the end of the url, so `img.src = YOUR_URL + "?n=" + Math.random()`, and you do that at some interval, e.g you can hook to `img.onload = e => img.src...` or even wrap it in some `setTimeout` to avoid doing too many requests (but that will do a lot anyway). The best would be to have your cam output a video stream instead if possible, or to set up a middleware on your server that does reencode the cam stream to a video stream. – Kaiido Jun 07 '23 at 14:16
  • Format should be JPEG. So i included a few things as you said this is my code rn: – Anonym Jun 07 '23 at 14:26
  • ```function loop() { img = document.getElementById("Image"); img.src = "http://192.168.178.67/" + "?n=" + Math.random(); img.onload = function () { alert("image loaded"); img.crossOrigin = "Anonymous"; var rgbValuesNow = getRGBValues(document.getElementById("Image")); document.getElementById("text").innerHTML = "RGB Values: " + rgbValuesNow; }; img.onerror = function(){ alert("Image not fully loaded!") }; } setInterval(loop, 300);``` – Anonym Jun 07 '23 at 14:26
  • sry i have no clue how to fix this weird illustration. I tired this code and i just get no alert at all. No error! Not loaded. Moreover its still not working :( – Anonym Jun 07 '23 at 14:29
  • do you know by any chance how to reencode this jepg stream into a video element? – Anonym Jun 07 '23 at 14:42

0 Answers0