Question Capture et sauvegarde de vidéos en HTML5


Je suis en train de construire un site pour chanter des chansons où l'utilisateur peut capturer une vidéo de lui-même en chantant avec un mp3. Je suis arrivé au point où je peux accéder à la caméra et afficher le flux en direct, mais comment puis-je enregistrer la vidéo afin que l'utilisateur puisse la télécharger et la conserver?

Mon code:

<!DOCTYPE html>
<head>
<link href="css/bootstrap.css" rel="stylesheet"">
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body>

<button class="btn" onclick="show();">Record!</button>


<div id="record" style="display:none; text-align:center;">
<div id="container">
<video autoplay="false" id="videoElement">
</video>
</div>
<button id="play" class="btn" onclick="play()">Start Recording!</button>
<audio id="song" style="hidden">
<source src="love.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>



<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script>

var video = document.querySelector("#videoElement");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||    navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {       
navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError);
}

function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
document.getElementById("videoElement").pause();
}

function videoError(e) {
alert("There was an error with the video stream.\nCheck that your webcam is connected.");
}

function play()
{
var video = document.getElementById("videoElement");
var music = document.getElementById("song");
   var button = document.getElementById("play");
   if (video.paused) {
      video.play();
      music.play();
      button.textContent = "Stop Recording";
   } else {
      video.pause();
      music.pause();
      button.textContent = "Continue Recording";
   }
}

function show()
{
document.getElementById("record").style.display="block";
}
</script>
</body>

y a-t-il un moyen dans handleVideo je peux enregistrer le flux comme il vient ou quelque chose?


18
2018-06-26 22:26


origine


Réponses:


MISE À JOUR 12/2014  FYI, il y a une nouvelle API sur son chemin appelé MediaRecorder. Actuellement, uniquement pris en charge dans Firefox, et dans un état précoce, mais quelque chose à prendre en compte.

mediaStream et stockage local

Dans un environnement local pur, vous ne pouvez pas et vous n'obtiendrez pas un très bon résultat. Vous pouvez enregistrer les images à l'aide de l'élément canvas en y dessinant et stocker les images JPEG dans un stockage local à partir du flux vidéo avec l'audio (qui doit être enregistré séparément), puis utiliser une bibliothèque pour créer un MJPEG par exemple. fichier (AFAIK il n'y a actuellement aucun support audio).

Vous rencontrerez plusieurs problèmes avec cette approche cependant: il faudra beaucoup de temps pour utiliser JavaScript pour traiter toutes ces informations - il suffit de sauvegarder une image en format JPEG, de la convertir en blob et de l'enregistrer dans le système de fichiers ou la base de données indexée. ou plus) du budget de temps dont vous disposez pour une seule image.

Vous ne pourrez pas synchroniser correctement les images vidéo avec l'audio - vous pouvez enregistrer un horodatage et l'utiliser pour «corriger» les images, mais votre FPS variera probablement en créant une vidéo saccadée. Et même si vous obtenez la synchronisation dans un ordre temporel, vous serez probablement confronté à des problèmes de décalage, où l'audio et la vidéo ne correspondent pas, car ils sont initialement deux flux séparés.

Mais les vidéos dépassent très rarement les 30 FPS (US) ou 25 FPS (Europe), vous n'aurez donc pas besoin du taux de 60 FPS pour le navigateur. mai fournir. Cela vous donne un budget temps un peu meilleur d'environ 33 millisecondes par image pour le système américain (NTSC) et un peu plus si vous êtes dans un pays utilisant le système PAL. Il n'y a rien de mal à utiliser une fréquence d'images encore plus basse, mais à un certain moment (<12-15 FPS), vous remarquerez un grave manque de fluidité.

Il y a cependant beaucoup de facteurs qui influenceront ceci tels que le processeur, le système de disque, la dimension de cadre etc. JavaScript est à thread unique et l'API canvas est synchrone, donc un processeur à 12 cœurs ne vous aidera pas beaucoup à cet égard et l'utilité de Web Workers est actuellement limitée à des tâches de plus longue durée. Si vous avez beaucoup de mémoire disponible, vous pouvez mettre en cache les cadres en mémoire, ce qui est faisable et faire tout le traitement en post, ce qui prendra encore du temps. Un flux enregistré à 720P @ 30 FPS consommera au minimum 105 Mo par seconde (ce qui ne représente que des données brutes sans le traitement interne par le navigateur des tampons, ce qui peut doubler, voire tripler).

WebRTC

Une meilleure solution consiste probablement à utiliser WebRTC et à se connecter à un serveur (externe ou local) et à y traiter le flux. Ce flux contiendra de l'audio et de la vidéo synchronisés et vous pouvez stocker le flux temporaire sur le disque sans les limitations d'une zone de stockage en boîte de sable du navigateur. L'inconvénient ici sera (pour les connexions externes) la bande passante car cela peut réduire la qualité, ainsi que la capacité du serveur.

Cela ouvre la possibilité d'utiliser par exemple Node.js, .Net ou PHP pour effectuer le traitement en utilisant des composants tiers (ou une approche de bas niveau comme l'utilisation de C / C ++ et CGI / piping compilés si vous êtes dans cette).

