2012-11-10 python javascript image capture camera
Пример получения изображения с веб камеры через браузер (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()