getUserMedia API無法捕獲音頻以及來自Chrome擴展的視頻

我正在使用getUserMedia API從Chrome擴展中捕獲屏幕並錄製音頻（在一起）。 api捕捉屏幕，記錄視頻但不捕獲音頻。getUserMedia API無法捕獲音頻以及來自Chrome擴展的視頻

Chrome版本：55

音頻未被捕獲的任何原因。 api是否有任何限制或者我們是否需要使用任何其他api來捕捉視頻+音頻？請找到下面的代碼片段。（下面的代碼存在於background.js中）

（嘗試傳遞約束作爲audio：true，video：true，但是這並不奏效，它引發了一個錯誤（Error - getUserMedia（）failed：[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); 
}

來源

2016-12-27 Anil

_「這是拋出一個錯誤。」_錯誤是什麼？ – guest271314

錯誤：getUserMedia（）失敗：[對象NavigatorUserMediaError] – Anil

是協議'https：'？ – guest271314

根據這一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])

來源

2016-12-27 06:39:04 Kaiido

因爲這是頂級的谷歌結果爲「NavigatorUserMediaError mediaRecorder」我想建議過，如果其他人是否獲得該錯誤消息，Android上的Chrome瀏覽器例如，它可能有安全證書做。 MediaRecorder無法訪問移動設備的麥克風或攝像機，除非該站點具有SSL證書並且該URL是HTTPS。

您可以要求HTTPS以同樣的方式谷歌沒有其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會免費提供。你也可以在本地運行這些文件，它不需要任何安全證書，但我還沒有測試過。

來源

2017-07-27 00:58:07

getUserMedia API無法捕獲音頻以及來自Chrome擴展的視頻

回答

相關問題