web-dev-qa-db-fra.com

Envoi d'un MediaStream au serveur hôte avec WebRTC après sa capture par getUserMedia

Je capture des données audio à l'aide de getUserMedia() et je veux les envoyer à mon serveur afin de pouvoir les enregistrer en tant qu'objet blob dans un champ MySQL.

C'est tout ce que j'essaie de faire. J'ai fait plusieurs tentatives pour ce faire en utilisant WebRTC, mais je ne sais même pas à ce stade si c'est la bonne ou même la meilleure façon de le faire.

Est-ce que quelqu'un peut m'aider?

Voici le code que j'utilise pour capturer l'audio du microphone:

navigator.getUserMedia({
    video:false,
    audio:true,
},function(mediaStream){

    // output mediaStream to speakers:
    var mediaStreamSource=audioContext.createMediaStreamSource(mediaStream);
    mediaStreamSource.connect(audioContext.destintion);

    // send mediaStream to server:

    // WebRTC code? not sure about this...
    var RTCconfig={};
    var conn=new RTCPeerConnection(RTCconfig);

    // ???

},function(error){
    console.log('getUserMedia() fail.');
    console.log(error);
});

Comment envoyer ce mediaStream au serveur?

Après avoir fait des recherches sur Google, je me suis penchée sur WebRTC, mais cela semble être uniquement pour la communication poste à poste - en fait, maintenant je suis plus à la recherche, je pense que c'est la voie à suivre. Cela semble être le moyen de communiquer depuis le navigateur du client jusqu'au serveur Web hôte, mais rien de ce que j'essaie ne fonctionne même presque.

J'ai parcouru la documentation du W3C (ce que je trouve trop abstrait), et je suis passé par cet article sur HTML5 Rocks (qui fait apparaître plus de questions que de réponses). Apparemment, j'ai besoin d'une méthode de signalisation. Quelqu'un peut-il indiquer la meilleure méthode de signalisation pour l'envoi de mediaStreams, XHR, XMPP, SIP, Socket.io ou autre chose?

De quoi ai-je besoin sur le serveur pour prendre en charge la réception de WebRTC? Mon serveur Web exécute une pile LAMP de base.

De plus, est-il préférable d'attendre que le mediaStream ait terminé l'enregistrement avant de l'envoyer au serveur, ou est-il préférable d'envoyer le mediaStream tel qu'il est enregistré? Je veux savoir si je vais le faire correctement. J'ai écrit des téléchargeurs de fichiers en javascript et HTML5, mais le téléchargement de l'un de ces mediaStreams semble infiniment plus compliqué et je ne suis pas sûr si je l'aborde correctement.

Toute aide à ce sujet serait grandement appréciée.

javascriptjqueryaudiowebrtcgetusermedia
39
Jimmery

Vous ne pouvez pas télécharger le flux en direct lui-même pendant son exécution. C'est parce que c'est un flux LIVE.

Donc, cela vous laisse quelques options.

  1. Enregistrez le flux audio en utilisant l'un des nombreux enregistreurs disponibles RecordRTC fonctionne assez bien. Attendez que le flux soit terminé, puis téléchargez le fichier.
  2. Envoyez de plus petits morceaux d'audio enregistré avec une minuterie et fusionnez-les à nouveau côté serveur. Ceci est un exemple de cela
  3. Envoyez les paquets audio au fur et à mesure qu'ils se produisent sur les websockets à votre serveur afin que vous puissiez les manipuler et les fusionner. Ma version de RecordRTC le fait .
  4. Établissez une connexion homologue réelle avec votre serveur afin qu'il puisse récupérer le flux rtp brut et vous pouvez enregistrer le flux en utilisant un code de niveau inférieur. Cela peut facilement être fait avec Janus-Gateway .

Quant à l'attente pour envoyer le flux vs l'envoyer par morceaux, tout dépend de la durée d'enregistrement. Si c'est pour une période plus longue, je dirais que l'envoi de l'enregistrement en morceaux ou l'envoi actif de paquets audio sur les websockets est une meilleure solution car le téléchargement et le stockage de fichiers audio plus volumineux du côté client peuvent être difficiles pour le client.

Firefox a en fait son propre solution d'enregistrement mais il n'est pas pris en charge dans chrome donc cela peut ne pas fonctionner dans votre situation.

En passant, la méthode de signalisation mentionnée est pour la création/destruction de session et n'a vraiment rien à voir avec le média lui-même. Vous ne vous en soucieriez vraiment que si vous utilisiez éventuellement la solution numéro 4 illustrée ci-dessus.

45
Benjamin Trent

Une bonne API pour vous serait API MediaRecorder mais elle est moins prise en charge que l'API Web Audio, vous pouvez donc le faire en utilisant un ScriptNode ou utiliser Recorder.js (ou base dessus pour construire votre propre scriptnode).

3
Luizgrs