Django對接前端攝像頭拍照取像

近期寫了Django從前端攝像的視頻拍照取像的問題。

首先是前端的取像問題，這里是將是視頻的某一幀畫面繪制在canvas上，然后從canvas畫布上取圖像信息。

下面的代碼是在畫布上生成圖像，換成點擊事件取像也行：

        video = document.getElementById('video');
        canvas = document.getElementById('canvas');
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator
            .mozGetUserMedia ||
            navigator.msGetUserMedia;
        navigator.getUserMedia({
            video: true,
            audio: false
        }, function (stream) {
            document.getElementById('video').srcObject = stream;
        }, console.log)

        setInterval(function () {
            canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
        }, 2500);
       

將畫布上的圖像數據取出，打包成jpg文件對象：

let blob = canvas.toDataURL("image/jpeg").substring(23);
let file = new File([blob], 'img.jpg', {type: 'image/jpeg'});

這里的 “substring(23)” 是將數據流開頭的文件描述對象信息去除，只剩下圖像文件的字節流。

將file文件對象使用 FromData發送給后端即可，這里用base64格式發送：

fromData.append('img_base64', file);
fromData.append('name', $('#name').val())
fromData.append('role', $('#role').val())
$.ajax({
    url: 'faces',
    type: 'post',
    data: fromData,
    processData: false,
    contentType: false,
    success: function (data) {
        $('#result').text(data.result);
    }
})

Django接受數據的代碼如下，這里保存為了本地圖片，完整的數據流已經到手，要做什么都可以：

def faces(request):
    if request.method == 'POST':
        file = request.FILES.get('img_base64')
        file_data = file.read()
        # img_data = file_data.strip().split(",")[-1]
        img = base64.b64decode(file_data)
        fh = open("temp_pic.jpg","wb")
        fh.write(img)
        fh.close()