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.
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 ;)
Asked: 2018-02-17 20:13:48 -0600
Seen: 1,173 times
Last updated: Feb 18 '18
that won't work, unfortunately opencv has no means to do that in js
(video compression is handled via extern ffmpeg or gsreamer libraries)
Thanks. Do you have samples on how to send the cv.mat data from javascript to a remote server and do the conversion?
no i don't, but that might be possible (XHTTPRequest, canvas.toDataURL())