桌面端HTML的capture属性无法调用摄像头，Django项目中该用什么替代？

1. 桌面端摄像头唤起实现方案 #

原生input标签的capture属性为移动端设计，桌面端主流浏览器均不支持直接唤起摄像头，可通过WebRTC的MediaDevicesAPI实现自定义拍照能力，修改后的模板代码如下：

{% extends "image/layout.html" %}
{% load static %}

{% block body %}   

<style>
    #cameraPreview {
        border: 1px solid #ccc;
        margin: 10px 0;
        display: none;
    }
    #captureBtn {
        display: none;
        margin: 10px 0;
    }
</style>

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <!-- 两种上传入口：拍照/本地文件选择 -->
    <button type="button" id="openCameraBtn">使用摄像头拍摄</button>
    <div>
        <video id="cameraPreview" width="400" autoplay></video>
        <canvas id="capturedCanvas" style="display: none;"></canvas>
    </div>
    <button type="button" id="captureBtn">拍照</button>
    <div>或选择本地图片：</div>
    <input type="file" name="image" accept="image/*">
    <!-- 存储拍照生成的图片 -->
    <input type="hidden" name="captured_image" id="capturedImageInput">
    <input type="submit" value="提交">
</form>

<script>
const openCameraBtn = document.getElementById('openCameraBtn');
const preview = document.getElementById('cameraPreview');
const captureBtn = document.getElementById('captureBtn');
const canvas = document.getElementById('capturedCanvas');
const capturedInput = document.getElementById('capturedImageInput');

// 唤起摄像头
openCameraBtn.addEventListener('click', async () => {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        preview.srcObject = stream;
        preview.style.display = 'block';
        captureBtn.style.display = 'block';
    } catch (err) {
        alert('摄像头访问被拒绝，请检查权限设置');
    }
});

// 拍照逻辑
captureBtn.addEventListener('click', () => {
    canvas.width = preview.videoWidth;
    canvas.height = preview.videoHeight;
    canvas.getContext('2d').drawImage(preview, 0, 0);
    // 将canvas内容转为base64存入隐藏表单
    capturedInput.value = canvas.toDataURL('image/png');
    // 停止摄像头流
    preview.srcObject.getTracks().forEach(track => track.stop());
    preview.style.display = 'none';
    captureBtn.style.display = 'none';
    alert('拍照完成，点击提交即可上传');
});
</script>
    
{% endblock %}

2. Django视图逻辑修正与图片存储实现 #

你现有视图代码存在两个问题：

• 上传的文件无法从request.POST中获取，需从request.FILES取值
• 缺少base64格式拍照图片的解析逻辑
  修改后的views.py代码如下：

import base64
from django.core.files.base import ContentFile
from django.shortcuts import render
from .models import *

def index(request):
    if request.method == 'POST':
        # 优先取拍照生成的图片
        captured_img = request.POST.get('captured_image')
        uploaded_img = request.FILES.get('image')
        img_instance = ImageModel() # 替换为你自己定义的图片模型名
        
        if captured_img:
            # 解析base64图片
            format, imgstr = captured_img.split(';base64,')
            ext = format.split('/')[-1]
            img_file = ContentFile(base64.b64decode(imgstr), name=f'captured.{ext}')
            img_instance.image_field.save(img_file.name, img_file) # 替换image_field为你模型里的图片字段名
        elif uploaded_img:
            img_instance.image_field.save(uploaded_img.name, uploaded_img)
        
        img_instance.save()
        return render(request, 'image/image.html')
    else:
        return render(request, 'image/image.html')

注意：使用摄像头功能需要你的站点部署在HTTPS环境下，本地localhost开发不受该限制。

内容的提问来源于stack exchange，提问作者mihilih