SQLの窓

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 に変換する方法



posted by lightbox at 2016-11-06 02:11 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

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

navigator.mediaDevices.getUserMedia() と navigator.mediaDevices.enumerateDevices() を使うといいみたいです。(警告が出なくなりました。)

navigator.mediaDevices を使ったカメラのサンプル
デモページ ※ Android で見るのがおもしろいです。
MediaStreamTrack.getSources() は、非推奨で Chrome の 56 で削除される見通しです。
これも、Firebase のテストをする一環で、カメラの画像を Firebase storage に保存する為に使用しています。 いまのところ、WebRTC が動作してカメラが動くのを確認したのは Google Chrome と Firefox と Microsoft Edge と Android の Chrome です。 ※ Chrome は https でないと動作しません カメラが使えない場合も、Firebase で 静止画のアップロードを行いたいので、その場合はエラー処理で動画を表示するようにしています。 Chrome では、MediaStreamTrack.getSources() で、カメラの一覧を取得できるので、コンボボックスで切り替えれるようにしています。 カメラの切り替えは、WebRTC の停止が困難なので(というか Android では再起動してしまう)、現状はコードでするよりリロードするのが簡単なので、location.hash を使用してリロードしています。 できる限り、jQuery を使用しています カメラの扱いは DOM ですが、イベントやら画面の扱いは jQuery が簡単です。特に、コンボボックスを追加して body に追加する部分は直感的にできます。 ▼ Google Chrome WEBカメラによって、一覧が複数あったり、一つだったりしました ▼ Android 4が front で、5が back と label に表示されますが、2番目のカメラ(?)でも、back カメラになりました。 ▼ Google Chrome これは、一つしかなかったです(安いWEBカメラ)
<video id="camera" autoplay></video>
<br>

<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%");
}

// カメラ用 video 要素(DOM オブジェクト)
var camera;
// スマホ用コンボボックス(jQuery オブジェクト)
var select;
// カメラの一覧
var camera_data;
// 現在のカメラの ID
var camera_id = "default";

check();

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

	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 ( location.hash != "" ) {
		camera_id = location.hash;
		camera_id = camera_id.replace("#","");
		console.log(camera_id);
		$("<div>"+camera_id+" を選択しました</div>").appendTo("body");
	}

	navigator.getUserMedia(
		{video: {
			optional: [{sourceId: camera_id }]
		}}, 
		function(stream) {
			camera.src = window.URL.createObjectURL(stream);
		},
		function(err){
			error(err.name);
		}
	);

	list();

}

// *************************************
// MediaStreamTrack が使える場合
// カメラ一覧をコンボボックス化
// *************************************
function list() {

	MediaStreamTrack.getSources(function(data){

		if ( data.length > 0 ) {

			var div = $("<div></div>");

			camera_data = data;

			select = $("<select></select>");
			select.append("<option value=\"none\"></option>");
			for( i = 0; i < data.length; i++ ) {
				select.append("<option value=\""+ data[i].id +"\">"+(i+1)+") "+data[i].kind+"</option>");
				div.append("<p>label "+(i+1)+"<br>"+data[i].label +"</p>");
			}
			select.appendTo("body");
			div.appendTo("body");

			console.dir(camera_data);

			select.on("change",function(){
				if ( $(this).val() != "none" ) {
					location.hash=$(this).val();
					location.reload(true);
				}
			});

		}

	});

}

// *************************************
// エラー処理
// ※ 動画で代替
// *************************************
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>

関連する記事

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




posted by lightbox at 2016-11-06 01:18 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

2016年10月28日


iPhone を EpocCam というアプリで Wi-Fi の WEBカメラにする場合のいろいろ知っておく事。

WebRTC(iOS上のブラウザでは使えません) で、いろいろアプリをテストする上での一つのツールとして、使ってない iPhone4S を WEBカメラにしてみて解った情報です。(Android は DroidCam のほうがいいので詳細は後日調べる予定 / クライアントソフトはこちら)

このアプリ、USB は使えないですし、USB のWEBカメラは安いのがいくらでもあるので、自分の家の特定位置の監視カメラとして使う以外はメリットはあまりありません。(外部からのアクセスは無理です。外部からは、Android 系の IPカメラアプリとルータ設定でできるかもしれません:未確認)

そもそも、古い忘れられたソフトだと思われるので、古い iPhone(iOS8.0以降) 以外で試してみようとは思わないほうがいいと思います。広告も結構大きいのが出て画面ふさぎますし

(その間も WEBカメラとしては使えるので、定点監視カメラなら広告は関係ないです)。

EpocCam のダウンロードとインストール

アプリの更新は、2015年10月17日よりされていません。インターネットで検索しても探すのに一苦労します。

こちらから PC 用のソフトをダウンロードしてインストールします。(自分の環境は Windows7 で、32ビットですが、ダウンロード時の選択はありませんでした)


インストールオプションとして、Barcode Reader を同時にインストールしようとするので、チェックを外す必要があります。

インストール時にいろいろ警告が出ました。たぶん、インターネットアクセスに対しての信頼性の警告だと思いますが、何が起きてもかまわないテストマシンでやってるのでインストールを続行しました。気になる方は、この時点で使う事をあきらめたほうがいいと思います。また、自分以外の環境では警告が出ない可能性もあるので、なんとも言い切れません。

iPhoneアプリのほうは、クライアントの確認が終わってから、インストールして開けばいいです。(当然ですが、Wi-Fi が使える必要があります。USB が使えるような雰囲気がネットではありますが、どうも USB は対応をやめたようです)


サービスが登録されて自動起動になるので注意



Bonjour は、Apple 系アプリ用のサービスなので、既に入っている可能性もあります。しかし、新たに入る場合だと、サービスは当然停止設定にして必要な時だけ起動します。



あと、開発元の Kinoni のサービスも自動起動されるので、停止設定にして必要な場合にのみ起動します。

付属のビュアーは必要無いので起動しないように

単なる、動作確認用です。起動していると肝心の WEB カメラの画像が劣化します。

ファイアーウォールの設定が必要な場合もあります



こうなると専門知識無いとどうにもなりませんが、PC のファイヤーウォールの設定を行うか、ファイヤーウォールを止めてとりあえず動作確認するかです。

昔は USB で使えたであろう残骸



ソースを見ると USB の文字が残ってますが、表示内にはありません。検索用のキーワードにも残ってますし、適当にアップデートした感満載です。ま、でも USB で使うメリットは現在コスト的にほぼ無いので開発をやめるのは当然でしょう。Wi-Fi 使っても十分速いわけですし(ビュアー起動するとアウトですが)

で、上のソース場所は表から見ると以下のようになっています。


※ 何故か、Debut Video Capture software による動作確認となっています。

さて、実行画面



一番下の英文は、x で閉じれます。最初、雷マークが出てタッチすると、なんか説明みたいなのが出ます。矢印は反転指定で、昔は逆になったままだとかネットで見かけましたが、これで正しくできるようになっています。

通常運用では、以下のように上部に広告が出て、何かのタイミング( たぶん画面にユーザがアクセスした時 )で、画面いっぱいの広告が日本語で出たり英語で出たりします。基本、左上の x 閉じるのですが、中には広告が何枚も移り変わって最後にならないと閉じれない場合もあります。



だから、リアルタイムの WEB カメラには使えません

最後に、Google Chrome からの画面です



※ 玄関で定点カメラテスト


posted by lightbox at 2016-10-28 13:45 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり