Pourquoi MediaRecorder ne démarre pas? (erreur: il n'y a pas de pistes audio ou vidéo disponibles) RecordRTC

Question

MISE À JOUR: La meilleure hypothèse actuelle est que cela est en quelque sorte causé par les grands réseaux scolaires/universitaires - les autres utilisateurs n'ont pas le problème.

---

J'utilise RecordRTC pour enregistrer de l'audio. Cela repose sur MediaRecorder.

Lors du premier démarrage de l'enregistrement, ce (pris) erreur est enregistré:

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

Avant cela, RecordRTC appelle l'API MediaRecorder:

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

Et voici le retraçage dans le code. Il commence par un appel à startRecording (dans une saga Redux):

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

est ici 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) 
} 

} 

Voici 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) 
}); 
}; 

L'erreur semble se produire à cette ligne en particulier de startRecording:

this.rtcRecorder.startRecording() 

Il y a quelques détails qui pourraient être utiles pour résoudre ce:

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.

MISE À JOUR:

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....

Laissez-moi savoir ce que d'autres informations serait utile et je vais répondre immédiatement. Je vous remercie.

MISE À JOUR:

Muaz Khan a suggéré d'ajouter un élément audio caché pour empêcher le flux et les pistes d'être arrêté/libéré. Voici le code supplémentaire qui a été ajouté avant de capturer un flux (lorsque l'enregistreur est d'abord initialisé):

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() 

MISE À JOUR 2:

Mais il ne fonctionne toujours pas. Une réflexion sur pourquoi cela n'a peut-être pas fonctionné:

1. Je ne suis pas sûr que l'élément hiddenAudio HTML soit en train de persister et de capturer le flux. (Il pourrait être scope de manière incorrecte.)

Je suis à me demander s'il y a une erreur subtile dans l'enfer de rappel de navigator.getUserMedia et que l'utilisation de la nouvelle navigator.mediaDevices getusermedia (qui repose sur des promesses) serait plus simple à suivre.

L'autre possibilité est que l'erreur est introduite lorsque l'enregistreur est initialized- c'est ici:

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 
    } 


}); 
}; 

Merci encore.

MISE À JOUR:

Y compris ici les profils de deux utilisateurs qui ont ce problème (les deux grands réseaux école publique/universitaires). Le problème ne se produit pas aux utilisateurs sur les réseaux domestiques privés:

Answer 1

Le problème était que captureUserMedia qui avait besoin d'un accès au flux:

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

Answer 2

Ce code échouera quand il y a une erreur getUserMedia. Remplacez this.captureUserMedia((stream) => { par this.captureUserMedia((stream, err) => { et de gérer err étant défini (alors que le flux est nul). La manière la plus simple de reproduire ceci est probablement de bloquer les permissions en cliquant sur l'icône de l'appareil photo tout à fait à droite dans la barre d'adresse.