Comment enregistrer webcam et audio en utilisant webRTC et une connexion Peer basée sur le serveur

Je voudrais enregistrer la webcam et l’audio des utilisateurs et l’enregistrer dans un fichier sur le serveur. Ces fichiers pourront alors être diffusés à d’autres utilisateurs.

Je n’ai aucun problème avec la lecture, mais j’ai du mal à enregistrer le contenu.

Je crois savoir que la fonction getUserMedia .record() n’a pas encore été écrite – seule une proposition a été faite jusqu’à présent.

Je voudrais créer une connexion homologue sur mon serveur en utilisant PeerConnectionAPI. Je comprends que c’est un peu piraté, mais je pense qu’il devrait être possible de créer un pair sur le serveur et d’enregistrer ce que le client-homologue envoie.

Si cela est possible, je devrais alors pouvoir enregistrer ces données au format FLV ou tout autre format vidéo.

Ma préférence est en fait d’enregistrer la webcam + le côté client audio, pour permettre au client de réenregistrer des vidéos s’il n’a pas aimé sa première tentative avant le téléchargement. Cela permettrait également des interruptions dans les connexions réseau. J’ai vu du code qui permet d’enregistrer des images individuelles à partir de la webcam en envoyant les données sur le canevas – c’est cool, mais j’ai aussi besoin de l’audio.

