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

こんにちは。
現在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
1navigator.mediaDevices.getUserMedia({
2    video:{
3        optional: [{sourceId: source}]
4    }
5})

のsourceIdを背面カメラ、Chromeの許可カメラを前面カメラに設定し、ページにアクセスしてみましたが
表示されるのは前面カメラのみでした。

videoinputのソースに設定する方法にnavigator.getUserMediaを使用していますが、
他に適切な方法があるのでしょうか？
以下にソース全文を記載しておきます。
(※logical errorさんのソースをlist()以外ほぼそのまま使用しています)
なにとぞお力添えをよろしくお願いいたします。

html
1<html>
2    <head>
3        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
4<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
5<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" type="text/css">
6    </head>
7    <body>
8
9
10<video id="camera" autoplay></video>
11<br>
12<select name="dlist">
13</select>
14
15<script>
16jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
17toastr.options.positionClass = "toast-top-center";
18
19if ( $.isMobile ) {
20	$("#camera").css("width","100%");
21}
22
23// カメラ用 video 要素(DOM オブジェクト)
24var camera;
25// スマホ用コンボボックス(jQuery オブジェクト)
26var select;
27// カメラの一覧
28var camera_data;
29// 現在のカメラの ID
30var camera_id = "default";
31
32check();
33
34// *************************************
35// navigator.getUserMedia チェック
36// *************************************
37function check() {
38
39	var api = [
40		"webkitGetUserMedia", "mozGetUserMedia","msGetUserMedia"
41	]
42
43	$.each(api,function(idx){
44		if (navigator.getUserMedia = navigator.getUserMedia || navigator[api[idx]]) {
45			return false;
46		}
47	});
48
49	if ( !navigator.getUserMedia ) {
50		error("WebRTC を使用できません");
51		return;
52	}
53
54	// WEBカメラの初期化
55	init();
56}
57
58// *************************************
59// カメラストリーム
60// *************************************
61function init() {
62
63	camera = $("#camera").get(0);
64
65	if ( location.hash != "" ) {
66		camera_id = location.hash;
67		camera_id = camera_id.replace("#","");
68		console.log(camera_id);
69		$("<div>"+camera_id+" を選択しました</div>").appendTo("body");
70	}
71
72	navigator.getUserMedia(
73		{video: {
74			optional: [{sourceId: camera_id }]
75		}}, 
76		function(stream) {
77			camera.src = window.URL.createObjectURL(stream);
78		},
79		function(err){
80			error(err.name);
81		}
82	);
83
84	list();
85
86}
87
88// *************************************
89// MediaStreamTrack が使える場合
90// カメラ一覧をコンボボックス化
91// *************************************
92function list() {
93
94    navigator.mediaDevices.enumerateDevices()
95    .then(function(devices) {
96        devices.forEach(function(device) {
97            if(device.kind == "videoinput"){
98                $('[name="dlist"]').append($('<option>').html(device.label).val(device.deviceId));
99            }
100        });
101    })
102    .catch(function(err) {
103        options.error(err.name + ": " + err.message);
104    });
105
106    $('[name="dlist"]').on("change",function(){
107        var val = $('[name="dlist"]').val();
108        console.log(val);
109
110        var txt = $('[name="dlist"] option:selected').text();
111        console.log(txt);
112        
113        location.hash=val;
114        location.reload(true);
115    });
116}
117
118// *************************************
119// エラー処理
120// ※ 動画で代替
121// *************************************
122function error( message ) {
123		toastr.error( message + "<br>代替として動画を表示します" );
124		$("#camera")
125		.prop({ 
126			"loop" : true, "muted" : true, "controls" : true,
127			"src" : "https://lightbox.sakura.ne.jp/demo/mp4/waterfall-free-video9.mp4"
128		})
129		.css("border", "solid 1px #000");
130}
131</script>
132    </body>
133</html>

行動規範の内容に同意します

回答1件

自己解決

解決

Streamを切っていないのが問題でした。
WebRTCのGitHub
のサンプルデモだと動作したので参考にしたところ、

javascript
1function setCameraObject(){
2
3        //videoElement -> videoタグ, videoSelect -> ソースが書かれたセレクトボックス
4        var videoElement = document.querySelector('video');
5        var videoSelect = document.querySelector('select#videoSource');
6
7        //streamの停止
8        if (window.stream) {
9            window.stream.getTracks().forEach(function(track) {
10                track.stop();
11            });
12        }
13
14        var videoSource = videoSelect.value;
15        var constraints = {
16            video: {deviceId: videoSource ? {exact: videoSource} : undefined}
17        };
18
19        //getUserMediaで割り当てたvideoSourceを用いてstreamを開始
20        navigator.mediaDevices.getUserMedia(constraints).then(function(stream){
21            window.stream = stream;
22            videoElement.srcObject = stream;
23        }).catch(function(err){
24            console.log(err);
25        });
26    }