HTML 5 de l'enregistrement vidéo et d'enregistrement d'un flux

En utilisant le Html 5 je veux enregistrer de la vidéo et enregistrer le flux dans un fichier local. Étant donné ci-dessous est le code. En un clic sur un bouton il déjà invoque l'appareil photo et capture de la vidéo dans la "VIDÉO" de la balise HTML. Puis-je stocker le flux dans un fichier local? Ou puis-je 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 enregistrer le flux sur un bouton enregistrer, cliquez sur.

InformationsquelleAutor Nithin | 2013-08-29
  1. 31

    RecordRTC: WebRTC enregistrement audio/vidéo

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

    • Enregistrement Audio à la fois pour Chrome et Firefox
    • Vidéo/Gif enregistrement pour Chrome; (Firefox a un peu des questions, seront récupérés bientôt)

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

    De la création .webm video 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

    Capturer de l'Audio & Vidéo en HTML5

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

    • De bons liens, des solutions intéressantes. Mais remarque que ce sont toujours des solutions qui s'appuient sur la prise d'instantanés de toile éléments et en codant les images une par une avec la whammy.
    • il est coupé dans le chrome et la vidéo n'est pas pris en charge dans firfox comment puis-je enregistrer mes sons en chrome et vidéo dans firfox
    • Est ce que quelqu'un d'autre connaît des Branchies du problème? Voudrais savoir avant de me essayez ces solutions.
    • Cela ne dit rien sur le fait d'économiser de rien
    InformationsquelleAutor l2aelba
  2. 13

    MediaRecorder API est la solution que vous cherchez,

    Firefox a été le soutenir pendant un certain temps maintenant, et le buzz est en chrome va la mettre en œuvre dans la prochaine version (chrome 48), mais suppose que vous pourriez encore avoir besoin d'activer la expérimentaux drapeau, apparemment, le drapeau ne sera pas besoin de la version chrome 49, pour plus d'infos, découvrez cette chrome problème.

    Pendant ce temps, un échantillon de la façon de le faire dans firefox:

    JS:

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

    HTML:

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

    • c'est probablement une https question, pouvez ou essayer mido22.github.io/MediaRecorder-exemple
    • Aucune idée de pourquoi j'ai "NotSupportedError: Opération n'est pas pris en charge" à la ligne 47, qui est recorder = new MediaRecorder(stream, {mimeType:'video/mp4' });?
    • Firefox 62 dit MediaStreamError{name: "NotFoundError",message:"The object can not be found here."} sur mon HTTPS localhost.
    • Prend-il en charge sur safari?
    • vidéo.srcObject = stm à la place de la vidéo.src, reportez-vous ci-dessous l'article fxsitecompat.dev/fr-CA/docs/2018/...
    InformationsquelleAutor mido
  3. 7

    Actuellement il n'est pas prêt pour la production HTML5 seulement solution pour l'enregistrement vidéo sur le web. Le courant de solutions disponibles sont comme suit:

    HTML Médias Capture

    Fonctionne sur les appareils mobiles et utilise le système d'exploitation' application de capture vidéo pour capturer de la vidéo et envoyer/publier sur un serveur web. Vous obtiendrez .mov fichiers sur iOS (ceux-ci ne sont pas lisibles sur Android, j'ai essayé) et .mp4 et .3gp sur Android. Au moins les codecs sera le même: H. 264 pour la vidéo et AAC pour l'audio, 99% des appareils.

    HTML 5 de l'enregistrement vidéo et d'enregistrement d'un flux

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

    Flash et un serveur multimédia sur le bureau.

    Enregistrement vidéo en Flash fonctionne comme ceci: les données audio et vidéo est capturée à partir de la webcam et du microphone, il est codé à l'aide de Sorenson Spark ou H. 264 (vidéo) et Nellymoser Asao ou Speex (audio) il est alors diffusé (rtmp) à un serveur de média (Red5, AMS, Wowza) où il est enregistré dans .flv ou .f4v fichiers.

    La MediaStream Enregistrement proposition

    La MediaStream Enregistrement est une proposition faite par les Médias de Capture Task Force (groupe de travail mixte entre le WebRTC et de l'Appareil Api groupes de travail) pour une API JS qui vise à faire de base de l'enregistrement vidéo dans le navigateur très simple.

    Pas pris en charge par les principaux navigateurs. Quand ça va être mis en œuvre (si elle), vous serez plus que probablement jusqu'à la fin avec différents types de fichiers (au moins .ogg et .webm) et les codecs audio/vidéo selon le navigateur.

    Solutions commerciales

    Il y a quelques saas de solutions logicielles et de là-bas qui vont traiter de certains ou de tous les ci-dessus, y compris addpipe.com, HDFVR, Nimbb et Cameratag.

    Pour en savoir plus:

    InformationsquelleAutor Octavian Naicu
  4. 4

    Ici est une élégante bibliothèque qui enregistre la vidéo dans tous les navigateurs pris en charge et prend en charge le téléchargement:

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

    InformationsquelleAutor Karlth