我正在使用Flask，我在其中的templates文件夹下编写了html文件。其中我有一个 html 文件，我在其中实现了屏幕录制。 问题是我可以在录制视频后直接下载视频。但实际上我希望它保存在我的 Flask 项目下一个名为 Recordings 的文件夹中...... 任何帮助将不胜感激
startRecording function--
function startRecording() {
navigator.mediaDevices.getDisplayMedia({ video: true }).then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = event => recordedChunks.push(event.data);
mediaRecorder.start();
startRecordingButton.disabled = true;
stopRecordingButton.disabled = false;
}).catch(error => {
console.error('Error starting recording:', error);
});
}
stopRecording function--
function stopRecording() {
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
mediaRecorder.stop();
startRecordingButton.disabled = false;
stopRecordingButton.disabled = true;
if (confirm('Do you want to save the recording?')) {
saveRecording();
}
}
}
如果您想将视频录制上传到服务器并将其保存在文件夹中，您可以使用 Fetch API 来完成。为此，请将视频数据转换为 Blob 并将其添加到 FormData 对象。然后通过 POST 请求将其上传到后台服务器。
在端点内，您可以使用用于将其添加到表单的密钥从 dict
request.filesFileStoragefrom flask import (
Flask,
abort,
render_template,
request
)
from mimetypes import guess_extension
from werkzeug.utils import secure_filename
import os
app = Flask(__name__)
app.config.from_mapping(
UPLOAD_FOLDER = os.path.join(app.instance_path, 'recordings')
)
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
@app.route('/')
def index():
return render_template('index.html')
@app.post('/upload')
def upload():
if file := request.files.get('video'):
extname = guess_extension(file.mimetype)
if not extname:
abort(400)
# Check for allowed file extensions.
i = 1
while True:
dst = os.path.join(
app.config['UPLOAD_FOLDER'],
secure_filename(f'video_{i}{extname}')
)
if not os.path.exists(dst): break
i += 1
file.save(dst)
return ''
abort(400)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index</title>
</head>
<body>
<main>
<button id="rec-btn">Start / Stop</button>
</main>
<script>
(function() {
const recBtn = document.getElementById('rec-btn');
const startRecording = () => {
let recorder;
const stopRecording = () => {
recorder && recorder.stop();
};
const constraints = { video: true };
navigator.mediaDevices.getDisplayMedia(constraints)
.then(function(stream) {
let chunks = []
recorder = new MediaRecorder(stream);
recorder.ondataavailable = event => {
chunks.push(event.data);
};
recorder.onstart = event => {
console.log('Recording started.');
};
recorder.onstop = event => {
console.log('Recording stopped.')
let blob = new Blob(chunks, { type: recorder.mimeType });
chunks = [];
if (confirm('Do you want to save the recording?')) {
const formData = new FormData();
formData.append('video', blob);
fetch('/upload', {
method: 'POST',
cache: 'no-cache',
body: formData
}).then(resp => {
if (!resp.ok) {
throw new Error('Upload failed.');
}
}).catch(console.error);
}
recBtn.removeEventListener('click', stopRecording);
recBtn.addEventListener('click', startRecording);
};
recBtn.removeEventListener('click', startRecording);
recBtn.addEventListener('click', stopRecording);
recorder.start();
})
.catch(console.error);
};
if (!navigator.mediaDevices) {
console.error('MediaDevices not supported.')
recBtn.remove();
return;
}
recBtn.addEventListener('click', startRecording);
})();
</script>
</body>
</html>