Vous pouvez consulter ce projet open source qui prend en charge le recodage des flux WebRTC:
http://lynckia.com/licode/

Le projet Licode fournit une API client NodeJS pour WebRTC afin que vous puissiez l’utiliser côté serveur, voir les docs

Et c'est essentiellement à quel point vous pouvez aller avec l'état actuel de HTML5.

Flash

Ensuite, il y a la possibilité d'installer Flash et de l'utiliser - vous aura toujours besoin d'un serveur solution latérale (Red5, Wowza ou AMS).

Cela vous donnera probablement une expérience moins pénible, mais vous devez avoir installé Flash dans le navigateur (évidemment) et dans de nombreux cas, le facteur de coût est plus élevé en raison de licences (voir Red5 pour un open-source alternative).

Si vous êtes prêt à payer pour des solutions commerciales, il existe des solutions telles que celle-ci:
http://nimbb.com/


14
2017-11-03 20:48



le flux est créé ici.

function handleVideo(stream) {
 video.src = window.URL.createObjectURL(stream);
 document.getElementById("videoElement").pause();
}

vos données sont le sream .. ou window.URL.createObjectURL (stream).

mais vous ne pouvez pas simplement écrire stream ou window.URL.createObjectURL (stream) dans un stockage local (2mb .. à small) ou webkitRequestFileSystem (ce qui vous permet de gb) ... vous devez lire les données envoyées à la balise vidéo et les convertir en canevas en tant que trame unique en l’enregistrant sur le système webkitfiles.

Comme le système de fichiers a changé dernièrement, j'ai cherché le nouveau code sur Google et trouvé cet exemple parfait pour vous. https://gist.github.com/piatra/2549734

dans l'exemple qu'il utilise

setTimeout(function(){ draw(v, bc, w, h); }, 200);

qui écrit un cadre tous les 200ms

si vous voulez un framrate personnalisé, changez simplement le 200ms à 1000/25 .. (25fps)

ou utilisez requestanimationframe et vous devriez avoir environ 60 images par seconde si ur cpu le supporte.

maintenant vous n'avez pas de vrai flux dans un bon format comme mp4 ... mais beaucoup d'images que vous pouvez afficher avec une autre fonction ... encore une fois, vous avez besoin d'un processeur très rapide.

dans cet exemple, le son ne fonctionne pas.

enregistrer aussi l'audio sur WAV (vous ne pouvez pas enregistrer mp3 ou aac) ... j'ai trouvé ça.

http://typedarray.org/from-microphone-to-wav-with-getusermedia-and-web-audio/

Donc, à la fin, vous pourriez le faire ... mais cela prendrait beaucoup de place pendant quelques minutes et nécessite un processeur très rapide pour tout élaborer.


1
2017-11-03 17:06