firefoxでカメラが使えません。

前へ 次へ
このQ&Aのポイント
  • firefoxでカメラが使えない問題についての解決方法を教えてください。
  • ブラウザにlocalhost/camera.htmlと入力してもカメラが映らない問題を解決したいです。
  • Apacheを使用してcamera.htmlを配置したにもかかわらず、カメラが映らない問題についての解決策を教えてください。
回答を見る
  • 締切済み

firefoxでカメラが使えません。

apacheを入れて、/var/www/htmlの下にhttps://html5experts.jp/mganeko/5098/のコードをコピーしたcamera.htmlを置いて、ブラウザにlocalhost/camera.htmlと入力したのですが、タイトルがSelf Cameraの白いページが出てきます(カメラが映りません)。解決方法を知りたいです、よろしくお願いします。 ↓camera.html <!doctype html> <html> <head> <title>Self Camera</title> </head> <body> <video id="myVideo" width="400" height="300" autoplay="1" ></video> <script type="text/javascript"> navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia; window.URL = window.URL || window.webkitURL; var video = document.getElementById('myVideo'); var localStream = null; navigator.getUserMedia({video: true, audio: false}, function(stream) { // for success case console.log(stream); video.src = window.URL.createObjectURL(stream); }, function(err) { // for error case console.log(err); } ); </script> </body> </html> ブラウザコンソールでは下のように出ます。 TelemetryStopwatch: key "PLACES_AUTOCOMPLETE_URLINLINE_DOMAIN_QUERY_TIME_MS" was already initialized TelemetryStopwatch.jsm:52:0 HTML ドキュメントの文字エンコーディングが宣言されていません。ドキュメントに US ASCII 外の文字が含まれている場合、ブラウザの設定によっては文字化けすることがあります。ページの文字エンコーディングはドキュメント中または転送プロトコルで宣言されなければなりません。 camera.html MediaStreamError { name: "NotFoundError", message: "The object can not be found here.", constraintName: "", stack: "" } camera.html:21:7 GET http://localhost/favicon.ico [HTTP/1.1 404 Not Found 0ms] GET http://localhost/favicon.ico#-moz-resolution=16,16 [HTTP/1.1 404 Not Found 0ms] 1451368920441 Toolkit.Telemetry WARN TelemetryStorage::_scanArchive - have seen this id before: 798934e5-3e01-4177-8073-deaed73c65fa, overwrite: false firefox42です。vistaとubuntu14.04のデュアルブートで、131万画素のwebカメラ内蔵です。 ブラウザのurlにlocalhostと入れるとApache2 Ubuntu Default Pageという見出し(タイトルではなく)が出ます。 ファビコンはなくていいです。また、文字化けは今は気にしていません。webrtcを用いてカメラが表示できません。 apacheを入れて、/var/www/htmlの下にhttps://html5experts.jp/mganeko/5098/のコードをコピーしたcamera.htmlを置いて、ブラウザにlocalhost/camera.html入力したのですが、タイトルがSelf Cameraの白いページが出てきます。(カメラが映りません) ↓camera.html <!doctype html> <html> <head> <title>Self Camera</title> </head> <body> <video id="myVideo" width="400" height="300" autoplay="1" ></video> <script type="text/javascript"> navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia; window.URL = window.URL || window.webkitURL; var video = document.getElementById('myVideo'); var localStream = null; navigator.getUserMedia({video: true, audio: false}, function(stream) { // for success case console.log(stream); video.src = window.URL.createObjectURL(stream); }, function(err) { // for error case console.log(err); } ); </script> </body> </html> ブラウザコンソールでは下のように出ます。 TelemetryStopwatch: key "PLACES_AUTOCOMPLETE_URLINLINE_DOMAIN_QUERY_TIME_MS" was already initialized TelemetryStopwatch.jsm:52:0 HTML ドキュメントの文字エンコーディングが宣言されていません。ドキュメントに US ASCII 外の文字が含まれている場合、ブラウザの設定によっては文字化けすることがあります。ページの文字エンコーディングはドキュメント中または転送プロトコルで宣言されなければなりません。 camera.html MediaStreamError { name: "NotFoundError", message: "The object can not be found here.", constraintName: "", stack: "" } camera.html:21:7 GET http://localhost/favicon.ico [HTTP/1.1 404 Not Found 0ms] GET http://localhost/favicon.ico#-moz-resolution=16,16 [HTTP/1.1 404 Not Found 0ms] 1451368920441 Toolkit.Telemetry WARN TelemetryStorage::_scanArchive - have seen this id before: 798934e5-3e01-4177-8073-deaed73c65fa, overwrite: false firefox42です。vistaとubuntu14.04のデュアルブートで、131万画素のwebカメラ内蔵です。 ブラウザのurlにlocalhostと入れるとApache2 Ubuntu Default Pageという見出し(タイトルではなく)が出ます。 ファビコンはなくていいです。また、文字コードは今は気にしていません(文字を表示していないので)。

  • tmfpe
  • お礼率66% (2/3)

