Enregistrement vidéo HTML 5 et stockage d'un flux

En utilisant Html 5, je souhaite enregistrer une vidéo et enregistrer le flux dans un fichier local. Voici le code ci-dessous. Dans un clic de bouton, il invoque déjà la caméra et capture la vidéo dans la balise 'VIDEO' du HTML. Puis-je stocker le flux dans un fichier local? Ou puis-je l'enregistrer en fichier MP4?

<!DOCTYPE html> <html> <head> <script type="text/javascript"> function enter() { if (navigator.mozGetUserMedia) { navigator.myGetMedia=navigator.mozGetUserMedia; navigator.myGetMedia({video: true}, connect, error); } else { alert("NO"); } function connect(stream) { var video = document.getElementById("my_video"); video.src = window.URL ? window.URL.createObjectURL(stream) : stream; video.play(); var canvas = document.getElementById("c"); } function error(e) { console.log(e); } } </script> </head> <body> <canvas width="640" height="480" id="c"></canvas> <input type="button" value="RECORD" onClick="enter()"/> <input type="button" value="SAVE" /> <video id="my_video" width="640" height="480"/> </body> </html>

Je souhaite enregistrer le flux sur un clic de bouton de sauvegarde.

RecordRTC: Enregistrement audio / vidéo WebRTC

https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC

Enregistrement audio à la fois pour Chrome et Firefox
Enregistrement vidéo / Gif pour Chrome; (Firefox a quelques problèmes, sera bientôt récupéré)

Démo: https://www.webrtc-experiment.com/RecordRTC/

Création de la vidéo .webm depuis getUserMedia ()

http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

Demo: http://html5-demos.appspot.com/static/getusermedia/record-user-webm.html

Capture d'audio et vidéo en HTML5

http://www.html5rocks.com/fr/tutorials/getusermedia/intro/

MediaRecorder API est la solution que vous recherchez,

Firefox l'a soutenu depuis un certain temps maintenant, et le buzz est que chrome va le mettre en œuvre dans sa prochaine version (chrome 48), mais pensez que vous devrez peut-être encore activer le drapeau expérimental, de manière appropriée, le drapeau ne sera pas nécessaire Chrome version 49, pour plus d'informations, vérifiez ce problème Chrome .

Pendant ce temps, un exemple de comment le faire dans firefox:

 var video, reqBtn, startBtn, stopBtn, ul, stream, recorder; video = document.getElementById('video'); reqBtn = document.getElementById('request'); startBtn = document.getElementById('start'); stopBtn = document.getElementById('stop'); ul = document.getElementById('ul'); reqBtn.onclick = requestVideo; startBtn.onclick = startRecording; stopBtn.onclick = stopRecording; startBtn.disabled = true; ul.style.display = 'none'; stopBtn.disabled = true; function requestVideo() { navigator.mediaDevices.getUserMedia({ video: true, audio: true }) .then(stm => { stream = stm; reqBtn.style.display = 'none'; startBtn.removeAttribute('disabled'); video.src = URL.createObjectURL(stream); }).catch(e => console.error(e)); } function startRecording() { recorder = new MediaRecorder(stream, { mimeType: 'video/mp4' }); recorder.start(); stopBtn.removeAttribute('disabled'); startBtn.disabled = true; } function stopRecording() { recorder.ondataavailable = e => { ul.style.display = 'block'; var a = document.createElement('a'), li = document.createElement('li'); a.download = ['video_', (new Date() + '').slice(4, 28), '.webm'].join(''); a.href = URL.createObjectURL(e.data); a.textContent = a.download; li.appendChild(a); ul.appendChild(li); }; recorder.stop(); startBtn.removeAttribute('disabled'); stopBtn.disabled = true; }

 <div> <button id='request'> Request Camera </button> <button id='start'> Start Recording </button> <button id='stop'> Stop Recording </button> <ul id='ul'> Downloads List: </ul> </div> <video id='video' autoplay></video>

Actuellement, il n'y a pas de solution HTML5 pour la production uniquement pour l'enregistrement de vidéos sur le Web. Les solutions disponibles actuelles sont les suivantes:

HTML Media Capture

Fonctionne sur des appareils mobiles et utilise l'application de capture vidéo du système d'exploitation pour capturer des vidéos et télécharger / POST-LE sur un serveur Web. Vous obtiendrez des fichiers .mov sur iOS (ceux-ci ne sont pas compatibles avec Android, j'ai essayé) et .mp4 et .3gp sur Android. Au moins, les codecs seront identiques: H.264 pour la vidéo et AAC pour audio dans 99% des appareils.

HTML Media Capture

Image gracieuseté de https://addpipe.com/blog/the-new-video-recording-prompt-for-media-capture-in-ios9/

Flash et un serveur multimédia sur le bureau .

L'enregistrement vidéo dans Flash fonctionne comme ceci: les données audio et vidéo sont capturées à partir de la webcam et du microphone, il est encodé à l'aide de Sorenson Spark ou H.264 (vidéo) et Nellymoser Asao ou Speex (audio), puis il est transmis (rtmp) à un serveur multimédia (Red5, AMS, Wowza) où il est enregistré dans les fichiers .flv ou .f4v .

La proposition d'enregistrement MediaStream

Le MediaStream Recording est une proposition de Media Capture Task Force (une équipe de travail conjointe entre les groupes de travail WebRTC et API de périphériques) pour une API JS qui a pour but de rendre l'enregistrement vidéo de base dans le navigateur très simple.

Non pris en charge par les principaux navigateurs. Lorsqu'il sera mis en œuvre (s'il le va), vous allez probablement retrouver des types de fichiers différents (au moins .ogg et .webm) et les codecs audio / vidéo selon le navigateur.

Solutions commerciales

Il existe quelques solutions saas et logiciels qui vont gérer certains ou tous les éléments ci-dessus, y compris addpipe.com, HDFVR, Nimbb et Cameratag.

Autres lectures:

Les invites d'enregistrement vidéo HTML Media Capture dans iOS9
L'enregistrement vidéo HTML5 couvre à la fois HTML Media Capture et MediaStream Recording.
Pipe est un saas pour l'enregistrement vidéo qui gère également la conversion finale en .mp4