爲什麼MediaRecorder無法啓動？ （錯誤：沒有可用的音頻或視頻曲目）RecordRTC

Question

更新：當前最好的假設是，這是由大型學校/大學網絡引起的 - 其他用戶沒有問題。

---

我正在使用RecordRTC錄製音頻。這依賴於MediaRecorder。

在第一次開始記錄，這（抓）記錄錯誤：

DOM exception: failed to execute start on Media recorder: The 
MediaRecorder failed to start because there are no audio or video 
tracks available 

在此之前，RecordRTC調用MediaRecorder API：

Using recorderType:MediaStreamRecorder 
Passing following config over MediaRecorder API.Object {audio: "true", mimeType: "audio/webm", checkForInactiveTracks: "true", type: "audio", initCallback: "[object Function]"} 

而這裏的代碼的回溯。它開始於startRecording呼叫（在終極版傳奇）：

const recorder = yield select(getRecorder) 
    yield call(recorder.startRecording) 

這裏的startRecording

startRecording =() => { 

try { 
    this.captureUserMedia((stream) => { 
    try { 
     this.rtcRecorder.startRecording() 
    this.recording = true 
    } catch (err) { 
     sendEmail(err, "inner startRecording failed", "support@gmail.com") 
     console.log("inner startRecording ERROR: ", err) 
    } 
    }); 
} catch (err) { 
    sendEmail(err, "startRecording failed", "support@gmail.com") 
    console.log("startRecording ERROR: ", err) 
} 

} 

這裏的captureUserMedia：

captureUserMedia(callback) { 
var params = { audio: true, video: false }; 

navigator.getUserMedia(params, callback, (error) => { 
    // alert(JSON.stringify(error)); 
    console.log('USER MEDIA ERROR:: ' + JSON.stringify(error)) 
    callback(null, error) 
}); 
}; 

的錯誤似乎在此行特別是發生startRecording：

this.rtcRecorder.startRecording() 

有更多的一些細節，可能是解決這個有用：

1. Chrome version does not seem to be the problem: some users with v61.0.3163.100 have the problem, while others don't
   2. For the users who experience the problem, it seems to occur every time.
   3. Apparently, navigator.getUserMedia is deprecated, but it still should function— the complicated logic of the promise could be introducing a bug.

UPDATE：

4. The problem has happened to two users who were on large networks (A university network and a public school district network). It has not yet happened to any users who were on private home networks....

讓我瞭解其他信息將是有益的，我會立刻做出反應。謝謝。

UPDATE：

Muaz汗建議增加一個隱藏的音頻元件，以防止從被停止流和曲目/釋放。下面是被捕獲流（當刻錄機第一次初始化）之前添加額外的代碼：

var hiddenAudio = document.createElement('audio'); 
    hiddenAudio.srcObject = stream // this line is required to make sure stream tracks aren't stopped/released 
    hiddenAudio.muted = true 
    hiddenAudio.play() 

更新2：

但它仍然沒有工作。一個想法，爲什麼這可能沒有奏效：

1. 我不確定隱藏的音頻HTML元素實際上持續和捕獲流。 （這可能是不正確的作用域。）

我在想，如果有在navigator.getUserMedia回調地獄一個微妙的錯誤，並且使用較新的navigator.mediaDevices getusermedia（這依賴於承諾）會更簡單跟隨。

另一種可能性是引入的誤差，當錄音機initialized-這是這裏：再次

initialize = (callback) => { 

if (!!this.rtcRecorder) { 
    console.log('Attempted to initialize an already initialized recorder but that\'s expected') 
    return 
} 

console.log('initialize Recorder -- requestUserMedia') 
this.captureUserMedia((stream, error) => { 

    if (error) { 
    console.log('!!errror capturing user media!!') 
    return callback && callback(error) 
    } 

    // TODO: detect if system can play webms 

    // <-- smaller filesize 
    // this.rtcRecorder = RecordRTC(stream, { recorderType: RecordRTC.StereoAudioRecorder, bitsPerSecond: 30000, numberOfAudioChannels: 1, mimeType: 'audio/wav' }); 

    try { 

    // the MUAZ KHAN edits 
    var hiddenAudio = document.createElement('audio'); 
    hiddenAudio.srcObject = stream // this line is required to make sure stream tracks aren't stopped/released 
    hiddenAudio.muted = true 
    hiddenAudio.play() 


    this.rtcRecorder = RecordRTC(stream, { audio: 'true', mimeType: 'audio/webm', checkForInactiveTracks: 'true' }); 
    callback && callback(null) 
    return true 
    } catch (err) { 
    sendEmail(err, "captureMedia (inner-most) startRecording failed", "support@gmail.com") 
    console.log("captureMedia (inner-most) startRecording ERROR: ", err) 
    callback && callback(null) 
    return true 
    } 


}); 
}; 

感謝。

UPDATE：

這裏包括誰是有這個問題（包括大型公共學校/大學網絡）兩個用戶的配置文件。這個問題不是發生在用戶的私人家庭網絡：當有getUserMedia錯誤

Answer 1

問題是這captureUserMedia這需要訪問流：

captureUserMedia(callback) { 
var params = { audio: true, video: false }; 
navigator.getUserMedia(params, (stream) => { 
    callback(stream) 
}, (err) => { 
    callback(null, err) 
}) 
return 
} 

Answer 2

此代碼將失敗。更改 this.captureUserMedia((stream) => { 至 this.captureUserMedia((stream, err) => { 並處理err被設置（而流爲空）。最簡單的重現方法是通過單擊地址欄最右側的攝像頭圖標來阻止權限。