SQLの窓

2018年11月15日


WebRTC による WEBカメラ表示( 2018/11/15 ) : iPhone + Safari は iOS11 のみで確認

過去何度も繰り返して来た『WebRTC による WEBカメラ表示』ですが、いろいろ変遷ありつつこのような形で現在動作確認しています。Chrome と Edge で確認したところによると、旧 API でも動作しています。

デモページ

▼ MDN 資料
MediaDevices - Web API インターフェイス | MDN
Taking still photos with WebRTC - Web APIs | MDN

今回、iPhone の iOS11 で 動作確認したところ、旧 API 側で動作したようです。しかし、iOS12 では Safari 側でカメラとマイクを利用すると設定した上で、実行時に許可する必要があるのですが( iOS11 未確認 : PCでは基本的に皆そうです )、うまく動作せず検証は保留となっています( デバイス所持者が自分以外なので )

※ 共通事項 : インターネット上では SSL である事
※ WebRTC が使えない場合は動画で代替え
<!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 charset="UTF-8">
<link rel="shortcut icon" href="https://winofsql.jp/WinOfSql.ico">

<title>WEBカメラの表示</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>

<style>
@media screen and ( min-width:480px ) {
	#content {
		padding: 20px;
	}
	#camera {
		width: 480px;
		height: 360px;
	}
}
@media screen and ( max-width:479px ) {
	#content {
		padding: 0px;
	}
	#camera {
		width: 100%;
	}
}

</style>
</head>
<body>
<div id="content">

	<video id="camera" autoplay></video>
	<a class="btn btn-secondary btn-sm float-right ml-4"
		href=".">フォルダ</a>

	<a class="btn btn-secondary btn-sm float-right ml-4"
		onclick="$('#camera').css({'width':'100%', 'height':'100%'})"
		href="#">100%</a>

	<a class="btn btn-secondary btn-sm float-right"
		onclick="$('#camera').css({'width':'auto', 'height':'auto'})"
		href="#">auto</a>

</div>

<script>
// *************************************
// 簡易スマホチェック
// *************************************
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
toastr.options={"closeButton":false,"debug":false,"newestOnTop":false,"progressBar":false,"positionClass":"toast-bottom-center","preventDuplicates":false,"onclick":null,"showDuration":"300","hideDuration":"1000","timeOut":"3000","extendedTimeOut":"1000","showEasing":"swing","hideEasing":"linear","showMethod":"fadeIn","hideMethod":"fadeOut"};
if ( !$.isMobile ) {
	toastr.options.positionClass = "toast-top-center";
}

// *************************************
// localhost 以外では SSL で処理する
// *************************************
if ( location.host != "localhost" ) {
	if ( location.protocol == "http:" ) {
		location.protocol = "https:"
	}
}

// *************************************
// カメラ参照
// *************************************
// カメラ用 video 要素(DOM オブジェクト)
var camera;
camera = $("#camera").get(0);

// *************************************
// 最新 API
// *************************************
if ( navigator.mediaDevices ) {

	// カメラ表示
	navigator.mediaDevices.getUserMedia({video: true})
	.then(function(stream){
		// カメラのストリームを表示
		camera.srcObject = stream;
	})
	.catch(function(err){
		// ブラウザで使用を拒否した場合等( 動画で代替 )
		errorVideo();
	});
}
// *************************************
// 旧 API
// *************************************
else {
	// 旧 WebRTCチェック用
	var api = [
		"webkitGetUserMedia", "mozGetUserMedia","msGetUserMedia"
	]
	$.each(api,function(idx){
		if (navigator.getUserMedia = navigator.getUserMedia || navigator[api[idx]]) {
			return false;
		}
	});
	// WebRTC 使用可能
	if ( navigator.getUserMedia ) {
		// スマホでは、幅いっぱいに使う
		if ( $.isMobile ) {
			$("#camera").css("width","100%");
		}
		// カメラの表示
		navigator.getUserMedia({video: true}, 
			function(stream) {
				// カメラのストリームを表示
				camera.srcObject = stream;
				// ▼ 旧実装
				// camera.src = window.URL.createObjectURL(stream);
			},
			function(err){
				// ブラウザで使用を拒否した場合等( 動画で代替 )
				errorVideo();
			}
		);	
	}
	else {
		// 動画で代替
		errorVideo();
	}
}

// *************************************
// 動画で代替
// *************************************
function errorVideo() {

	toastr.error( "WebRTC を使用できません");

	$("#camera")
	.prop({ 
		"loop" : true, "muted" : true, "controls" : true,
		"src" : "TriggerRally.mp4"
	})
	.css({"border": "solid 1px #000"});

}
</script>

</body>
</html>

参考

Apple Safari の WebRTC について
WebRTC で URL.createObjectURLはまもなく使えなくなる




【APIの最新記事】
posted by lightbox at 2018-11-15 15:53 | API | このブログの読者になる | 更新情報をチェックする
container 終わり

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

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