我正在尝试将录制的视频数据从某些javascript代码传递到我的路线,以便我可以保存它
成为新手
javascript使用用户网络摄像头录制视频,并将其保存为recordedBlob。我正在尝试将记录的Blob数据传递到我的python路由进行保存。
这是javascript代码。它在我的html文件中
<script type="text/javascript">
let video = document.getElementById("video");
let recording = document.getElementById("recording");
let startButton = document.getElementById("startButton");
let stopButton = document.getElementById("stopButton");
let downloadButton = document.getElementById("downloadButton");
let logElement = document.getElementById("log");
let recordingTimeMS = 5000;
function log(msg) {
logElement.innerHTML += msg + "\n";
}
function wait(delayInMS) {
return new Promise(resolve => setTimeout(resolve, delayInMS));
}
function startRecording(stream, lengthInMS) {
let recorder = new MediaRecorder(stream);
let data = [];
recorder.ondataavailable = event => data.push(event.data);
recorder.start();
log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");
let stopped = new Promise((resolve, reject) => {
recorder.onstop = resolve;
recorder.onerror = event => reject(event.name);
});
let recorded = wait(lengthInMS).then(
() => recorder.state == "recording" && recorder.stop()
);
return Promise.all([
stopped,
recorded
])
.then(() => data);
}
function stop(stream) {
stream.getTracks().forEach(track => track.stop());
}
startButton.addEventListener("click", function() {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
video.srcObject = stream;
downloadButton.href = stream;
video.captureStream = video.captureStream || video.mozCaptureStream;
return new Promise(resolve => video.onplaying = resolve);
}).then(() => startRecording(video.captureStream(), recordingTimeMS))
.then (recordedChunks => {
let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
recording.src = URL.createObjectURL(recordedBlob);
downloadButton.href = recording.src;
downloadButton.download = "RecordedVideo.webm";
log("Successfully recorded " + recordedBlob.size + " bytes of " +
recordedBlob.type + " media.");
})
.catch(log);
}, false);
stopButton.addEventListener("click", function() {
stop(video.srcObject);
}, false);
</script>
这是routes.py,我尝试传递记录的Blob数据
@posts.route('/post/new/vlog',methods=['GET','POST'])
def new_vlog():
if current_user.is_authenticated:
return render_template('vlog.html',title='New Vlog',video={recordedBlob})
if video.data:
video_file = save_video(video.data)
return redirect(url_for('main.home'))
else:
return redirect(url_for('users.login'))