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

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

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

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

И код JavaScript:

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

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

Источник

4 ответа

Привет, извините, если это немного поздно, но вот как мне удалось загрузить файл на сервер, у меня действительно нет идеи, если это лучший способ добиться этого, но я надеюсь, что это поможет дать вам подсказку Следуя уроку, Эрик Бидельман написал (как прокомментировал Сэм Даттон), что вы получите блоб, поэтому я сделал XMLHttpRequest, чтобы получить видео и установить тип ответа как блоб, после чего я создал 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();
}
Источник

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

Источник

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

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

Источник

Единственным кроссплатформенным веб-видеорегистратором является программное обеспечение для видеозаписи веб-камеры HDFVR.

Он использует Flash (записи с использованием кодеков Flash + потоки на медиасервер) на рабочем столе и API-интерфейс захвата мультимедиа HTML (запись с использованием ОС + загрузка на веб-сервер) на мобильном устройстве для записи видео практически с любого настольного или мобильного браузера.

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

Источник
Другие вопросы по тегам