ＳＱＬの窓
<< WEB ブラウザで WEB… | TOP | カメラを起点とした… >>

2016年11月06日


WEB ブラウザで WEBカメラから静止画像を canvas へ転送して、その画像をローカルへ保存するテンプレート

 
デモページ

WEBカメラの画像をローカルに保存する事が目的です(IE は WebRTC が使えないので、通常動画で代替)。Webカメラが無い場合は、動画で代替えます。

IE 以外は toDataURL を アンカーの href にセットしてダウンロードする事ができますが、例によって IE は特別な方法を取ります。

IE11 は長い URL がダメ

根本的に IE は無理です。このあたりの制限はずっと昔からありました。Edge は正しくデータとして取れるのですが、アンカーの href としては使えず、img の src としてならば使えます。いずれにしても、ダウンロードは別の方法である Blob を使うのですが、jpeg としてダウンロードするには、さらにひと工夫が必要そうです。できそうな資料はありましたが、動作は未確認です。
動作確認しました。IE11 で JPEG 保存可能です。

	// IE の場合
	if ( typeof(MSBlobBuilder) != "undefined" ) {
		var jpeg = canvas.toDataURL("image/jpeg")	// JPEG
		var bin = atob(jpeg.split(',')[1]);
		var buffer = new Uint8Array(bin.length);
		for (var i = 0; i < bin.length; i++) {
		  buffer[i] = bin.charCodeAt(i);
		}
		var blob = new Blob([buffer.buffer], {type: "image/jpeg"});
		navigator.msSaveBlob(blob, "canvas.jpg" );
	}




<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="https://lightbox.sakura.ne.jp/homepage/WinOfSql.ico">


</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js"></script>

<style>
input {
	font-size: 20px;
}
#camera {
	width: 400px;
	height: 300px;
}
#canvas,#camera {
	border: 1px solid #000;
}
</style>

<input id="copy" type="button" value="copy">
<input id="save" type="button" value="save">
<br>
<br>
<video id="camera" autoplay></video>
<canvas id="canvas" width="400" height="300"></canvas>

<script>
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
toastr.options.positionClass = "toast-top-center";

if ( $.isMobile ) {
	$("#camera").css("width","100%");
	$("#canvas").css("width","100%");
}

// カメラ用 video 要素(DOM オブジェクト)
var camera;
// 静止画用 canvas 要素(DOM オブジェクト)
var cancas;

check();

// *************************************
// Canvas へコピー
// *************************************
$("#copy").on( "click", function(){

	camera = $("#camera").get(0);
	canvas = $("#canvas").get(0);
	var ctx = canvas.getContext('2d');

	// カメラから キャンバスに静止画を描く
	ctx.drawImage(camera, 0, 0, 400, 300);
});

// *************************************
// Canvas の画像を保存
// *************************************
$("#save").on( "click", function(){

	// IE の場合
	if ( typeof(MSBlobBuilder) != "undefined" ) {

//		var blobBuilderObject = new MSBlobBuilder();
//		blobBuilderObject.append( canvas.msToBlob() );
//		navigator.msSaveBlob(blobBuilderObject.getBlob(), "canvas.png" );	// PNG

		var jpeg = canvas.toDataURL("image/jpeg")	// JPEG
		var bin = atob(jpeg.split(',')[1]);
		var buffer = new Uint8Array(bin.length);
		for (var i = 0; i < bin.length; i++) {
		  buffer[i] = bin.charCodeAt(i);
		}
		var blob = new Blob([buffer.buffer], {type: "image/jpeg"});
		navigator.msSaveBlob(blob, "canvas.jpg" );

	}
	else {
		var jpeg = canvas.toDataURL("image/jpeg")	// JPEG
		var download = $("<a></a>").appendTo("body").css("display","none");
		download.prop({"href" : jpeg, "download": "canvas.jpg" });
		download.get(0).click();
		download.remove();
	}

});

// *************************************
// navigator.getUserMedia チェック
// *************************************
function check() {

	if ( !navigator.mediaDevices ) {
		var api = [
			"webkitGetUserMedia", "mozGetUserMedia","msGetUserMedia"
		]

		$.each(api,function(idx){
			if (navigator.getUserMedia = navigator.getUserMedia || navigator[api[idx]]) {
				return false;
			}
		});

		if ( !navigator.getUserMedia ) {
			error("WebRTC を使用できません");
			return;
		}
	}

	// WEBカメラの初期化
	init();
}

// *************************************
// カメラストリーム
// *************************************
function init() {

	camera = $("#camera").get(0);

	if ( navigator.mediaDevices ) {
		console.log("navigator.mediaDevices.getUserMedia");
		navigator.mediaDevices.getUserMedia({video: true})
		.then(function(stream){
			camera.src = window.URL.createObjectURL(stream);
		})
		.catch(function(err){
			error(err.name);
		});	}
	else {
		console.log("navigator.getUserMedia");
		navigator.getUserMedia(
			{video: true}, 
			function(stream) {
				camera.src = window.URL.createObjectURL(stream);
			},
			function(err){
				error(err.name);
			}
		);
	}
}

// *************************************
// エラー処理
// ※ 動画で代替
// *************************************
function error( message ) {
		toastr.error( message + "<br>代替として動画を表示します" );
		$("#camera")
		.prop({ 
			"loop" : true, "muted" : true, "controls" : true,
			"src" : "https://lightbox.sakura.ne.jp/demo/mp4/waterfall-free-video9.mp4"
		})
		.css("border", "solid 1px #000");
}
</script>
</body>
</html>


関連する記事

WEB ブラウザで WEBカメラをテストするテンプレート / Android Chrome でテストすると【今は】カメラの front と back を切り替えできます

参考にすべき資料

Microsoft: キャンバスの画像をローカルに保存する
Microsoft : BlobBuilder を使ってファイルを作成する

Canvas に描いた画像を png などの形式の Blob に変換する方法
【WEBブラウザの最新記事】
posted by lightbox at 2016-11-06 02:11 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり