如何将WebRTC采集的客户端摄像头帧发送到Python脚本处理？

方案1：定时抽帧HTTP上传（实现最简单，适合对实时性要求不高的场景，比如1~5秒处理1帧的需求） #

前端改造步骤 #

• 在现有js代码基础上，新增canvas元素用来临时存储视频帧，定时从video标签中绘制当前帧，转成blob格式发送给Django后端即可，参考改造后的代码：

'use strict';

const mediaStreamConstraints = { video: true };
const localVideo = document.querySelector('video');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let localStream;

function gotLocalMediaStream(mediaStream) {
  localStream = mediaStream;
  localVideo.srcObject = mediaStream;
  // 视频加载完成后设置canvas尺寸和视频一致
  localVideo.onloadedmetadata = () => {
    canvas.width = localVideo.videoWidth;
    canvas.height = localVideo.videoHeight;
    // 每1000ms抽一帧上传，间隔可以自行调整
    setInterval(captureAndSendFrame, 1000);
  }
}

function handleLocalMediaStreamError(error) {
  console.log('navigator.getUserMedia error: ', error);
}

// 抽帧上传函数
function captureAndSendFrame() {
  ctx.drawImage(localVideo, 0, 0, canvas.width, canvas.height);
  // 转成blob格式上传，比base64体积更小
  canvas.toBlob((blob) => {
    const formData = new FormData();
    formData.append('frame', blob, 'frame.jpg');
    fetch('/api/process-frame/', {
      method: 'POST',
      body: formData
    }).then(res => res.json()).then(result => {
      // 此处可处理模型返回的结果，比如渲染到页面上
      console.log('模型处理结果：', result);
    })
  }, 'image/jpeg', 0.8) // 0.8为jpeg质量参数，可根据需求调整
}

navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
  .then(gotLocalMediaStream).catch(handleLocalMediaStreamError);

后端Django处理步骤 #

• 新增接口接收前端传的图片文件，用OpenCV读取后转成numpy数组，直接喂入机器学习模型即可，处理完成后返回结果给前端，参考视图代码：

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import cv2
import numpy as np
# 导入你自己训练好的ML模型
from your_model import predict

@csrf_exempt
def process_frame(request):
    if request.method == 'POST':
        frame_file = request.FILES.get('frame')
        # 把上传的文件转成OpenCV可用的格式
        img_array = np.asarray(bytearray(frame_file.read()), dtype=np.uint8)
        frame = cv2.imdecode(img_array, cv2.IMREAD_COLOR)
        # 喂入模型处理
        result = predict(frame)
        return JsonResponse({'status': 'success', 'result': result})
    return JsonResponse({'status': 'error', 'msg': '仅支持POST请求'})

方案2：WebSocket实时传输（适合对实时性要求高的场景，比如需要每秒处理10帧以上的需求） #

• 前端不用定时发送fetch请求，建立WebSocket连接后持续把抽好的帧发送给后端，后端收到后实时处理再把结果通过WebSocket推送给前端，延迟比HTTP上传低很多
• Django端可以用Channels库实现WebSocket支持，帧处理逻辑和方案1完全一致，仅需把HTTP接口替换为WebSocket接收数据即可

注意事项 #

• 抽帧间隔可以根据模型推理速度和业务需求调整，不要设置过短导致后端压力过大
• 上传的图片可以适当压缩质量，减少传输带宽占用
• 如果有多人同时使用的需求，要注意模型推理的并发控制，避免服务器资源占满

内容的提问来源于stack exchange，提问作者이준혁