Получение фото с android-смартфона прямо в html форму

Здравствуйте!

Возникла задача для интернет-магазина сфотографировать большое количество товаров. Специфика товара такова, что не столько важна красивая картинка, сколько особенности конструкции товара (с какой стороны находится шлейф, есть ли петли крепления и т.п.)

Фотографировать обычным фотоаппаратом, потом заливать фото на компьютер, искать каждый товар в админке, потом искать соответствующее фото, показалось очень долго. Гораздо проще открыть товар в админке и навести телефон на товар. Тем более, что при хорошо выставленном освещении, современные смартфоны выдают вполне качественную картинку.

Теория

В андроид-маркете лежит замечательная программа IpWebCam ^[1], которая позволяет превратить свой телефон в полноценную веб-камеру. Кроме того у нее есть api для получения фотографий с автофокусом. При запуске IpWebCam, на телефоне поднимается web-сервер, который позволяет с локальной машины по wi-fi получать текущий кадр с телефона по адресу вида 192.168.0.14:8080/shot.jpg

Идея была следующая:

Вставить в форму <img> с адресом фотографии со смартфона
Создать canvas и в него скопировать содержимое <img>
Сохранить данные при помощи canvas.toDataURL()
Отправить данные на сервер при помощи ajax

К сожалению, из-за кросс-доменных политик метод toDataURL() сохраняет только черный квадрат вместо изображения. Поэтому canvas надо создавать на том же домене, из которого берется изображение. Сходив на сайт программы ^[2], я узнал, что IpWebCam позволяет создавать собственные html-страницы на своем внутреннем сервере. Для этого их достаточно залить на sd-карту и указать программе, в какой папке их искать.

Алгоритм следующий:

На смартфоне создаем специальную страницу (например my.html)
В форме на нашем сайте создаем <iframe>, в который грузим html-страницу со смартфона.
На телефоне в html странице создаем canvas, в который грузим изображение с камеры.
Сохраняем данные при помощи canvas.toDataURL() в переменную
Передаем данные в родительскую страницу при помощи window.postMessage()
В родительской странице получаем изображение и отправляем данные на сервер при помощи ajax
На сервере сохраняем изображение в файл.

Решение

Во-первых, ставим на смартфон программу IpWebCam из маркета ^[1].

Создаем на смартфоне папку webcam, а в ней создаем файл my.html со следующим содержимым:

Content-Type: text/html

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jplayer.min.js"></script>
<script type="text/javascript" src="common.js"></script>
<style>
	* { margin: 0; padding: 0}
</style>
	
<script type="text/javascript">
$(loadJsWindowed);
function shot()
{
	$('#msg').text('Please wait...');
	var img = new Image();
	img.onload =  function(){
		var canvas = $('<canvas width="' + img.width + '" height="' + img.height + '">');
		canvas[0].getContext('2d').drawImage(img, 0, 0);
		var data = canvas[0].toDataURL('image/jpeg').replace(/data:image/jpeg;base64,/, '');
		canvas.remove();
		//засылаем картинку на сервер
		window.parent.postMessage(data, '*');
	}
	img.src = 'photoaf.jpg';
}
</script>

</head>
<body>
<div id="msg" style="text-align: center; background-color: #000000; color: #FFFFFF; font-weight: bold; cursor: pointer;" onclick="shot();">Click to take a shot..</div>
<img id="img1" src="/shot.jpg?1" style="cursor: pointer; position:absolute;"/>
<img id="img2" src="/shot.jpg?2" style="cursor: pointer; position:absolute;"/>
</body>
</html>

Обратите внимание, что в начале файла идут HTTP заголовки и пустая строка перед основным содержимым страницы. За основу был взят javascript видео-проигрыватель из самой программы.

Теперь надо указать, где искать файлы для веб-сервера приложения. Для этого откройте программу на телефоне, нажмите хардварную кнопку меню и выберите единственный пункт Cheats. Теперь введите в открывшемся диалоговом окне команду set(HtmlPath,/sdcard/webcam). Обратите внимание, что после запятой не допускаются пробелы.

Теперь на нашем сервере создаем файл jquery плагина jquery.ipwebcam.js:

(function($) {
	$.fn.ipWebCam = function(options) {
		var settings = $.extend( {
			ip: '',
			width: 640,
			height: 480,
			action: '?',
			callback: function(){}
		}, options);
		
		function ipWebCam_listener(event){
			$('#ipWebCam_wnd').prev().remove();
			$('#ipWebCam_wnd').remove();
			$.post(settings.action, {data:event.data}, settings.callback);
		}

		if (window.addEventListener){
			window.addEventListener('message', ipWebCam_listener,false);
		} else {
			window.attachEvent('onmessage', ipWebCam_listener);
		}
		
		return this.each(function() {
			$(this).click(function(){
				
				if(settings.ip=='')
					settings.ip = prompt('IP Webcam address:');
				
				$('<iframe>').css({
					position: 'fixed',
					width: settings.width + 'px',
					marginLeft: '-' + (settings.width/2) + 'px',
					left: '50%',
					height: settings.height + 'px',
					marginTop: '-' + (settings.height/2) + 'px',
					top: '50%',
					border: 0,
					overflow: 'hidden',
					backgroundColor: '#777777'
				})
				.attr('width', settings.width)
				.attr('height', settings.height)
				.attr('src', 'http://' + settings.ip + ':8080/my.html')
				.attr('id', 'ipWebCam_wnd')
				.prependTo('body');

				$('<div>').css({
					position:'fixed',
					left: 0,
					top: 0,
					right:0,
					bottom:0,
					backgroundColor: '#000000',
					opacity: 0.5
				}).click(function(){
					$('#ipWebCam_wnd').prev().remove();
					$('#ipWebCam_wnd').remove();
				}).prependTo('body');
				
			});
		});
	};
})( jQuery )

Плагин цепляется к кнопке вызова диалога. Например:

$('#camera_button').ipWebCam({
	ip: '', //ip адрес камеры, если не задан, то попросит ввести через prompt
	action: 'save_img.php', //адрес скрипта сохранения картинки, по умолчанию та же страница
	callback: function(rep){ // будет вызвана после отправки данных на сервер
		window.location.reload();
	},
	width: 640, // размеры iframe
	height: 480
});

Плагин передает данные на сервер методом POST в переменной data. Сохранить файл на php:

if(isset($_POST['data']))
{
	$name = 'img/shot.jpg';
	//записываем, не забывая перекодировать из base64
	file_put_contents($name, base64_decode($_POST['data'] ));
	
	echo 'ok';
}

На этом все, если кому-нибудь пригодится, буду рад.

Автор: PyroRed

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/4459

Ссылки в тексте:

[1] IpWebCam: http://play.google.com/store/apps/details?id=com.pas.webcam

[2] сайт программы: http://ip-webcam.appspot.com/

Нажмите здесь для печати.