過去何度も繰り返して来た『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の最新記事】
- PHP で Mastodon にアプリを登録して投稿する手順
- Google スプレッドシートの内容を JSON として localhost で取得する手順
- WebRTC による WEBカメラ表示を canvas にコピーして画像に変換し、サーバへアップロードする
- WebRTC による WEBカメラ表示
- Amazon API の 503エラー の対処について
- ドコモ デベロッパーサポートで API使いたいと思ってサインアップしようとしたら・・・・。法人情報は後から登録しましょう
- GitHub の yahoojapan/yconnect-php-sdk( PHP ) を使用して、Yahoo! にログインさせてユーザ情報を取得する( OPENID )
- 手動で Facebook API の 60日間の アクセストークンを取得する
- Facebook Graph API Explorer でカスタムプライバシー設定をした投稿を行う
- C#(.NET) : Google Spreadsheets API version 3.0でGoogleスプレッドシートを参照
- Twitpic の画像URLを取得する API が変わっているようなのですが
