Comment capturer la vidéo sur le serveur en utilisant getUserMedia

Question

Dans mon application, je veux que l'utilisateur enregistre sa vidéo. Ensuite, la vidéo devrait être téléchargée sur le disque du serveur. Mais elle se télécharge sur le navigateur client. Comment puis-je enregistrer la vidéo de 2 ou 3 minutes sur le serveur ? J'ai utilisé getusermedia pour cela. J'ai écrit le code suivant :

(function(exports) {
exports.URL = exports.URL || exports.webkitURL;
exports.requestAnimationFrame = exports.requestAnimationFrame ||
    exports.webkitRequestAnimationFrame || exports.mozRequestAnimationFrame ||
    exports.msRequestAnimationFrame || exports.oRequestAnimationFrame;

exports.cancelAnimationFrame = exports.cancelAnimationFrame ||
    exports.webkitCancelAnimationFrame || exports.mozCancelAnimationFrame ||
    exports.msCancelAnimationFrame || exports.oCancelAnimationFrame;

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

var ORIGINAL_DOC_TITLE = document.title;
var video = $('video');
var canvas = document.createElement('canvas');
var rafId = null;
var startTime = null;
var endTime = null;    

function $(selector) {
    return document.querySelector(selector) || null;
}

function toggleActivateRecordButton() {
    var b = $('#record-me');
    b.textContent = b.disabled ? 'Record' : 'Recording...';
    b.classList.toggle('recording');
    b.disabled = !b.disabled;
}

function turnOnCamera(e) {
    e.target.disabled = true;
    $('#record-me').disabled = false;

    video.controls = false;

    var finishVideoSetup_ = function() {

        setTimeout(function() {
            video.width = 320;
            video.height = 240;           
            canvas.width = video.width;
            canvas.height = video.height;
        }, 1000);
    };       

    navigator.getUserMedia({video: true}, function(stream) {
        video.src = window.URL.createObjectURL(stream);
        finishVideoSetup_();
    }, function(e) {           
        video.src = 'Chrome_ImF.mp4';
        finishVideoSetup_();
    });

    if (navigator.getUserMedia) {
        navigator.getUserMedia({ audio: true }, onRecordSucces, onFail);
    } else {
        console.log('navigator.getUserMedia not to present');
    }
};

function record() {
    var elapsedTime = $('#elasped-time');
    var ctx = canvas.getContext('2d');
    var CANVAS_HEIGHT = canvas.height;
    var CANVAS_WIDTH = canvas.width;
    frames = []; // clear existing frames;
    startTime = Date.now();
    toggleActivateRecordButton();
    $('#stop-me').disabled = false;
    function drawVideoFrame_(time) {
        rafId = requestAnimationFrame(drawVideoFrame_);
        ctx.drawImage(video, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
        document.title = 'Recording...' + Math.round((Date.now() - startTime) / 1000) + 's';  
        var url = canvas.toDataURL('image/webp', 1); 
        frames.push(url);
    };
    rafId = requestAnimationFrame(drawVideoFrame_);
    startRecording();
};

function stop() {
    cancelAnimationFrame(rafId);
    endTime = Date.now();
    $('#stop-me').disabled = true;
    document.title = ORIGINAL_DOC_TITLE;
    toggleActivateRecordButton();    
    embedVideoPreview();
};

function embedVideoPreview(opt_url) {
    var url = opt_url || null;
    var video = $('#video-preview video') || null;
    var downloadLink = $('#video-preview a[download]') || null;

    if (!video) {
        video = document.createElement('video');
        video.autoplay = true;
        video.controls = true;       
        video.style.width = canvas.width + 'px';
        video.style.height = canvas.height + 'px';
        $('#video-preview').appendChild(video);

        downloadLink = document.createElement('a');
        downloadLink.download = 'capture.webm';
        downloadLink.textContent = '[ download video ]';
        downloadLink.title = 'Télécharger votre vidéo .webm';
        var p = document.createElement('p');
        p.appendChild(downloadLink);

        $('#video-preview').appendChild(p);

    } else {
        window.URL.revokeObjectURL(video.src);
    }

    if (!url) {
        webmBlob = Whammy.fromImageArray(frames, 1000 / 60);
        url = window.URL.createObjectURL(webmBlob);

        video.src = url;
        downloadLink.href = url;
    }
}

function initEvents() {
    $('#camera-me').addEventListener('click', turnOnCamera);
    $('#record-me').addEventListener('click', record);
    $('#stop-me').addEventListener('click', stop);
}

initEvents();

exports.$ = $;

})(window);

Lorsque je clique sur le lien de téléchargement, il se télécharge sur le navigateur de l'utilisateur. Mais je veux envoyer les données au serveur et les enregistrer sur le disque du serveur. J'ai essayé de passer les données webmblob au contrôleur et de les récupérer. Mais ce n'est pas accessible. J'ai écrit le code suivant :

$.ajax({
     url: '/Home/VideoData',
     type: 'POST',
     dataType: 'blob',
     cache: false,
     data: {
           data: webmblob
           },
     contentType: "application/json; charset=utf-8",
     error: function (xhr, status, error) {
     },
     success: function () {

     },
});

Dans le contrôleur, j'ai défini :

public ActionResult VideoData(string data)
{
    return Json("success", JsonRequestBehavior.AllowGet);
}

Mais les données qui arrivent au contrôleur ressemblent à [objet blob]. Désolé pour mon anglais. J'espère que vous comprenez ma question. Comment puis-je le convertir en vidéo ? Toute aide est vraiment appréciée.

Answer 1

Le API Media Recorder est maintenant pris en charge par Chrome (49+) et Firefox (30+) et repose sur getUserMedia() pour accéder à la webcam.

Les données vidéo sont stockées localement dans un objet video/webm JavaScript Blob et peuvent être :

• lues dans un élément
• téléchargées sur l'ordinateur client sous forme de fichier .webm
• chargées (POSTées) sur un serveur web pour le stockage et la conversion

Cet article couvre en détail la spécification et voici une démonstration en direct + projet GitHub. La spécification est disponible sur w3c

Answer 2

MediaStreamRecorder est une API WebRTC pour enregistrer des flux getUserMedia(). Il permet aux applications web de créer un fichier à partir d'une session audio/vidéo en direct.

function onVideoFail(e) {
    console.log('webcam fail!', e);
  }

function hasGetUserMedia() {
  // Remarque : Opera n'est pas préfixé.
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
  // Prêt à l'emploi !
} else {
  alert('getUserMedia() n'est pas pris en charge dans votre navigateur');
}

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 ('échec');
}

function startRecording() {
    streamRecorder = webcamstream.record();
    setTimeout(stopRecording, 10000);
}
function stopRecording() {
    streamRecorder.getRecordedData(postVideoToServer);
}
function postVideoToServer(videoblob) {

    var data = {};
    data.video = videoblob;
    data.metadata = 'métadonnées de test';
    data.action = "téléverser_vidéo";
    jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess);
}
function onUploadSuccess() {
    alert ('vidéo téléchargée');
}

    ENREGISTRER

Spécifications :

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

vous pouvez obtenir un fichier multimédia enregistré, l'envoyer au serveur.