如何将录制的视频从js获取到我的Flask应用程序

Question

我有一个flask应用程序，它应该录制视频，并能够将视频发送回我的python脚本，然后放入数据库。我试着把它变成一种形式，但不太确定我做得对。这是我的js

audio: false, 
video:true
}; 
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
navigator.mediaDevices.getUserMedia = function(constraintObj) {
let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraintObj, resolve, reject);
});
}
}else{
navigator.mediaDevices.enumerateDevices()
.then(devices => {
devices.forEach(device=>{
console.log(device.kind.toUpperCase(), device.label);
//, device.deviceId
})
})
.catch(err=>{
console.log(err.name, err.message);
})
}
navigator.mediaDevices.getUserMedia(constraintObj)
.then(function(mediaStreamObj) {
//connect the media stream to the first video element
let video = document.querySelector('video');
if ("srcObject" in video) {
video.srcObject = mediaStreamObj;
} else {
//old version
video.src = window.URL.createObjectURL(mediaStreamObj);
}

video.onloadedmetadata = function(ev) {
//show in the video element what is being captured by the webcam
video.play();
};
let start = document.getElementById('startbtn');
let stop = document.getElementById('btnStop');
let vidSave = document.getElementById('vid2');
let mediaRecorder = new MediaRecorder(mediaStreamObj);
let chunks = [];

start.addEventListener('click', (ev)=>{
mediaRecorder.start();
console.log(mediaRecorder.state);
})
stop.addEventListener('click', (ev)=>{
mediaRecorder.stop();
console.log(mediaRecorder.state);
});
mediaRecorder.ondataavailable = function(ev) {
chunks.push(ev.data);
}
mediaRecorder.onstop = (ev)=>{
let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
for (chunk in chunks) {
console.log(chunk);
}
chunks = [];
let videoURL = window.URL.createObjectURL(blob);
vidSave.src = videoURL;
}
$.post('/video',
{share: videoURL}, function(data) {
})
})
});

和我的烧瓶应用中的路线

@main_bp.route('/video' , methods=['GET', 'POST'])
@login_required
def video():
form = VideoForm()
if form.validate_on_submit():
flash('Video Saved Successfully!')
vid = request.json['share']
print(jsonify(vid))
return redirect('home.html')
return render_template('video.html', form=form, name=current_user.username)```

我也有一个VideoForm类，因为我一直在用它来登录表单，但我真的不确定视频是以什么方式返回给我的，比如json、图像等。这是VideoForm

class VideoForm(FlaskForm):
video = FileField('img')
submit = SubmitField('Save Video')

如果有人知道如何或有任何技巧可以指引我朝着正确的方向前进，那就太好了！感谢

Answer 1

您可以使用类型为"多部分/形式数据"；以传输视频
使用此变体，数据可以作为文件(werkzeug.FileStorage(在烧瓶中访问。

let formData = new FormData();
formData.append('video', blob, "video.mp4");
$.ajax ({
url: "/upload",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(resp){
console.log(resp);
}
});

@app.route('/upload', methods=['POST'])
def upload():
video = request.files.get('video')
if video: 

# process the file object here! 
return jsonify(success=True)
return jsonify(success=False)

作为一个简单的替代方案，您也可以将数据以原始形式发送到服务器。
在这种情况下，数据填充整个帖子主体，可以作为一个整体加载，也可以从流(werkzeug.LimitedStream(加载。

$.ajax ({
url: "/upload",
type: "POST",
data: blob,
contentType: "video/mp4",
processData: false,
success: function(resp){
console.log(resp);
}
});

@app.route('/upload', methods=['POST'])
def upload():
if request.headers.get('Content-Type') == 'video/mp4':
# load the full request data into memory
# rawdata = request.get_data()

# or use the stream 
rawdata = request.stream.read()
# process the data here!
return jsonify(success=True)
return jsonify(success=False)