WebRTCのgetUserMedia（）はFirefoxでのみ動作します

Question

私はモバイルWebプロジェクトでカメラにアクセスして写真を撮ってから操作する必要があります。問題は、ブラウザから直接写真を撮る必要があり、ネイティブカメラアプリを開いて撮影する必要がないことです。

私はこのタスクにWebRTCを使用します。 getUserMedia()にアクセスし、リアルタイムのカメラ表示である「ビデオ」を再生します。このタスクは、AndroidとiOS向けです。

これはFirefoxで完全に機能します。 SafariではgetUserMedia()はまだこのブラウザではサポートされていないため、これは実現不可能だと思われますが、Google Chromeはサポートしていますが、Chromeで動作させることはできません。

Chromeの問題は、ユーザーが背面または前面のカメラを選択できないため、画像が表示されない、常に黒い画像であるというバグのようです。

私のコードは非常に簡単ですが、私はhttps://davidwalsh.name/browser-cameraから取りますが、理論的にはすべてのブラウザで動作しますが、Chromeで動作させることはできません。これはコードです：

<video id="video" width="480" height="640" autoplay controls></video> 
<button id="snap">Capture</button> 
<canvas id="canvas" width="480" height="740"></canvas> 

<script> 
// Grab elements, create settings, etc. 
var video = document.getElementById('video'); 
var i = 0; 
// Get access to the camera! 
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 
    // Not adding `{ audio: true }` since we only want video now 
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) { 
     video.src = window.URL.createObjectURL(stream); 
     video.play(); 
    }); 
} 
else if(navigator.getUserMedia) { // Standard 
    navigator.getUserMedia({ video: true }, function(stream) { 
     video.src = stream; 
     video.play(); 
    }, errBack); 
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
    navigator.webkitGetUserMedia({ video: true }, function(stream){ 
    alert(window.webkitURL); 
    alert(window.webkitURL.createObjectURL(stream)); 
     video.src = window.webkitURL.createObjectURL(stream); 
     video.play(); 
    }, errBack); 
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed 
    navigator.mozGetUserMedia({ video: true }, function(stream){ 
     video.src = window.URL.createObjectURL(stream); 
     video.play(); 
    }, errBack); 
} 

// Elements for taking the snapshot 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
var video = document.getElementById('video'); 

// Trigger photo take 
document.getElementById("snap").addEventListener("click", function() { 
    context.drawImage(video, 0, 0, 640, 480); 
}); 
</script> 

どのように私はそれをクロームで動作させることができますか？ Chromeで使用するカメラ（リア/フロント）をユーザーに尋ねるにはどうすればよいですか？私はインターネット上でChromeにカメラを選択するバグがあることを伝えるユーザーが見つかったので、これは問題だと思います。

クロムデスクトップでは1台のカメラしか存在しないため、どのカメラを使用するかをユーザーに委任していないため、Chromeデスクトップでは完全に機能します。しかし、2つのカメラを搭載したモバイル機器では、どのように選択するのか不可能です。

ありがとうございます。

私はポリフィルを使用していません。重複したマークは私の問題を解決するものではありません。私はこれにいくつかの助けが必要です。私はこの問題の解決法で標準的な答えが必要です。あなたの時間をありがとう！私は恩恵を申し出ます。

Answer 1

カメラを選択するには、facingModeが"user" or "environment"に設定された制約パラメータを追加します。ユーザーがこれらの詳細を追加しないようにする。

var myConstraints = { 
    audio: false, 
    video: { 
     facingMode: "user" 
    } 
}; 

新しいAPIがベースの約束のようになりますhttps://w3c.github.io/mediacapture-main/#dom-mediadevices-getusermedia

を参照してください。

navigator.getUserMedia(myConstraints).then(function(stream) { 
    video.srcObject = stream; 
    video.play(); 
}).catch(errBack); 

将来性APIを使用して、それを動作させるために今、あなたは `https://github.com/webrtc/adapter

Answer 2

httpsに導入していますか？ Chromeはセキュリティ上の理由からhttpページでgetUserMediaを許可しません。

カメラを列挙して選択するにはthis sampleも参照してください。あなたが求めている対面モードの制約は、残念ながら今は壊れています。