みんなの回答

  • tkf-
  • ベストアンサー率58% (820/1395)
回答No.2

エラーの内容や、そのリンク先の内容を読む限りでは、HTTPSなどのセキュアな通信でなければ許可しなくなったように変更した、とあります。 また、リンク先の情報で、 > localhost is treated as a secure origin over HTTP, so if you're able to run your server from localhost, you should be able to test the feature on that server. localhostの場合は、HTTPでいいようなことを書いてありますね。 実際localhostだと問題なく表示され、IPアドレス指定では表示されませんでした。 *確認したChromium バージョン 47.0.2526.80 Built on 8.2, running on Debian 8.2

  • tkf-
  • ベストアンサー率58% (820/1395)
回答No.1

肝心のWebカメラが対応していないものなのではないでしょうか。 Vistaの頃のWebカメラはUVC対応していない可能性があります。 当方、debianですが、ELECOM UCAM-DLU130HSVで正常動作しました。 ちなみにカメラ無しの場合、こんなメッセージが出ました。 > MediaStreamError { name: "OverconstrainedError", message: "Constraints could be not satisfied.", constraint: "deviceId", stack: "" } camera.html:21:11

tmfpe
質問者

お礼

UVC対応カメラを使ったらfirefoxで見れました!ありがとうございました。 返信に時間がかかったのは、logicoolのカメラc270を買って、windowsにしかドライバがなかったので、クライアント側(vista)のpcにドライバを入れ、サーバの設定をしたためです。申し訳ありません。でも、chromeでは見られませんでした。chromeでF12を押してConsoleを見ると、下のように書いています。 [!マーク]getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details. ↑camera.html:15 ▼NavigatorUserMediaError [tab]constraintName: "" [tab]message: "Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)." [tab]name: "PermissionDeniedError" [tab]▼__proto__: NavigatorUserMediaError [tab][tab]constraintName: (...) [tab][tab]▼get constraintName:　function() [tab][tab][tab]arguments: null [tab][tab][tab]caller: null [tab][tab][tab]length: 0 [tab][tab][tab]name: "" [tab][tab][tab]＞__proto__: function() [tab][tab][tab]＞<function scope> [tab][tab]▼constructor: function NavigatorUserMediaError() [tab][tab][tab]arguments: null [tab][tab][tab]caller: null [tab][tab][tab]length: 0 [tab][tab][tab]name: "NavigatorUserMediaError" [tab][tab][tab]＞prototype: NavigatorUserMediaError [tab][tab][tab]＞toString: function　toString() [tab][tab][tab]＞__proto__: function() [tab][tab][tab]＞<function scope> [tab][tab][tab]message: (...) [tab][tab]▼get message: function() [tab][tab][tab]arguments: null [tab][tab][tab]caller: null [tab][tab][tab]length: 0 [tab][tab][tab]name: "" [tab][tab][tab]＞__proto__: function() [tab][tab][tab]＞<function scope> [tab][tab][tab]name: (...) [tab][tab]▼get name: function() [tab][tab][tab]arguments: null [tab][tab][tab]caller: null [tab][tab][tab]length: 0 [tab][tab][tab]name: "" [tab][tab][tab]＞__proto__: function() [tab][tab][tab]＞<function scope> [tab][tab]▼__proto__: Object [tab][tab][tab]＞__defineGetter__: function__defineGetter__() [tab][tab][tab]＞__defineSetter__: function__defineSetter__() [tab][tab][tab]＞__lookupGetter__: function__lookupGetter__() [tab][tab][tab]＞__lookupSetter__: function__lookupSetter__() [tab][tab][tab]＞constructor: function Object() [tab][tab][tab]＞hasOwnProperty: function hasOwnProperty() [tab][tab][tab]＞isPrototypeOf: function isPrototypeOf() [tab][tab][tab]＞propertyIsEnumerable: function propertyIsEnumerable() [tab][tab][tab]＞toLocaleString: function toLocaleString() [tab][tab][tab]＞toString: function toString() [tab][tab][tab]＞valueOf: function valueOf() [tab][tab][tab]＞get __proto__: function get __proto__() [tab][tab][tab]＞set __proto__: function set __proto__() ↑camera.html:21 三角を、▼、＞で代用しています。[tab]が表示できないので"[tab]"と入れました、そのため見づらいです、すいません。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascript phonegapで困ってます

    いろいろ調べながらPCでwebカメラを使って、videoタグにカメラ映像を映すことができたので（下記コード）、これをmonacaでビルドすると、ブラウザーがカメラ未対応とでます。navigator.getUserMediaに対応してるのが、FireFoxとChrome、operaなどなので当然の結果かと そこでhtmlとjavascriptをphonegapでビルドして、スマホのカメラの映像をvideoタグに映し出したいのですが、phonegap capture apiのnavigator.device.capture.captureVideo(captureSuccess, captureError, options);あたりを調べてもよくわからなかったので、質問させていただきました。よろしくお願いします。 html-------------------------- <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>カメラテスト</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <article> <video id="video" autoplay></video> <section> <button id="start">Start</button> <button id="stop">Stop</button> </section> </article> <script type="text/javascript" src="index.js"></script> </body> </html> js----------------------------------------------------- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; window.URL = window.URL || window.webkitURL; if (!navigator.getUserMedia) { alert("カメラ未対応のブラウザです。"); } // 変数 var video = document.getElementById("video"), btnStart = document.getElementById("start"), btnStop = document.getElementById("stop"), videoObj = { video: true, audio: true }; btnStart.addEventListener("click", function() { var localMediaStream; if (navigator.getUserMedia) { navigator.getUserMedia(videoObj, function(stream) { localMediaStream = stream; video.src = window.URL.createObjectURL(localMediaStream); }, function(error) { console.error("getUserMedia error: ", error.code); }); btnStop.addEventListener("click", function() { localMediaStream.stop(); }); } }); css------------------------- video { width: 320px; height: 240px; } button { width: 80px; height: 30px; font-size: 20px; text-align: center; vertical-align: center; }

  • フレーム内のアプレットの参照ができない

    <frameset rows="*,100"> <frame src="Q0001.html" name="main"> <frame src="navigator.html" name="navigator"> </frameset> 上記のフレーム構成で、Q0001.html から navigator.html のアプレット、name="ResultRegister" を参照しようとしています。 var objElement = window.top.navigator.getElementsByName("ResultRegister"); で参照しようとすると、「オブジェクトでサポートされていないプロパティ、又はメソッドです」となり var objElement = window.top.navigator.document.getElementsByName("ResultRegister"); で参照しようとすると、「window.top.navigator.documentは、Null又はオブジェクトではありません」となり 参照できません。 どのように参照したらよいのでしょうか？ 宜しくお願いします。

  • 複数ブラウザ対応のお気に入りに追加ボタンを設置したのですが

    複数ブラウザ対応のお気に入りに追加ボタンを設置したのですが マウスポインタを乗せても矢印アイコンから人差し指のアイコンに変化せず困っています。 矢印のままクリックしても一応機能はするのですがやはり違和感があります。 ソースはこちらです。 <script type="text/javascript"> <!-- //Internet Explorer //ブラウザ上では[お気に入りに追加♪]というボタンが表示されます if(navigator.userAgent.indexOf("MSIE") > -1){ document.write('<div><img src="画像URL" border="0" alt="お気に入りに追加"'); document.write(' onclick="window.external.AddFavorite(\'サイトURL\',\'サイトタイトル\')"></div>'); } //Firefox //ブラウザ上では[ブックマークに追加♪]というボタンが表示されます else if(navigator.userAgent.indexOf("Firefox") > -1){ document.write('<div><img src="画像URL" border="0" alt="お気に入りに追加"'); document.write(' onclick="window.sidebar.addPanel(\'サイトタイトル\',\'サイトURL\',\'\');"></div>'); } //Netscape //ブラウザ上では[ブックマークに追加♪]というボタンが表示されます else if(navigator.userAgent.indexOf("Netscape") > -1){ document.write('<div><img src="画像URL" border="0" alt="お気に入りに追加"'); document.write(' onclick="window.sidebar.addPanel(\'サイトタイトル\',\'サイトURL \',\'\');"></div>'); } //Opera //ブラウザ上では[ブックマークに追加♪]というリンクが表示されます else if(navigator.userAgent.indexOf("Opera") > -1){ document.write('<div><a href="サイトURL" rel="sidebar" title="サイトタイトル"><img src="画像URL" border="0"></a></div>'); } //上記以外のブラウザは、何も実行(表示)されません </script> もともとのソースから多少改変してありますがJAVAの知識が全くないもので ソースを改良していただけると助かります。

  • Javascriptの関数について

    Internet Explorer の右クリックメニューに登録するスクリプトを作っています。 たとえば、いま表示しているページのURLを表示する場合、 <script type="text/javascript"> var parentWindow = window.menuArguments; var URL = parentWindow.document.URL; window.onload = function() { 　　kansuu(URL); }; kansuu = function(url) { 　　alert(url); } </script> ↑は動きます。 また、 var parentWindow = window.menuArguments; var URL = parentWindow.document.URL; window.onload = kansuu(URL); function kansuu(url) { 　　alert(url); } ↑も動きます。 ところが、 var parentWindow = window.menuArguments; var URL = parentWindow.document.URL; window.onload = kansuu(URL); kansuu = function(url) { 　　alert(url); } は動きません。 なぜでしょうか？ 理由を教えていただけると嬉しいです。 よろしくお願いします。

  • FireFoxでブラウザーと閉じる時に特定の処理を実行したいのですが良い方法を教えてください。

    ブラウザーを閉じる時に特定の処理をWebページ内で実行したのですが、FireFoxでは可能でしょうか? IEでは、下記のロジックで対応することが出来ました。 window.onunload=function() { var x=window.event.clientX,y=window.event.clientY; var w=document.body.clientHeight; if (y<0 &(w-5)<x || x<15) { alert('IEを閉じます。'); } }

  • JavaScriptで関数を呼びだしの繰り返しを

    GoogleMapを使ったアプリケーションをJavaScriptでプログラミングしています。 現在地取得をしている関数内で現在地取得する度にバイブレーションをしています。 その関数の呼びだしを繰り返し行って現在地を更新していますが、今の私のスマートフォンだと一度バイブレーションしてから次バイブレーションするまで１５秒程度かかります。 もっと間隔を短くして振動させたいのですが方法はあるでしょうか？ ソースは以下です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>VIBRATION1</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function vibration1(){ var x = 100; var pattern = [30]; var vibPattern = []; for(var i=0; i<pattern.length; i++){ vibPattern[i] = x * pattern[i]; } if(window.navigator.vibrate){ window.navigator.vibrate(vibPattern); }else if(window.navigator.mozVibrate){ window.navigator.mozVibrate(vibPattern); } else if(window.navigator.webkitVibrate){ window.navigator.webkitVibrate(vibPattern); }else{ alert("Not support."); } var msg = ""; msg += "window.navigator.vibrate = " + escape(window.navigator.vibrate) + "<br /><br />"; msg += "window.navigator.mozVibrate = " + escape(window.navigator.mozVibrate) + "<br /><br />"; msg += "window.navigator.webkitVibrate = " + escape(window.navigator.webkitVibrate) + "<br /><br />"; document.getElementById("msg").innerHTML = msg; } </script> <script type="text/javascript"> function initialize() { var myOptions = { zoom: 17, mapTypeId: google.maps.MapTypeId.HYBRID } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // 精度UPあり var position_options = { enableHighAccuracy: true }; // 現在位置情報を取得 navigator.geolocation.watchPosition(function(position) { var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); map.setCenter(myLatlng); vibration1(); // マーカーの表示 var marker = new google.maps.Marker({ position: myLatlng, map: map }); }, null, position_options); } </script> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } #map_canvas { height: 100%; } </style> </head> <body onload="initialize()"> <div id="map_canvas"></div> </body> </html>

  • window.openでタイトル名の指定

    window.openで開くウインドウのタイトルバーに指定文字列を入れたいのですが、できますでしょうか？ ファイル(画像）を直リンクで開く為、そのパスが表示されてしまいます。 いろいろ検索して var w1 = ""; w1 = window.open(url , "hoge" , "width=640,height=180,scrollbars=yes,location=1"); w1.document.title = "test"; とかでできると書いてあったサイトもあったのですが私の場合どうもうまくいきません・・。 お願いいたします。

  • FirefoxでselectedIndexが使えない

    Firefoxで、selectedIndex属性に値を入れることができません。 IEですと問題なく動きます。 恐れ入りますが、どなたか解決策をご教授くださいますよう、お願い致します。 【環境】 　IE: 6.0 SP2 　Firefox: 2.0.0.1 【やりたいこと】 　子画面から親画面のプルダウンメニューの値を変更させる。 【方法】 　１．親画面からポップアップ画面（子画面）を表示 　２．子画面のボタンをクリック 　３．親画面のプルダウンメニューの値を変更 【ロジック】 　//親画面 　　var url = "xxx"; 　　var subwin = window.open( url, "", "width=500,height=500,scrollbars=yes", "_blank" ); 　　subwin.focus(); 　//子画面 　　window.opener.document.getElementById( "a" ).selectedIndex = 1;

  • IE6だけの判定、IE7だけの判定について

    こんにちは。 下記の「IE6だけの判定方法（JavaScript）」で、どれが一番いいのか、 或は、もっと正確で簡素な良い方法があるのかどうかを教えてください。 また、IE7だけの判定方法も記載しますので、ご指導お願いします。 色々試した結果は、一応全部ＯＫでした。 ただ、プログラマーでないので心配なので質問させて頂きました。 もうひとつ、!!は何かundefinedやfunctionを、true、falseへと整形してるようですが、 これを、業界用語で何って言うのかも、教えてください。よろしくお願いします。 <script> /* IE6だけの判定方法 */ // (1) var ua = navigator.userAgent.toLowerCase(); var bver = (ua.match(/.+(?:rv|webkit|khtml|opera|msie)[\/: ]([\d.]+)/ ) || [0,'0'])[1]; var isIE6a = (/msie/.test(ua) && !/opera/.test(ua) && parseInt(bver) < 7 && (!window.XMLHttpRequest || typeof(XMLHttpRequest) === 'function')); if (isIE6a) document.write('IE6'); // (2) var isIE6b = document.uniqueID && document.compatMode && !window.XMLHttpRequest && document.execCommand; if (!!isIE6b) document.write('IE6'); // (3) var isIE6c = /msie|MSIE 6/.test(navigator.userAgent); if (isIE6c) document.write('IE6'); /* IE7だけの判定方法 */ var isIE7 = window.XMLHttpRequest && (/*@cc_on!@*/false) && !(document.documentMode >=8); if (!!isIE7) document.write('IE7'); </script>

  • 変数に入れた文字列をindexOfで解釈したい

    すみません、質問したいと思います。 自身のURLを参照して、それを変数に格納し、その文字列中にある #の位置をindex.Ofで解釈したいと思います。 なので、以下のようなjavaScriptを書いたのですが、うまくいきません。 なぜでしょう、よければ教えてください。 <script language=javascript> var loc = this.window.location; var sharp_pos = loc.indexOf("#");//＃がなければ-1を返す document.write(loc); </script> 以上のものを実行したら、URL中の#の位置がブラウザ上で数字で 確認できると思ってたのですが・・・。 javascriptって、変数に格納した文字列は解釈できないのでしたっけ？ perlだったら出来てたような気がしますが・・。 本を見たら、直接文字列をいじっているサンプルしかありませんでした。 　"abcde".indexOf("c"); ⇒2を返す よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する