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
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>