getUserMedia APIはクロム拡張子のビデオと共にオーディオをキャプチャできません

Question

getUserMedia APIを使用して、画面をキャプチャし、オーディオを（両方とも）クロム拡張から取得しています。 apiは画面をキャプチャし、ビデオを記録しますが、オーディオはキャプチャしません。

クロムバージョン：55

音声がキャプチャされていない理由。 apiに制限がありますか、ビデオ+オーディオをキャプチャするために他のAPIを使用する必要がありますか？ 以下のコードスニペットをご覧ください。 （下のコードはbackground.jsにあります）

（audio：true、video：trueのように制約を渡してみましたが、これはエラーを投げていました（エラー - getUserMedia（）は失敗しました：[object NavigatorUserMediaError ]））

chrome.desktopCapture.chooseDesktopMedia(['screen','audio'], 
    function onAccessApproved(id) {  

    const constraints = { "video": { 
      mandatory: { 
       chromeMediaSource: 'desktop',  
       chromeMediaSourceId: id,   
       minWidth: 1280, 
       minHeight: 720,     
       maxWidth:1280, 
       maxHeight:720 
      } 
      }, "audio" : { 
      mandatory: { 
       chromeMediaSource: 'desktop',  
      chromeMediaSourceId: id}} };      

navigator.mediaDevices.getUserMedia(constraints).then(gotMedia).catch(e => { console.error('getUserMedia() failed: ' + e); 
}); 

function gotMedia(stream) { 

    theStream = stream; 
    var video = document.createElement('video'); 
    video.src = URL.createObjectURL(stream); 
    video.srcObject = stream; 

    try { 
    recorder = new MediaRecorder(stream, {mimeType : "video/webm"}); 
    } catch (e) { 
    console.error('Exception while creating MediaRecorder: ' + e); 
    return; 
    } 

    theRecorder = recorder; 
    recorder.ondataavailable = 
     (event) => { recordedChunks.push(event.data); }; 
    recorder.start(100); 


    stream.getVideoTracks()[0].onended = function() { 
     download(); 
    }; 
} 


function download() { 


    theRecorder.stop(); 
    theStream.getTracks().forEach(track => { track.stop(); }); 

    var blob = new Blob(recordedChunks, {type: "video/webm"}); 
    var url = URL.createObjectURL(blob); 
    var a = document.createElement("a"); 
    document.body.appendChild(a); 
    a.style = "display: none"; 
    a.href = url; 
    a.download = 'test.webm'; 
    a.click(); 
    // setTimeout() here is needed for Firefox. 
    setTimeout(function() { URL.revokeObjectURL(url); }, 100); 
} 

Answer 1

このwebRTC Experiment's pageによる

Why Screen Sharing Fails?
[...]
2. On chrome, you requested audio-stream alongwith 'chromeMediaSource' – it is not permitted on chrome.

、画面の共有についてとてもそれが許可されていません。

オーディオのみのパラレルリクエストを作成して、両方のストリームをMediaStream.addTrack()にマージすることもできますが、テストしませんでした。

videoStream.addTrack(audioStream.getAudioTracks()[0])

Answer 2

これは「NavigatorUserMediaError mediaRecorderは」私は誰にも例えばAndroidのChromeで、そのエラーメッセージを取得している場合、それはセキュリティ証明書としなければならないかもしれないことをあまりにも示唆したいのトップGoogleの結果であるので、 。サイトにSSL証明書があり、URLがHTTPSでない限り、MediaRecorderはモバイルデバイスのマイクまたはカメラにアクセスできません。

あなたがでHTTPS Googleは同じ方法を要求することができ、そのsimple.info/mr例のcode：

// window.isSecureContext could be used for Chrome 
var isSecureOrigin = location.protocol === 'https:' || 
location.hostname === 'localhost'; 
if (!isSecureOrigin) { 
    alert('getUserMedia() must be run from a secure origin: HTTPS or localhost.' + 
    '\n\nChanging protocol to HTTPS'); 
    location.protocol = 'HTTPS'; 
} 

しかし、あなたはまた、サイトが参照するSSL証明書を持っていることを確認する必要があります。 HostGatorの費用は約$ 30 /年ですが、GitHub.ioはコードをテストするだけで無料で提供しています。また、ローカルでファイルを実行することもできますが、セキュリティ証明書は必要ありませんが、まだテストしていません。