Html5 Videoaufnahme und -upload?

Question

Ich muss eine App erstellen, die Video mit einer Webcam oder einer mobilen Kamera aufzeichnen kann (es muss plattformübergreifend sein).

Bisher habe ich mit webrtc getusermedia einen kleinen Proof of Concept geschrieben. Es kann das Video und die Wiedergabe aufnehmen, aber ich bin mir nicht sicher, wie ich die Datei zum Hochladen auf den Server bringen soll. Hier

ist ein Link zu dieser Probe http://jsfiddle.net/3FfUP/

und den Javascript-Code:

(function ($) { 
window.URL = window.URL || window.webkitURL; 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia || navigator.msGetUserMedia; 
var video = document.querySelector('video'); 
var onFailSoHard = function(e) { 
    console.log('Reeeejected!', e); 
}; 
$('#capture-button').click (function() { 
    console.log ("capture click!"); 
    if (navigator.getUserMedia) { 
     // Not showing vendor prefixes. 
     navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) { 
      var video = document.querySelector('video'); 
      video.src = window.URL.createObjectURL(localMediaStream); 

      // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia. 
      // See crbug.com/110938. 
      video.onloadedmetadata = function(e) { 
       // Ready to go. Do some stuff. 
      }; 
     }, onFailSoHard); 
    } else { 
     video.src = 'somevideo.webm'; // fallback. 
    } 
}); 
$('#stop-button').click (function (e) { 
    video.pause(); 
    localMediaStream.stop(); 
}); 
})(jQuery); 

Wie kann ich bekommen, was in dieser Probe als eine Datei aufgezeichnet wird, so dass es auf den Server hochgeladen werden kann .

Answer 1

Sie können video und audio getrennt aufzeichnen. Sie können Dateien (WAV/WebM) erhalten und sie bei Bedarf hochladen. webkitMediaStream verwendet zwei Objekte: 1) audioTracks und 2) videoTracks. Sie können möglicherweise beide Audio/Videoaufzeichnungen kombinieren!

Answer 2

Hallo tut mir leid, wenn dies etwas spät ist, aber hier ist, wie ich es geschafft habe, die Datei auf einen Server hochladen, ich habe wirklich keine Ahnung, ob dies der beste Weg ist, aber ich hoffe, es hilft geben Sie einen Hinweis. Nach dem Tutorial schrieb Eric Bidelman (wie Sam Dutton kommentierte), was Sie bekommen ist ein Blob, also habe ich eine XMLHttpRequest gemacht, um das Video zu bekommen und den Antworttyp als Blob, danach habe ich ein FormData erstellt, in dem ich angehängt habe die Antwort, damit der Blob an den Server gesendet werden kann. Hier sieht meine Funktion aus.

function sendXHR(){ 
    //Envia bien blob, no interpretado 
    var xhr = new XMLHttpRequest(); 
    var video=$("#myexportingvideo"); 
    xhr.open('GET', video.src , true); 
    xhr.responseType = 'blob'; 
    xhr.onload = function(e) { 
    if (this.status == 200) { 
     // Note: .response instead of .responseText 
     var blob = new Blob([this.response], {type: 'video/webm'}); 
     console.log(blob.size/1024); 
     console.log(blob.type); 
     form = new FormData(), 
     request = new XMLHttpRequest(); 
     form.append("myblob",blob,"Capture.webm"); 
     form.append("myname",$("#name_test").value); 
     request.open("POST","./UploadServlet",true); 
     request.send(form); 
     } 
    }; 
    xhr.send(); 
} 

Answer 3

Die einzige Querplattform Web-Video-Recorder ist die HDFVR webcam video recorder software.

Es verwendet Flash (Aufzeichnungen mit Flash Codecs + Streams zu einem Medienserver) auf dem Desktop und die HTML Media Capture API (Aufnahme mit OS + Upload auf Webserver) auf dem Handy, um Videos von so ziemlich jedem Desktop oder mobilen Browser aufzunehmen .

Sie können es mit einer ffmpeg-Installation verknüpfen, um alles in ein plattformübergreifendes Format wie MP4 (iOS-Datensätze in einen .mov-Container, der nicht unter Android abgespielt wird) zu konvertieren. Außerdem verfügt es über eine JS-API.

Answer 4

Ich weiß, ich bin ein paar Jahre zu spät zur Party, aber hier ist ein Ausschnitt, der in der Lage ist, Video aufzunehmen und es auf den mitgelieferten node.js Server als Webm-Datei hochzuladen. Ich habe es in Chrome und Firefox getestet.

https://gist.github.com/rissem/d51b1997457a7f6dc4cf05064f5fe984