web-dev-qa-db-ja.com

navigator.getUserMediaが機能しないAndroid / Chrome

次のコードがAndroid/Chromeで機能しない理由がわかりますか？

Desktop/Chromeではうまく機能します。

function console_log(data) {
        console.log(data)
        var data_str = String(data);
        var $div = $('<div></div>');
        $div.append(data_str);
        $('.console').append($div);
}
$(function(){
        var constraints = { audio: true, video:false }
        //---
        console_log('navigator.mediaDevices...');
        console_log(navigator.mediaDevices);
        //---
        // # TEST 01 #
        var userMedia = navigator.getUserMedia(constraints, function(){
                console_log('---');
                console_log('# TEST 01 # Inside Success Callback');
        }, function(err){
                console_log('---');
                console_log('# TEST 01 # Inside Error Callback');
                console_log(err);
        });
        //---
        navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
                console_log('---');
                console_log('# TEST 02 # Inside Success Callback');
        }).catch(function(err) {
                console_log('---');
                console_log('# TEST 02 # Inside Error Callback');
                console_log(err);
        });
});
body {
        font-family: arial;
        font-size: 14px;
}
.console {
        font-family: monospace;
        white-space: pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="console"></div>

念のため、ここにJSFiddleリンクがあります。

https://jsfiddle.net/2yum1a0w

成功するには、Desktop/Chromeで開き、次のセクションに移動してください：Result...

https://jsfiddle.net/2yum1a0w/embedded

Desktop/Chromeでは、次のようになります。

navigator.mediaDevices...
[object MediaDevices]
---
# TEST 01 # Inside Success Callback
---
# TEST 02 # Inside Success Callback

Android/Chromeでは、次のようになります。

navigator.mediaDevices...
[object MediaDevices]
---
# TEST 01 # Inside Error Callback
NotAllowedError: Permission denied
---
# TEST 02 # Inside Error Callback
NotAllowedError: Permission denied

ところで、Desktop/Firefoxでは次のようになります。

navigator.mediaDevices...
[object MediaDevices]

次のコンソールエラーとともに：

TypeError: navigator.getUserMedia is not a function

これをAndroid/Chromeで機能させる方法について何か考えはありますか？

EDIT 1

以下のJoseph Gordyからの回答に基づいて、私は試しました：

https://jsfiddle.net/wrmvn8k4/

https://jsfiddle.net/wrmvn8k4/embedded

これはDesktop/Firefoxの取得で正しく機能するようになりました。

navigator.mediaDevices...
[object MediaDevices]
---
# TEST # Inside Success Callback

しかしAndroid/Chromeでは

navigator.mediaDevices...
[object MediaDevices]
---
# TEST # Inside Error Callback
NotAllowedError: Permission denied

ありがとう！

javascriptandroidhtmlmedia
10
David Smith

同じ問題がありました。モバイルブラウザは、許可についてさえ尋ねていません。そしてその理由はSSLでした！安全な接続を使用する必要があります

「安全なコンテキストが必要です」セクションをチェックしてください ここ

11
zvadym

MDNによれば、navigator.getUserMedia()は非推奨であり、Android/Chromeおよび一部の新しいブラウザーバージョンではサポートされていません。代わりに navigator.mediaDevices.getUserMedia() を使用してください。以下のブラウザの互換性を確認できます。

MDN Navigator.getUserMediaブラウザチェック

これは、過去のプロジェクトでビデオストリーミングのためにカメラにアクセスするために使用した部分的な例です。ブラウザは、デバイスへのアクセスをユーザーに要求する必要があります。

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ audio: false, video:  cameraOrientation })
    .then(function(stream) {
      if ("srcObject" in video) {
          video.srcObject = stream;
        } else {
          video.src = window.URL.createObjectURL(stream);
        }
        video.onloadedmetadata = function(e) {
          video.play();
        };
    });
};
1
Joseph Gordy