通过表单使用 getUserMedia 发送录制的视频而不使用 FormData

Question

我有一个表单，用户可以使用 getUserMedia 用他们的网络摄像头录制自己，我需要在将文件保存到服务器之前将他们录制的文件发送到另一个页面。

我的问题是我怎样才能做到这一点？到目前为止，我已经生成了一个视频 blob，如何通过我的表单将其发送到下一个页面，以便我可以访问该文件，然后将其存储在服务器上？

目前我正在像这样生成 blob，它有效：

let videoURL = window.URL.createObjectURL(blob, {autoRevoke: false});

但我不确定如何在不使用 AJAX 和 FormData 的情况下将此文件作为表单 POST 请求的一部分发送。甚至有可能还是我不正确地处理这个问题？

Answer 1

从您的 blob 创建一个文件，将其添加到 FileList，然后覆盖表单中输入的文件的 FileList。

<form>
    ...
    <input type="file" name="myvideo" id="fileinput">
    ...
</form>

var input = document.querySelector('#fileinput'); //the file input
var file = new File(blob, 'video_file.mp4'); // create new file
// Need to use a data transfer object to get a new FileList object
var datTran = new ClipboardEvent('').clipboardData || new DataTransfer(); 
datTran.items.add(file);  // Add the file to the DT object
input.files = datTran.files; // overwrite the input file list with ours

通过表单使用 getUserMedia 发送录制的视频而不使用 FormData

Send recorded video using getUserMedia through form without using FormData

javascript

php

blob

getusermedia