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 Chrome
WEBカメラによって、一覧が複数あったり、一つだったりしました
▼ 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カメラとしては使えるので、定点監視カメラなら広告は関係ないです)。
EpocCam のダウンロードとインストール
インストールオプションとして、Barcode Reader を同時にインストールしようとするので、チェックを外す必要があります。
インストール時にいろいろ警告が出ました。たぶん、インターネットアクセスに対しての信頼性の警告だと思いますが、何が起きてもかまわないテストマシンでやってるのでインストールを続行しました。気になる方は、この時点で使う事をあきらめたほうがいいと思います。また、自分以外の環境では警告が出ない可能性もあるので、なんとも言い切れません。
サービスが登録されて自動起動になるので注意
Bonjour は、Apple 系アプリ用のサービスなので、既に入っている可能性もあります。しかし、新たに入る場合だと、サービスは当然停止設定にして必要な時だけ起動します。
あと、開発元の Kinoni のサービスも自動起動されるので、停止設定にして必要な場合にのみ起動します。
付属のビュアーは必要無いので起動しないように
単なる、動作確認用です。起動していると肝心の WEB カメラの画像が劣化します。
ファイアーウォールの設定が必要な場合もあります
こうなると専門知識無いとどうにもなりませんが、PC のファイヤーウォールの設定を行うか、ファイヤーウォールを止めてとりあえず動作確認するかです。
昔は USB で使えたであろう残骸
ソースを見ると USB の文字が残ってますが、表示内にはありません。検索用のキーワードにも残ってますし、適当にアップデートした感満載です。ま、でも USB で使うメリットは現在コスト的にほぼ無いので開発をやめるのは当然でしょう。Wi-Fi 使っても十分速いわけですし(ビュアー起動するとアウトですが)
で、上のソース場所は表から見ると以下のようになっています。
※ 何故か、
一番下の英文は、x で閉じれます。最初、雷マークが出てタッチすると、なんか説明みたいなのが出ます。矢印は反転指定で、昔は逆になったままだとかネットで見かけましたが、これで正しくできるようになっています。
通常運用では、以下のように上部に広告が出て、何かのタイミング( たぶん画面にユーザがアクセスした時 )で、画面いっぱいの広告が日本語で出たり英語で出たりします。基本、左上の x 閉じるのですが、中には広告が何枚も移り変わって最後にならないと閉じれない場合もあります。
だから、リアルタイムの WEB カメラには使えません
最後に、Google Chrome からの画面です
※ 玄関で定点カメラテスト
Google Chrome
アドレスバーに『chrome://plugins』を入力して、Java のセクションを無効( 灰色になります )にする
IE
右上のツールアイコンから『アドオンの管理』で Java を選択して、右下のボタンで無効にします( 無効にすると、ボタンの表示は『有効』になります )
( コントロールパネルから無効にすると表示されません )
▼ 古いメニュー
Opera
アドレスバーに opera:plugins を入力して、Java を無効にします
Safari for Windows
設定の『セキュリティの』Javaを有効にする チェックボックスをオフにします
関連する記事
▼ 過去の IE では使えてました。
Firefox
『開発ツール』アイコンから、開発ツールを表示をクリックして『インスペクタ』を表示し、一番上のタブの右端にある設定アイコンでオプションを開いて以下のチェックボックスをオンにします
▼ 昔はできたんですが、今はありません。
Google Chrome
ALT+E でメニューを開いて、キーボードから指を離して S キーで設定ページが開きます
その後、一番下の『詳細設定を表示』をクリックして開く『プライバシー』の『コンテンツ』ボタンをクリック
javascript のラジオホダンで設定します( 
Opera
設定画面をメニューから開いて『ウェブサイト』内の先頭にあります
▼ Opera は事情でいい意味で変わっています
Safari for Windows
まず、設定ダイアログで「開発」メニューを表示するようにして、メニュー内で設定します
関連する記事
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
