web-dev-qa-db-fra.com

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

Utilisation de HTML 5 Je souhaite enregistrer une vidéo et enregistrer le flux dans un fichier local. Ci-dessous est le code. En un clic, il appelle déjà la caméra et capture la vidéo dans la balise 'VIDEO' de HTML. Puis-je stocker le flux dans un fichier local? Ou puis-je le stocker en tant que 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 veux sauvegarder le flux en cliquant sur le bouton de sauvegarde.

javascripthtmlhtml5
34
Nithin

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 un petit problème, sera bientôt récupéré)

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

Création d'une vidéo .webm à partir de getUserMedia ()

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

Démo: http://html5-demos.appspot.com/static/getusermedia/record-user-webm.html

Capture audio et vidéo au format HTML5

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

26
l2aelba

MediaRecorder API est la solution que vous recherchez, 

Firefox le supporte depuis un certain temps déjà, et le buzz est que chrome va l'implémenter dans sa prochaine version (chrome 48), mais supposez que vous ayez encore besoin d'activer le drapeau expérimental. version 49 de chrome, pour plus d'informations consultez ce numéro de chrome .

En attendant, voici un exemple de la procédure à suivre 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>

11
mido

Actuellement, il n’existe pas de solution prête à la production HTML5 uniquement pour l’enregistrement de vidéos sur le Web. Les solutions disponibles actuellement sont les suivantes:

Capture multimédia HTML 

Fonctionne sur les appareils mobiles et utilise l'application de capture vidéo du système d'exploitation pour capturer une vidéo et la télécharger/la poster sur un serveur Web. Vous obtiendrez des fichiers .mov sur iOS (ceux-ci sont illisibles sur Android que j'ai essayés) et .mp4 et .3gp sur Android. Au moins les codecs seront les mêmes: H.264 pour la vidéo et AAC pour l’audio dans 99% des appareils.

 HTML Media Capture

Image reproduite avec l'aimable autorisation 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 en Flash fonctionne comme suit: les données audio et vidéo sont capturées à partir de la webcam et du microphone, elles sont codées à l'aide de Sorenson Spark ou H.264 (vidéo) et de Nellymoser Asao ou Speex (audio), puis transmises (rtmp) à un serveur multimédia. (Red5, AMS, Wowza) où il est enregistré dans les fichiers .flv ou .f4v.

La proposition MediaStream Recording

MediaStream Recording est une proposition du groupe de travail sur la capture de médias (groupe de travail conjoint entre les groupes de travail WebRTC et API de périphérique) pour une API JS dont le but est de simplifier l'enregistrement vidéo de base dans le navigateur.

Non supporté par les principaux navigateurs. Quand il sera implémenté (s'il le faut), vous obtiendrez probablement différents types de fichiers (au moins .ogg et .webm) et des codecs audio/vidéo selon le navigateur.

Solutions commerciales 

Il existe quelques saas et solutions logicielles pouvant gérer tout ou partie de ce qui précède, notamment addpipe.com, HDFVR, Nimbb et Cameratag.

Lectures complémentaires:

5
Octavian Naicu

Voici une bibliothèque élégante qui enregistre des vidéos dans tous les navigateurs pris en charge et prend en charge le téléchargement:

https://www.npmjs.com/package/videojs-record

0
Karlth