SQLの窓

2016年11月06日


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 へ転送して、その画像をローカルへ保存するテンプレート




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

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

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