13

ウェブカメラまたはモバイル カメラを使用してビデオを録画できるアプリを作成する必要があります (クロス プラットフォームである必要があります)。

これまでのところ、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

4 に答える 4

7

こんにちは、これが少し遅れている場合は申し訳ありませんが、ファイルをサーバーにアップロードする方法は次のとおりです。これがこれを達成するための最良の方法であるかどうかは本当にわかりませんが、手がかりを与えるのに役立つことを願っていますチュートリアルに従って、Eric Bidelman が (Sam Dutton がコメントしたように) 得られるものは blob であると書いたので、XMLHttpRequest を作成してビデオを取得し、応答タイプを blob として設定し、その後、応答を追加する FormData を作成しました。ブロブをサーバーに送信できるようにします。私の関数は次のようになります。

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();
}
于 2013-08-06T00:50:37.443 に答える
2

ビデオとオーディオを別々に記録できます。ファイル (WAV/WebM) を取得し、オンデマンドでアップロードできます。webkitMediaStream は、1) audioTracks と 2) videoTracks の 2 つのオブジェクトを取ります。オーディオとビデオの両方の録画ストリームを組み合わせることができる場合があります。

于 2013-02-20T11:21:55.690 に答える
1

私はパーティーに数年遅れていることを知っていますが、ビデオをキャプチャして、含まれている node.js サーバーに webm ファイルとしてアップロードできるスニペットを次に示します。Chrome と Firefox でテストしました。

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

于 2017-01-05T21:56:23.680 に答える
-3

唯一のクロス プラットフォームのWeb ビデオ レコーダーは、HDFVR Web カメラ ビデオ レコーダー ソフトウェアです。

デスクトップでは Flash (Flash コーデックを使用した記録 + メディア サーバーへのストリーム) を使用し、モバイルでは HTML Media Capture API (OS を使用した記録 + Web サーバーへのアップロード) を使用して、ほぼすべてのデスクトップまたはモバイル ブラウザーからビデオを記録します。

これを ffmpeg インストールにリンクして、すべてを MP4 (Android では再生されない .mov コンテナーへの iOS レコード) などのクロスプラットフォーム形式に変換できます。また、JS API も備えています。

于 2014-12-22T18:02:50.433 に答える