Запись и загрузка видео Html5?

Question

Мне нужно создать приложение, которое может записывать видео с помощью веб-камеры или мобильной камеры (это должна быть кросс-платформа).

До сих пор я написал небольшое доказательство концепции с использованием webrtc getusermedia. Он может записывать видео и воспроизведение, но я не уверен, как заставить файл загружаться на сервер.

Вот ссылка на этот образец http://jsfiddle.net/3FfUP/

И в яваскрипте код:

(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); 

Как я могу получить то, что записано в этом образце как файл, так что он может быть загружен на сервер ,

Answer 1

Вы можете записать video и audio отдельно. Вы можете получать файлы (WAV/WebM) и загружать их по требованию. webkitMediaStream принимает два объекта: 1) audioTracks и 2) videoTracks. Вы можете комбинировать как аудио/видео записанные потоки!

Answer 2

Привет, извините, если это немного поздно, но вот как мне удалось загрузить файл на сервер, у меня действительно нет идеи, если это лучший способ достичь этого, но я надеюсь, что это поможет дайте вам ключ. Понимая учебник, написанный Эриком Бидельманом (как прокомментировал Сэм Даттон), вы получаете blob, поэтому я сделал XMLHttpRequest, чтобы получить видео и установить тип ответа как blob, после чего я создал FormData, в который я добавил ответ, это позволит отправить blob на сервер. Вот как выглядит моя функция.

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

только кросс-платформенный веб-видео рекордер является HDFVR webcam video recorder software.

Он использует Flash (записи с использованием флэш-кодеков + потоки на медиа-сервер) на рабочем столе и API-интерфейс HTML Media Capture (запись с использованием загрузки OS + на веб-сервер) на мобильном устройстве для записи видео с практически любого настольного или мобильного браузера ,

Вы можете связать его с установкой ffmpeg, чтобы преобразовать все в кросс-платформенный формат, например MP4 (записи iOS в контейнер .mov, который не воспроизводится на Android), и он также имеет JS API.

Answer 4

Я знаю, что я на несколько лет опоздал на вечеринку, но вот фрагмент, который способен захватывать видео и загружать его на включенный сервер node.js в виде файла webm. Я тестировал Chrome и Firefox.

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