Захват изображения с камеры на javascript и сохранение на сервер

Пример получения изображения с веб камеры через браузер (javascript), и передачи его на сервер.

static/

<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var canvas = $("#canvas")[0],
	context = canvas.getContext("2d"),
	video = $("#video")[0],
	videoObj = { "video": true },
	errBack = function(error) {
		console.log("Ошибка видео захвата: ", error.code);
	};

	// Подключение потока
	if(navigator.getUserMedia) {
		navigator.getUserMedia(videoObj, function(stream) {
			video.src = stream;
			video.play();
		}, errBack);
	} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
		navigator.webkitGetUserMedia(videoObj, function(stream){
			video.src = window.webkitURL.createObjectURL(stream);
			video.play();
		}, errBack);
	}

	// Получение и отправка изображения
	$('#snap').click(function() {
		  context.drawImage(video, 0, 0, 320, 240);
		  $.post('/', { img : canvas.toDataURL('image/jpeg') });
	})
})
</script>
</head>
<body>
	<video id="video" width="320" height="240" autoplay></video>
	<canvas id="canvas" width="320" height="240"></canvas>
	<br/> <button id="snap">Сфоткаться</button>
</body>
</html>

from tornado import web, ioloop

import re
import base64
data_fetch = re.compile('data:image/(png|jpeg);base64,(.*)$')

class MainHandler(web.RequestHandler):
    def get(self):
        self.finish(open('static/', 'rb').read())
    def post(self):
        img = self.request.arguments.get('img')[0]
        d = data_fetch.match(img)
        itype = d.group(1)
        data64 = d.group(2)
        if data64 is not None and len(data64) > 0:
            buf = base64.b64decode(data64)
            open('uploads/image.'+itype, 'wb').write(buf)

application = web.Application([
    (r"/", MainHandler),
])

if __name__ == "__main__":
    application.listen(8888)
    ioloop.IOLoop.instance().start()

Home

Tags

Захват изображения с камеры на javascript и сохранение на сервер