pass image pixel data from javascript to c++ CEF

[thunderbird]

I am trying to pass the imagedata of a canvas from JavaScript to c++ using the below JavaScript code.

Code: Select all

 var imageData = context.getImageData((canvasWidth,canvasHight,500,500);
    var data = imageData.data;
    window.cpp.func(data,canvasWidth,canvasHight);

The argument I am receiving in the

Code: Select all

 bool ClientHandler::Execute(const CefString& name, CefRefPtr<CefV8Value> object, const CefV8ValueList& arguments, CefRefPtr<CefV8Value>& retval, CefString& exception)

funtion is of type 'object'. How do i convert this argument to an array of type unsigned int?

[magreenblatt]

You can convert it to an array using JavaScript. See for example http://stackoverflow.com/questions/1941 ... alues-with.

[thunderbird]

You can convert it to an array using JavaScript. See for example http://stackoverflow.com/questions/1941 ... alues-with.

this turns out to be very slow.

Code: Select all

         long long arrayLength = arguments[0]->GetArrayLength();

         unsigned char * raw = new unsigned char[arrayLength];

         for (int i = 0; i < arrayLength; i++)
         {
            raw[i] = arguments[0]->GetValue(i)->GetUIntValue();
         }

The for loop in the above snippet is really slow. Is there a better way of achieving the above?

[magreenblatt]

What is the use case that you're trying to implement?

[thunderbird]

i am trying to pass the pixel data of a canvas element from JavaScript to c++,process the received image using native image processing libraries and send it back to display it on another canvas.

[magreenblatt]

You'll likely be better off base64 encoding the data and passing it to a custom scheme handler via XMLHttpRequest.

Custom scheme handler: https://code.google.com/p/chromiumembed ... me_Handler
Passing canvas data via XMLHttpRequest: http://stackoverflow.com/questions/1319 ... n-a-server

[thunderbird]

You'll likely be better off base64 encoding the data and passing it to a custom scheme handler via XMLHttpRequest.

Custom scheme handler: https://code.google.com/p/chromiumembed ... me_Handler
Passing canvas data via XMLHttpRequest: http://stackoverflow.com/questions/1319 ... n-a-server

will using a Custom scheme handler to send base 64 encoded image data be faster than simply sending the encoded string as a parameter to the native c++ function?
I am actually trying to continuously send frames from a video and process them and display them back in the browser.

[magreenblatt]

will using a Custom scheme handler to send base 64 encoded image data be faster than simply sending the encoded string as a parameter to the native c++ function?

If you're doing the processing in the browser process then likely yes. You can also base64 encode the image and process it in the renderer process by passing the encoded string to a bound JS function.

I am actually trying to continuously send frames from a video and process them and display them back in the browser.

Are you trying to process them in realtime? What frame rate do you need to achieve?

[thunderbird]

will using a Custom scheme handler to send base 64 encoded image data be faster than simply sending the encoded string as a parameter to the native c++ function?

If you're doing the processing in the browser process then likely yes. You can also base64 encode the image and process it in the renderer process by passing the encoded string to a bound JS function.

I am actually passing it to a bound JS function.

I am actually trying to continuously send frames from a video and process them and display them back in the browser.

Are you trying to process them in realtime? What frame rate do you need to achieve?

The base64 encoding and decoding is a lot faster than the array implementation but it still a little slow . I am actually capturing frames from a webcam, encode it in base64 format, pass it to the c++ function and process it.
I am not sure if my frame-rate calculation is accurate but when I capture and process the frames natively using c++ I get a frame-rate of around 10 to 15 frames per second. This drops to around 4 to 5 frames per second when I capture frames using JavaScript and process it at c++ side though I have some cleaning up to do in the code which should increase the fps by at least a couple of seconds.

Update 1:
When run from Visual Studio I am able to get a constant frame-rate of around 13-14 fps now which is pretty good performance wise in Release mode. In Debug mode I still get 4 to 6 FPS.
Update 2:
When run normally from the exe file, I get a frame rate of 27-29 which is good enough for what I am trying to achieve.