Voici le code côté client que j’ai jusqu’à présent:

    function onVideoFail(e) { console.log('webcam fail!', e); }; function hasGetUserMedia() { // Note: Opera is unprefixed. return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); } if (hasGetUserMedia()) { // Good to go! } else { alert('getUserMedia() is not supported in your browser'); } window.URL = window.URL || window.webkitURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; var video = document.querySelector('video'); var streamRecorder; var webcamstream; if (navigator.getUserMedia) { navigator.getUserMedia({audio: true, video: true}, function(stream) { video.src = window.URL.createObjectURL(stream); webcamstream = stream; // streamrecorder = webcamstream.record(); }, onVideoFail); } else { alert ('failed'); } function startRecording() { streamRecorder = webcamstream.record(); setTimeout(stopRecording, 10000); } function stopRecording() { streamRecorder.getRecordedData(postVideoToServer); } function postVideoToServer(videoblob) { /* var x = new XMLHttpRequest(); x.open('POST', 'uploadMessage'); x.send(videoblob); */ var data = {}; data.video = videoblob; data.metadata = 'test metadata'; data.action = "upload_video"; jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess); } function onUploadSuccess() { alert ('video uploaded'); }   

    Vous devriez certainement jeter un oeil à Kurento . Il fournit une infrastructure de serveur WebRTC qui vous permet d’enregistrer à partir d’un stream WebRTC et bien plus encore. Vous pouvez également trouver des exemples pour l’application que vous planifiez ici . Il est vraiment facile d’append des capacités d’enregistrement à cette démo et de stocker le fichier multimédia dans un URI (disque local ou ailleurs).

    Le projet est sous licence LGPL Apache 2.0


    EDIT 1

    Depuis ce post, nous avons ajouté un nouveau tutoriel qui montre comment append l’enregistreur dans quelques scénarios

    • kurento-hello-world-recording : tutoriel d’enregistrement simple, montrant les différentes capacités du sharepoint terminaison d’enregistrement.
    • kurento-one2one-recording : comment enregistrer une communication univoque sur le serveur multimédia.
    • kurento-hello-world-repository : utilisez un référentiel externe pour enregistrer le fichier.

    Disclaimer: Je fais partie de l’équipe qui développe Kurento.

    S’il vous plaît, vérifiez le RecordRTC

    RecordRTC est sous licence MIT sur github .

    Je pense qu’utiliser kurento ou d’autres MCU uniquement pour enregistrer des vidéos serait un peu exagéré, en particulier compte tenu du fait que Chrome supporte l’ API MediaRecorder de la version 47 et de Firefox depuis la version 25. Donc, à cette intersection, vous n’avez peut-être même pas besoin d’une bibliothèque js externe pour faire le travail, essayez cette démo que j’ai faite pour enregistrer de la vidéo / audio en utilisant MediaRecorder:

    Demo – fonctionnerait en chrome et en firefox

    Source de code Github

    Si vous utilisez Firefox, vous pouvez le tester ici même (chrome doit être https ):

     'use ssortingct' let log = console.log.bind(console), id = val => document.getElementById(val), ul = id('ul'), gUMbtn = id('gUMbtn'), start = id('start'), stop = id('stop'), stream, recorder, counter = 1, chunks, media; gUMbtn.onclick = e => { let mv = id('mediaVideo'), mediaOptions = { video: { tag: 'video', type: 'video/webm', ext: '.mp4', gUM: { video: true, audio: true } }, audio: { tag: 'audio', type: 'audio/ogg', ext: '.ogg', gUM: { audio: true } } }; media = mv.checked ? mediaOptions.video : mediaOptions.audio; navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => { stream = _stream; id('gUMArea').style.display = 'none'; id('btns').style.display = 'inherit'; start.removeAtsortingbute('disabled'); recorder = new MediaRecorder(stream); recorder.ondataavailable = e => { chunks.push(e.data); if (recorder.state == 'inactive') makeLink(); }; log('got media successfully'); }).catch(log); } start.onclick = e => { start.disabled = true; stop.removeAtsortingbute('disabled'); chunks = []; recorder.start(); } stop.onclick = e => { stop.disabled = true; recorder.stop(); start.removeAtsortingbute('disabled'); } function makeLink() { let blob = new Blob(chunks, { type: media.type }), url = URL.createObjectURL(blob), li = document.createElement('li'), mt = document.createElement(media.tag), hf = document.createElement('a'); mt.controls = true; mt.src = url; hf.href = url; hf.download = `${counter++}${media.ext}`; hf.innerHTML = `donwload ${hf.download}`; li.appendChild(mt); li.appendChild(hf); ul.appendChild(li); } 
      button { margin: 10px 5px; } li { margin: 10px; } body { width: 90%; max-width: 960px; margin: 0px auto; } #btns { display: none; } h1 { margin-bottom: 100px; } 
      

    MediaRecorder API example

    For now it is supported only in Firefox(v25+) and Chrome(v47+)

    Record: Video audio

      oui, comme vous l’avez compris, MediaStreamRecorder n’est actuellement pas mis en œuvre.

      MediaStreamRecorder est une API WebRTC pour l’enregistrement des stream getUserMedia (). Il permet aux applications Web de créer un fichier à partir d’une session audio / vidéo en direct.

      Alternativement, vous pouvez faire comme ceci http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia mais l’audio est une partie manquante.

      Vous pouvez utiliser RecordRTC-together , qui est basé sur RecordRTC.

      Il prend en charge l’enregistrement vidéo et audio dans des fichiers séparés. Vous aurez besoin d’un outil comme ffmpeg pour fusionner deux fichiers en un seul sur le serveur.

      Web Call Server 4 peut enregistrer des fichiers audio et vidéo WebRTC dans un conteneur WebM. L’enregistrement est effectué en utilisant le codec Vorbis pour l’audio et le codec VP8 pour la vidéo. Les codecs WebRTC initiaux sont Opus ou G.711 et VP8. Ainsi, l’enregistrement côté serveur nécessite un transcodage côté serveur Opus / G.711 à Vorbis ou un transcodage VP8-H.264 s’il est nécessaire d’utiliser un autre conteneur, à savoir AVI.

      Pour mémoire je n’ai pas assez de connaissances à ce sujet,

      Mais j’ai trouvé ça sur le hub de Git

       < !DOCTYPE html>   XSockets.WebRTC Client example     

      XSockets.WebRTC Client example

      Remote videos

      Recordings ( Click on your camera stream to start record)

        Trace

        Sur la ligne numéro 89 dans mon cas, le code OnrecordComplete ajoute un lien de fichier enregistreur. Si vous cliquez sur ce lien, le téléchargement démarrera, vous pourrez enregistrer ce chemin sur votre serveur en tant que fichier.

        Le code d’enregistrement ressemble à ceci

         recorder.oncompleted = function (blob, blobUrl) { trace("Recorder completed.. "); var li = document.createElement("li"); var download = document.createElement("a"); download.textContent = new Date(); download.setAtsortingbute("download", XSockets.Utils.randomSsortingng(8) + ".webm"); download.setAtsortingbute("href", blobUrl); li.appendChild(download); $("ul").appendChild(li); }; 

        BlobUrl détient le chemin. J’ai résolu mon problème avec ceci, j’espère que quelqu’un trouvera cela utile

        Découvrez Janus. Voici une démo d’enregistrement:

        https://janus.conf.meetecho.com/recordplaytest.html

        Contrairement à Kurento, dont le développement a fortement ralenti après l’acquisition de Twilio, Janus continue à être activement développé et soutenu.

        Techniquement, vous pouvez utiliser FFMPEG sur backend pour mixer de la vidéo et de l’audio