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 ChromeWEBカメラによって、一覧が複数あったり、一つだったりしました ▼ 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ブラウザの最新記事】
- CSS の @media screen と IFRAME を使用して PC コンテンツとスマホページを完全に別作成して切り替える
- WEB ブラウザで WEBカメラから静止画像を canvas へ転送して、その画像をローカルへ保存するテンプレート
- iPhone を EpocCam というアプリで Wi-Fi の WEBカメラにする場合のいろいろ知っておく事。
- ブラウザ別『Java 無効』
- IE、Firefox、Chrome、Opera、Safari で JavaScript を無効にする
- ブラウザの入力履歴の削除( 特にパスワード )
- IE、Firefox、Chrome、Opera、Safari のキャッシュ削除のショートカット
- ブラウザを使用した簡易パーセントエンコーディング変換
- 各ブラウザで、onbeforeunload を使おうとすると
- ２０１４年７月７日現在。WEBフォントの実際
- IE の占める割合の変遷と IE8 でないと動かないシステムの現実
- Flash Playerに危険な脆弱性( またかというかこっちもか )。13.0.0.206 である事を確認しましょう。
- デベロッパーツールを使用してクッキーの一覧を表示する
- Seesaa ブログの『保存ボタンが表示されない』
- Firefox のみのレイアウトトラブル / float:left と line-height
- ブラウザ毎の「開発者ツール」の起動と知っておくべき要点
- ブラウザ別『ソース』の表示
- 各ブラウザの現在の「document.charset」と「document.characterSet」
- Favicon の動的変更・または追加( IE8、Firefox、Chrome、Opera、Safari )
- Opera の window.open のバグ
