Ask Your Question
0

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

asked 2018-02-17 20:13:48 -0600

        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.
edit retag flag offensive close merge delete

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 ( 2018-02-17 23:10:50 -0600 )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 ( 2018-02-18 00:32:47 -0600 )edit

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

berak gravatar imageberak ( 2018-02-18 02:28:18 -0600 )edit

1 answer

Sort by ยป oldest newest most voted
1

answered 2018-02-18 05:27:00 -0600

berak gravatar image

updated 2018-02-18 05:31:38 -0600

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

edit flag offensive delete link more

Comments

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

Rampradeep K gravatar imageRampradeep K ( 2018-02-18 07:46:03 -0600 )edit

Question Tools

1 follower

Stats

Asked: 2018-02-17 20:13:48 -0600

Seen: 1,166 times

Last updated: Feb 18 '18