web-dev-qa-db-fra.com

Webcam d'enregistrement HTML5 getUserMedia, audio et vidéo

Est-il possible d'utiliser Chrome pour capturer la vidéo (webcam) et l'audio (microphone) à partir du navigateur, puis enregistrer le flux en tant que fichier vidéo?

Je voudrais l'utiliser pour créer une application de type vidéo/photobooth qui permet aux utilisateurs d'enregistrer un message simple (30 secondes) (vidéo et audio) dans des fichiers qui peuvent ensuite être visionnés.

J'ai lu la documentation mais je n'ai pas (encore) vu d'exemples sur la façon de capturer à la fois l'audio et la vidéo, je n'ai pas encore trouvé de moyen de stocker les résultats dans un fichier vidéo.

Qui peut aider?

html5getusermedia
30
Harm Kabisa

MediaStreamRecorder est une API WebRTC pour l'enregistrement de flux getUserMedia () (toujours en cours d'implémentation). Il permet aux applications Web de créer un fichier à partir d'une session audio/vidéo en direct.

<script language="javascript" type="text/javascript">
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 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');
}

</script>

<div id="webcamcontrols">
    <button class="recordbutton" onclick="startRecording();">RECORD</button>
</div>

http://www.w3.org/TR/mediastream-recording/

13
Konga Raju

Pour autant que je sache, il n'existe aucun moyen d'enregistrer ensemble de l'audio et de la vidéo et de les enregistrer en un seul fichier. il est possible de capturer et d'enregistrer l'audio sous forme de fichier wav et la vidéo sous forme de fichier webm.

voici un excellent article sur la façon de sauvegarder votre vidéo; http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

et une utilité utile pour sauvegarder votre audio

https://github.com/mattdiamond/Recorderjs

6
TarranJones

Il existe actuellement plusieurs solutions prêtes pour la production pour l'enregistrement audio et vidéo sur le Web.

Navigateurs de bureau

API MediaRecorder (HTML)

L'API MediaRecorder (MediaStream Recorder) s'appuie sur getUserMedia() pour l'accès à la webcam et est pris en charge par Firefox 30+ et Chrome 49 + .

Client Flash + serveur multimédia rtmp

Vous aurez besoin d'une application Flash (.swf) intégrée à votre page Web, capture la webcam et le micro des visiteurs, code les données vidéo et audio brutes (en utilisant les codecs intégrés: H.264, Spark, Nellymoser ASAO et Speex) et = diffuse les données au fur et à mesure qu'elles sont enregistrées (via rtmp) vers un serveur multimédia.

Parce que les données sont diffusées, dès que vous arrêtez l'enregistrement, toutes les données sont déjà sur le serveur multimédia (pas de temps de téléchargement). Un autre avantage est que la vidéo n'est pas perdue si l'ordinateur client plante.

Vous avez au moins 3 options pour le serveur multimédia:

  1. Red5 est gratuit et open source (j'ai personnellement apporté des correctifs de code au processus d'enregistrement et je peux garantir que cela fonctionne très bien)
  2. Wowza (65 $/mois)
  3. Adobe Media Server Pro (4500 $)

Le serveur multimédia reçoit (là encore via streaming/rtmp et non via http) les données et, selon le codec utilisé sur le client et le serveur multimédia utilisé, les données audio et vidéo sont multiplexées dans des fichiers mp4, flv ou f4v.

Ce processus d'enregistrement client Flash + serveur multimédia - qui a plutôt bien fonctionné depuis Flash Player 6 en 2002.

Navigateurs mobiles

Capture multimédia HTML

Vous pouvez utiliser HTML Media Capture ( expliqué ici avec des captures d'écran ) pour enregistrer de la vidéo à l'aide de l'application d'enregistrement vidéo et des codecs natifs de l'appareil. HTML Media Capture enregistre localement (sur l'appareil) puis télécharge (processus de téléchargement HTTP normal) le fichier sur le serveur Web.

Lorsque vous utilisez HTML Media Capture dans Safari sur des appareils iOS tels que l'iPhone, il crée un fichier .mov qui n'est pas jouable sur Android . La solution consiste à le convertir côté serveur .mp4 à l'aide de FFmpeg.

Lorsque vous utilisez HTML Media Capture dans le navigateur Android, le résultat final sera un fichier .mp4 jouable sur l'iPhone. Certains anciens téléphones Android créeront .3gp des dossiers.

Une solution commerciale qui implémente à la fois (client Flash + serveur multimédia sur ordinateur de bureau et HTML Media Capture sur mobile) est HDFVR .

3
Octavian Naicu

Ceci est mon dépôt github qui fournit une bibliothèque pour l'enregistrement audio + vidéo et enfin télécharger le contenu sur le serveur sous forme de morceaux

  1. Cela prend en charge Chrome, Opera
  2. Le temps de téléchargement est réduit, car les blobs sont découpés et téléchargés

Html_Audio_Video_Recorder

2
imal hasaranga perera

Utilisez le suivant:

<input type="file" accept="image/*;capture=camera"> \\ Snapshot
<input type="file" accept="video/*;capture=camcorder"> \\ Video
<input type="file" accept="audio/*;capture=microphone"> \\ Audio

Traitez ensuite le formulaire comme un fichier normal dans votre php

1
AgeDeO