Streaming IMAGE to CANVAS

[STOPCHEMTRAILS Fred]

So I'm trying to use UDP via WiFi to send image and render them into canvas...

This is what the SENDER app look like:

var width = 320;

var height = 240;

function OnStart()

{   

app.SetOrientation( "Landscape" );

 

    app.PreventScreenLock( true );

    

lay = app.CreateLayout( "Frame", "Horizontal,FillXY" );

   

cam = app.CreateCameraView( 1, 1, "QVGA,UseBitmap,NoRotate" );

cam.SetOnReady( cam_OnReady );

lay.AddChild( cam );  

app.AddLayout( lay );

net = app.CreateNetClient( "UDP" );

address = net.GetBroadcastAddress();

app.ShowPopup(address);

port = 19700;

    

    app.SetDebugEnabled( true );

}

function cam_OnReady()

{

cam.StartPreview();

ProcessImage();

}

function ProcessImage()

{

    rawData = cam.GetPixelData( "RawBase64", 0,0, width,height );

    net.SendDatagram( rawData, "UTF-8", address, port );

    

    setTimeout( ProcessImage, 2000 );

}

//Open a UDP broadcast to every device connected to wifi, then take the image from cameraview and encode it base64...

The RECEIVER look like this:

var width = 320;

var height = 240;

function OnStart()

{

lay = app.CreateLayout( "Linear", "FillXY" );

glview = app.CreateGLView( 1, 1, "Fast2d" );

lay.AddChild( glview );

    

app.AddLayout( lay );

net = app.CreateNetClient( "UDP" );

address = net.GetBroadcastAddress();

port = 19700;

setInterval( CheckImage, 200 );

}

function CheckImage()

{

var rawData = net.ReceiveDatagram( "UTF-8", port, 1 );

if( rawData ) 

{ 

        var uInt8Array = new Uint8Array( width*height*4 );

        var byteChars = atob( rawData );

        var size = width*height*4;

        for( var i=0; i<size; i++ )

        uInt8Array[i] = byteChars.charCodeAt(i);

        var image = { width:width, height:height, data:uInt8Array };

        glview.DrawImage( image, 0, 0, 1, 1 );

}

}

//Capture rawData from broadcast and convert it into html format then try to render into a fast canvas...

I think it should work, but in debugmode I see that the messagge is to long to be sent via UDP, should I split it into shorter words? How can I overcome that?

[Dave Smart]

Did you try the example posted here like I suggested?

https://groups.google.com/d/msg/androidscript/KqY5e0T9-Qw/Lxe87jUJBPsJ

It breaks up the image into parts so that each part will fit into a UDP packet, like this:-

//Extract and broadcast image data.

function BroadcastImage()

{

    //Get raw camera pixel data.

    var rawData = cam.GetPixelData( "jpgbase64", 0,0, width,height );

    

    //Transmit image over udp in chunks.

    //Note: we include a chunk number with each chunk.

    var chunksize = Math.round(rawData.length/numChunks); 

    for( var i=0; i<numChunks; i++ )

    {

        chunk = rawData.substr( i*chunksize, chunksize );

        var chunkNum = (i<10?"0"+i:i);

        net.SendDatagram( chunkNum+"|"+numChunks+"|"+chunk,"UTF-8",address,port );

        app.Wait( 0.004 );

    }

    

    //Call this function again ASAP.

    setTimeout( BroadcastImage, 0 );

}

[Dave Smart]

You also might want to take a look at this:-

http://www.webrtc.org/

I've not tried it on an Android Phone, but it might work on Kitkat / Lollipop devices.

[STOPCHEMTRAILS Fred]

Thanks mate! :D I'll try for sure ;)

[STOPCHEMTRAILS Fred]

any difference between jpgbase64 or rawbase64? 

[Dave Smart]

The difference is simply that jpgbase64 is compressed to jpeg and then encoded as base64, whereas rawbase64 is just base64 encoded.  

So jpgbase64 will be smaller and more efficient to transmit but slightly lossy (+something must be able to decompress the jpeg at the other end)