ウェブカメラで撮影した動画を、直接サーバーに送る。

June 29, 2022

ウェブカメラで撮影した動画を直接サーバーに送る方法を調べてみました。

ウェブカメラで撮影した動画を録画するためのコードを以下のサイトからコピーして、アップロード機能を追加しました。

downloadbutton = document.getElementById('download')
uploadbutton   = document.getElementById('upload')    //uploadbuttonを追加。

（中略）


downloadbutton.addEventListener('click', function(ev) {
    (中略)
}

// download 処理の下に、upload 処理を追加。テンプレートに動画以外のものをアップロードするformタグを追加。

uploadbutton.addEventListener('click', function(ev) {

    var blob = new Blob(record_data, { type: 'video/webm' });

    let form_elem = "#upload_form";
    let data    = new FormData( $(form_elem).get(0) );
    let url     = $(form_elem).prop("action");
    let method  = $(form_elem).prop("method");

    data.set("upload_test", blob, "test.webm");

    $.ajax({
        url : url,
        type: method,
        data : data,
        processData: false,
        contentType: false,
        dataType: 'json'
    }).done( function(data, status, xhr ) {
        if (data.error){
          //エラーの処理
        }
        else{
          //成功時の処理
        }

    }).fail( function(xhr, status, error) {
        console.log(status + ":" + error );
    });

});

動的にformを作成する場合。

let url = PATH;
let data = new FormData();
data.set("upload_test", blob, "test.webm");

$.ajax({
    url : url,
    type: 'POST',
    data : data,
    processData: false,
    contentType: false,
    dataType: 'json'
(以下略)

CSRFトークンについては、下記スクリプトを予め実行しておく。

//Ajax実行前にセッションIDを送信するスクリプト
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

〇 FormDataをformタグではなく、オブジェクトにキーと値をセットした上でAjax送信

その他、CSRFトークンの追加に関する参考サイト。

〇【Django】JavaScriptで動的に作成されたformにcsrf_tokenを追加する

〇 Djangoを用いてhtmlからPythonファイルを実行する