質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebRTC

WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

解決済

WebRTCにおけるカメラの切り替え

yokatone
yokatone

総合スコア43

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebRTC

WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

1回答

0評価

2クリップ

15210閲覧

投稿2017/04/25 01:18

こんにちは。
現在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>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebRTC

WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。