如何将录制的视频从 js 获取到我的 Flask 应用程序?
How can I get recorded video from js to my Flask App?
我有一个 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) {
})
})
});
以及我在 Flask 应用程序中的路线
@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 class,因为我一直将其用于我的登录表单,但我不太确定视频以何种方式返回给我,因为 json,图像等等
这是 VideoForm
class VideoForm(FlaskForm):
video = FileField('img')
submit = SubmitField('Save Video')
如果有人知道如何或有任何提示至少可以为我指明正确的方向,那就太好了!
谢谢
您可以使用“multipart/form-data”类型的表单来传输视频。
使用此变体,可以在 flask 中将数据作为文件访问 (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)
作为一种简单的替代方法,您还可以将数据以原始格式发送到服务器。
在这种情况下,数据填充整个 post-body 并且可以作为一个整体加载或从流中加载 (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)
我有一个 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) {
})
})
});
以及我在 Flask 应用程序中的路线
@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 class,因为我一直将其用于我的登录表单,但我不太确定视频以何种方式返回给我,因为 json,图像等等 这是 VideoForm
class VideoForm(FlaskForm):
video = FileField('img')
submit = SubmitField('Save Video')
如果有人知道如何或有任何提示至少可以为我指明正确的方向,那就太好了! 谢谢
您可以使用“multipart/form-data”类型的表单来传输视频。
使用此变体,可以在 flask 中将数据作为文件访问 (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)
作为一种简单的替代方法,您还可以将数据以原始格式发送到服务器。
在这种情况下,数据填充整个 post-body 并且可以作为一个整体加载或从流中加载 (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)