こんにちは。
現在ToughPad(Windows10)を用いたWebRTCによるカメラの撮影機能を作成しております。
目的
この機器には前面と背面両方にカメラが備わっており、
それを切り替えて撮影し、サーバーにアップロードできるようなプログラムを作成しようとしています。
経過
ブラウザでWebカメラの映像を画像化【javasript】を参考に
カメラの表示、画像のキャプチャは作成できましたので、
HTML5で背面カメラを取得する
Android Chrome でテストすると【今は】カメラの front と back を切り替えできます
javascriptで内カメラと外カメラの切り替え
を参考に、入力ソース(前面カメラ/背面カメラ)を切替える機能を作成しようとしましたが、
これがうまく動作しません。
詳細
まず、MediaStreamTrack.getSources
がis not a functionと表示されたので、 mediaDevices.enumerateDevices
で置き換えました。
これで背面/前面のsourceIDを取得することができましたので、
取得したIDをselectboxにappendし、onイベントで変更時にアクションを取る、という風に作りましたが
これでセレクトボックスを変更してもvideoinputが切り替わりません。
どうやらChromeで許可したカメラデバイスを基準としているようで、
javascript
navigator.mediaDevices.getUserMedia({ video:{ optional: [{sourceId: source}] } })
のsourceIdを背面カメラ、Chromeの許可カメラを前面カメラに設定し、ページにアクセスしてみましたが
表示されるのは前面カメラのみでした。
videoinputのソースに設定する方法にnavigator.getUserMedia
を使用していますが、
他に適切な方法があるのでしょうか?
以下にソース全文を記載しておきます。
(※logical errorさんのソースをlist()以外ほぼそのまま使用しています)
なにとぞお力添えをよろしくお願いいたします。
html
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" type="text/css"> </head> <body> <video id="camera" autoplay></video> <br> <select name="dlist"> </select> <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() { navigator.mediaDevices.enumerateDevices() .then(function(devices) { devices.forEach(function(device) { if(device.kind == "videoinput"){ $('[name="dlist"]').append($('<option>').html(device.label).val(device.deviceId)); } }); }) .catch(function(err) { options.error(err.name + ": " + err.message); }); $('[name="dlist"]').on("change",function(){ var val = $('[name="dlist"]').val(); console.log(val); var txt = $('[name="dlist"] option:selected').text(); console.log(txt); location.hash=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> </body> </html>
まだ回答がついていません
会員登録して回答してみよう