First time here? Check out the FAQ!

Ask Your Question
0

Converting cv.Mat data to mkv format via opencv.js

asked Feb 18 '18

        I am developing a browser based application using opencv.js similar to https://docs.opencv.org/trunk/dd/d00/tutorial_js_video_display.html. Need help on converting the obtained src into mkv format via opencv.js. Once coverted, the mkv data will be sent to a remote server on the aws cloud.
Preview: (hide)

Comments

1

that won't work, unfortunately opencv has no means to do that in js

(video compression is handled via extern ffmpeg or gsreamer libraries)

berak gravatar imageberak (Feb 18 '18)edit

Thanks. Do you have samples on how to send the cv.mat data from javascript to a remote server and do the conversion?

Rampradeep K gravatar imageRampradeep K (Feb 18 '18)edit

no i don't, but that might be possible (XHTTPRequest, canvas.toDataURL())

berak gravatar imageberak (Feb 18 '18)edit

1 answer

Sort by » oldest newest most voted
1

answered Feb 18 '18

berak gravatar image

updated Feb 18 '18

it turned out to be surprisingly easy. -- grab a base64 encoded data url from the canvas, and send it home via XmlHTTPRequest. to use it with opencv.js, you'll have to imshow() your Mat to the "output" canvas. here's some html/js:

<!DOCTYPE html>
<html><head>
<script type='text/javascript'>
  var ticks=0;
  var myServer="http://localhost:9000/"

  function draw() { // demo code to fill the canvas
    var c = document.getElementById("output");
    var ctx = c.getContext("2d");
    ctx.clearRect(0,0,300,200);
    ctx.font = "30px Arial";
    ctx.fillText("Hello World " + ticks,10,50);
    ticks ++;

    postCanvasToURL(myServer);
  }

  function postCanvasToURL(url) { // this is the actual workhorse
    var type = "image/png"
    var data = document.getElementById("output").toDataURL(type);
    data = data.replace('data:' + type + ';base64,', ''); //split off junk at the beginning

    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
    xhr.send(data)
  }
</script></head>
<body onload="setInterval(draw, 2000);">
  <canvas id="output" width=300 height=200 style="max-width: 100%"></canvas>
</body></html>

and a corresponding (python27) server, that just saves it to disc:

#!/usr/bin/python
import base64

def application(environ, start_response):
    try:
       request_body_size = int(environ.get('CONTENT_LENGTH', 0))
       request_body = environ['wsgi.input'].read(request_body_size)

       data = base64.b64decode(request_body)
       f = open("my.png","wb")
       f.write(data)
       f.close()
    except (ValueError):
       pass

    start_response('200 OK', [('Content-Type', 'text/html'), ('Content-Length', '5')])
    return ["dummy"]

if __name__ == '__main__':
    from wsgiref.simple_server import make_server
    httpd = make_server('localhost', 9000, application)
    while True: httpd.handle_request()

pic, or it did not happen ;)

image description

Preview: (hide)

Comments

Thanks. I will try this out and let you know.

Rampradeep K gravatar imageRampradeep K (Feb 18 '18)edit

Question Tools

1 follower

Stats

Asked: Feb 18 '18

Seen: 1,174 times

Last updated: Feb 18 '18