如何使用 JavaScript 将视频 blob 发送到使用 Django 表单的 Django 视图？

问题描述 投票：0回答：1

简而言之

如何使用 JavaScript 通过 Django 表单将视频数据块获取到 Django 视图？

背景

我正在构建一个录制网络摄像头视频的功能。我已经成功地弄清楚了这一部分。我可以使用 JavaScript 流式传输用户的相机和麦克风，记录流，将其转换为 blob，然后我可以将 blob 转换为文件。但是，我不需要文件，因为我需要将用户的视频简单地发送到我的后端，并且我不希望用户与视频文件交互（而且我刚刚了解到您不能以编程方式分配

<input type='file'>
出于安全原因将文件元素包含在内）。 这就是为什么我只想发送二进制数据。

我尝试过什么（以及结果是什么）

  • 就像我说的，我尝试在 Django 表单中使用 FileField（但由于固有的 Web 安全限制，不起作用）。让用户自己下载和上传文件不符合项目要求。
  • 我尝试在 Django 表单中使用 JSONField 并以 JSON 格式提交二进制文件。也许这仍然有效，但我无法将二进制数据转换为 JSON 格式。到目前为止我尝试过的所有操作，JSON 中应该包含 blob 的值最终要么是一个空字符串，
    undefined
    ，要么是这样的字符串 -> 
    "data:"
    。

代码

JavaScript

// This function is what MediaRecorder uses to give data to "recordedChunks"
const handleDataAvailable = function(event) {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  } else {
    // …
  }
}

问题出在下一步（停止记录，制作blob，并将blob获取到

input
元素）。我将展示该函数的每个变体，并事先解释 
base64data
的值最终是：

console.log(base64data);
=
undefined

const stopCapture = function() {
  mediaRecorder.stop();

  const blob = new Blob(recordedChunks, {type: "video/webm",});

  // Convert the Blob to base64 and then JSON format to submit with form
  const reader = new FileReader();
  reader.onload = function () {
    const base64data = reader.result.split(',')[1];
    console.log(base64data);
    const jsonData = JSON.stringify({ videoBlob: base64data });
    
    // Set the value of the input element to the base64-encoded blob
    jsonInput.value = jsonData;
  };
  reader.readAsDataURL(blob);
}


console.log(base64data);
=
data:

将 

const base64data = reader.result.split(',')[1];
更改为 
const base64data = reader.result;
。

console.log(base64data);
= 空字符串

//...after blob is created
// Convert the Blob to base64 and then JSON format to submit with form
  const reader = new FileReader();
  reader.onload = function () {
    const arrayBuffer = reader.result;

    // Convert array buffer to base64
    const base64data = arrayBufferToBase64(arrayBuffer);

    // Create a JSON-formatted string with the base64-encoded blob data
    const jsonData = JSON.stringify({ videoBlob: base64data });

    // Set the value of the hidden input to the JSON representation
    blobInput.value = jsonData;
  };
  reader.readAsArrayBuffer(blob);
}
// Function to convert array buffer to base64
function arrayBufferToBase64(arrayBuffer) {
  const uint8Array = new Uint8Array(arrayBuffer);
  const binaryString = uint8Array.reduce((acc, byte) => acc + String.fromCharCode(byte), '');
  return btoa(binaryString);
}

其他想法

  • 也许最好不要使用 Django 表单？如果我这样做，那么我将通过 JavaScript 本身将表单数据提交到 Django 中的单独视图（使用 
    formData()
    和 
    fetch()
    ）。但是，我不想这样做，因为我喜欢 Django 表单提供的内置安全性。
  • 也许最好将数据发送到我的 Django 后端（一个单独的视图）然后以某种方式将其转换为 blob？

Django 表单和视图代码

包括这一点，以防有人对我的整体工作流程提出建议，因为我的最终目标是从用户录制视频到后端将该视频发送到第三方存储服务。

表格.py

from django import forms

class VidFileUploadForm(forms.Form):
    vidBlob = forms.JSONField(widget=forms.HiddenInput)
    name = forms.CharField(required=True)
    descrip = forms.CharField(required=True)

