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