从使用VideoJS录制的视频blob中提取图片

Question

我使用VideoJS在我的网站上录制视频，并将其发送到服务器，服务器会根据帧将视频分割成不同的图像。但现在我想减少服务器负载，所以我试图修改我的代码，以便在视频录制后直接提取图像，但我不知道如何做到这一点。

这是我的videojs源代码：

$(document).ready(function(){
var player = videojs("myVideo", {
controls: true,
fluid: true,
width:250,
loop: false,
controlBar: {
volumePanel: false,
fullscreenToggle: true
},
plugins: {
record: {
audio: false,
video: true,
timeSlice: 2000,
maxLength: 1.5,
debug: true,
mandatory: {
minWidth: 1280,
minHeight: 720,
},
video: {
},
// dimensions of captured video frames
frameWidth: 1280,
frameHeight: 720
}
}
}, function() {
// print version information at startup
var msg = 'Using video.js ' + videojs.VERSION +
' with videojs-record ' + videojs.getPluginVersion('record') +
' and recordrtc ' + RecordRTC.version;
videojs.log(msg);
});
// user completed recording and stream is available
player.on('finishRecord', function() {
// document.getElementById("fileupload").value = player.recordedData;
formData.delete("video-blob")
formData.set("video-blob",player.recordedData)
$("#video_rec").rules('remove')
$("#video_rec-error").remove()
$('.submit_btn').removeAttr("disabled")
});

Answer 1

请参阅https://github.com/collab-project/videojs-record#options

您可以将image: true添加到您的记录插件对象中。

然后在finishRecord事件中，您可以通过player.recordedData获取它。