0

Need some help here although I've seen a lot of questions very similar with this, but I still cannot solve it. So, I have written a program from the server side that convert frame byte array (from Kinect RGB camera) to Base64 String format, and then I passed the String to the client side. In the client side, I got confused how to display the image on the canvas?

So, basically partial of my code is like this:

private static byte[] colorPixels;

static private void InitilizeKinect()
    {
        var sensor = KinectSensor.KinectSensors.SingleOrDefault(); 

        if (sensor != null)
        {
            sensor.ColorStream.Enable(ColorImageFormat.RgbResolution640x480Fps30);

            colorPixels = new byte[sensor.ColorStream.FramePixelDataLength];

            sensor.ColorFrameReady += SensorColorFrameReady;

            sensor.Start();
        }
}

static void SensorColorFrameReady(object sender, ColorImageFrameReadyEventArgs e)
    {

        if (!_serverInitialized) return;

        using (ColorImageFrame colorFrame = e.OpenColorImageFrame())
        {
            if (colorFrame != null)
            {
                colorFrame.CopyPixelDataTo(colorPixels);

                String json = Convert.ToBase64String(colorPixels);
                foreach (var socket in _clients)
                {
                    socket.Send(json);
                }

            }
        }
    }

I converted the colorstream frame byte array to Base64 string in order to pass it to the client side using JSON. There is no error and I can run the server and the client can receive the connection as well, but the canvas displays nothing. I do not know how to fill the image source.

Here is partial of my javascript:

 socket.onmessage = function (event) {
    if (typeof event.data === "string") {
        status.innerHTML = "Kinect RGB received.";

        // Get the data in JSON format.
        var jsonObject = JSON.parse(event.data);

    var img = new Image();
    img.onload = function () {
    context.drawImage(img, 0, 0);
    }
    img.src = ??????

    }
};

Any answer related will be appreciated. thanks! :D

user3423299
  • 15
  • 3
  • possible duplicate of [Base64 png data to html5 canvas](http://stackoverflow.com/questions/4409445/base64-png-data-to-html5-canvas) – ReeCube Mar 17 '14 at 08:07

1 Answers1

0

This should work:

socket.onmessage = function (event) {
    if (typeof event.data === "string") {
        status.innerHTML = "Kinect RGB received.";

        // Get the data in JSON format.
        var jsonObject = JSON.parse(event.data);

        var img = new Image();
        img.onload = function () {
            context.drawImage(img, 0, 0);
        }
        img.src = "data:image/  png;base64," + jsonObject.REPLACETHIS;
        // you have to replace 'REPLACETHIS' by the name of your base64 image data
    }
};
ReeCube
  • 2,545
  • 17
  • 23
  • Thanks for your answer! btw, how can I know the name of the base64 image data? because I passed the image from the Kinect camera. – user3423299 Mar 17 '14 at 11:47
  • I see~ umm.. I mean this one "you have to replace 'REPLACETHIS' by the name of your base64 image data" what does that mean? – user3423299 Mar 17 '14 at 12:02
  • how do you recive your image? – ReeCube Mar 17 '14 at 12:07
  • from the Kinect camera. so, I have colorPixels as a byte array. It receives data from colorFrame.CopyPixelDataTo(colorPixels). And then I convert this frame byte array to Base64 String and send it using json. So now I wanted to display it on the canvas. Actually what I am doing is live streaming from Kinect RGB camera. I reach this solution by researching. I also read about bitmap, but I couldn't make the image/video displays on the web browser. – user3423299 Mar 17 '14 at 12:28
  • so replace 'REPLACETHIS' with the string you recived from server in json format – ReeCube Mar 17 '14 at 12:29