views.py

class VidDemoTwoView(FormMixin, TemplateView, ProcessFormView):
    """View class for experimental video recording view"""
    template_name = 'evaluations/vid_demo2.html'
    form_class = VidFileUploadForm
    success_url = reverse_lazy('view-vid-demo')
    
    def form_valid(self, form):

        vidBlob = form.cleaned_data['vidBlob']
        name = form.cleaned_data['name']
        description = form.cleaned_data['descrip']

        #logic to turn video blob into video file and then upload to 3rd party storage service

        return super().form_valid(form)
javascript django video django-forms blob
1个回答
0
投票

我找到了工作方法。我的问题是在我尝试创建 blob 之前 MediaRecorder 尚未完成其工作。这是我的完整脚本，这样你就可以看到我是如何修复它的（创建 

recordingPromise
并使 stopCapture 成为 
async
函数是关键（这样我就可以在尝试创建 blob 之前 
await
录制 Promise））：

JavaScript

/* ------------------- 
-------- Capture -------
------------------- */
const vidDisplay = document.querySelector("#vidDisplay");
const startRecordBtn = document.querySelector("#startRecordBtn");
const stopRecordBtn = document.querySelector("#stopRecordBtn");
const sendBtn = document.querySelector("#sendBtn");
const blobInput = document.querySelector("#id_vidBlob");
const resultDisplay = document.querySelector("#result");

/* -------------------------
--------- Variables ---------- 
--------------------------- */
// gotta have the chunks
const recordedChunks = [];

// User media constraints
const constraints = {
  audio: true,
  video: {
    width: 640,
    height: 360
  }
};
// declare stream globally
let stream;
// declare mediaRecorder globally
let mediaRecorder;
// declare recordingPromise globally
let recordingPromise;
// Recorder options
const recorderOptions = {
  mimeType: "video/webm; codecs=vp9",
  audioBitsPerSecond: 8000,
  videoBitsPerSecond: 156250,
};

/* -------------------------
--------- Functions ---------- 
--------------------------- */

// Function for starting screen capture
const startCapture = async function() {
  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    vidDisplay.srcObject = stream;

    // create media recorder
    mediaRecorder = new MediaRecorder(stream, recorderOptions);
    mediaRecorder.ondataavailable = handleDataAvailable;

    // start up recorder
    mediaRecorder.start();

    // Create a promise to resolve when the recording is stopped
    recordingPromise = new Promise((resolve) => {
      mediaRecorder.onstop = resolve;
    });
  } catch (err) {
    console.error(err);
  }
}

// Function for recorder
const handleDataAvailable = function(event) {
  console.log("data is available");
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  } else {
    // …
  }
}

// Function for stopping screen capture
const stopCapture = async function() {
  let tracks = vidDisplay.srcObject.getTracks();

  tracks.forEach((track) => track.stop());
  vidDisplay.srcObject = null;

  // stop ye recorder
  mediaRecorder.stop();

  await recordingPromise;

  const blob = new Blob(recordedChunks, {type: "video/webm",}); // create blob from recordedChunks

  // Convert the Blob to base64 and then JSON format to submit with form
  const reader = new FileReader();
  reader.onloadend = function () {
    try {
      const base64data = reader.result.split(',')[1];;
      console.log(base64data);

      // Create a JSON-formatted string with the base64-encoded blob data
      const jsonData = JSON.stringify({ videoBlob: base64data });
      
      // Set the value of the hidden input to the base64-encoded blob
      blobInput.value = jsonData;
    } catch (error) {
      console.error('Error during FileReader operation:', error);
    }
  };

  // read video data
  reader.readAsDataURL(blob);
}

/* -------------------------
--------- Event Listeners ---------- 
--------------------------- */

startRecordBtn.addEventListener("click", startCapture);
stopRecordBtn.addEventListener("click", stopCapture);

这样我就可以轻松地在表单中创建的 JSONField 中提交 blob，并且事实证明在视图中使用该 blob 非常容易，以便我可以将视频文件上传到第三方存储服务。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.