MediaStreamRecorder est une API WebRTC pour enregistrer les 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/

autant que je sache, il n'y a pas de telle façon d'enregistrer l'audio et la vidéo ensemble 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 billet 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 sauver votre audio

https://github.com/mattdiamond/Recorderjs

il existe actuellement plusieurs solutions prêtes à 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 webcam et est supporté par Firefox 30+ et Chrome 49+.

client Flash + rtmp media server

Vous aurez besoin d'un Flash (.swf) de l'application qui est intégré dans votre page web, capture les visiteurs webcam et mic, code les données brutes vidéo et audio (en utilisant les codecs intégrés: H. 264, Spark, Nellymoser ASAO et Speex) et transmet les données telles qu'elles sont enregistrées (via rtmp) vers un serveur multimédia.

Parce que les données sont transférées, dès que vous arrêtez l'enregistrement, toutes les données sont déjà sur les médias sevrer (pas de téléchargement). Un autre avantage est que la vidéo n'est pas perdu si l'ordinateur client accident.

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

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

le serveur de médias reçoit (encore une fois par streaming / rtmp pas par http) les données et, selon le codec utilisé sur le client et le serveur de médias utilisé, les données audio et vidéo sont multiplexées dans les fichiers mp4, flv ou f4v.

ce processus D'enregistrement Flash client + media server-qui a assez bien fonctionné depuis Flash Player 6 en 2002.

les navigateurs Mobiles

HTML Media Capture

Vous pouvez utiliser la Capture de média HTML (expliqué ici avec des captures d'écran) pour enregistrer la vidéo en utilisant la vidéo native de l'appareil enregistrement de l'application et des codecs. Les médias HTML capturent les enregistrements localement (sur le périphérique) et ensuite il télécharge (processus de téléchargement HTTP normal) le fichier sur le serveur web.

lors de L'utilisation de la Capture de médias HTML dans Safari sur les appareils iOS comme l'iPhone, il va créer un .mov fichier qui n'est pas jouable sur Android. La solution est de le convertir en .côté serveur mp4 en utilisant FFmpeg.

lors de L'utilisation de la Capture de médias HTML dans le navigateur Android le résultat final sera un .fichier mp4 qui est jouable sur iPhone. Certains téléphones Android plus anciens vont créer .Fichiers 3gp.

une solution commerciale qui implémente les deux (Flash client + media server sur le bureau et HTML Media Capture sur mobile) est HDFVR.

c'est mon github repo qui fournit une bibliothèque pour enregistrer audio + vidéo et finalement télécharger le contenu sur le serveur sous forme de morceaux

1. ceci supporte chrome, Opera
2. le temps de chargement est réduit, puisque les blobs sont tranchés et chargés

Html_Audio_Video_Recorder

Utilisez ce qui suit:

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

Ensuite traiter le formulaire comme un fichier normal dans votre php