如题, 这个是可以实现的吗? 前端直接获取当前视频的所有帧,并把每一帧当初一个图片,传到后台。
function fecthVideoThumbnail(entryid, index){
var filename = path.join(imageDir, entryid, index + videoSuffix);
var thumb = path.join(imageDir, entryid, "overview",index + thumbSuffix);
var thumbPath = path.join(imageDir, entryid, "overview");
if (!fs.existsSync(thumbPath)) {
fs.mkdirSync(thumbPath);
}
var that = this;
filename = filename.replaceAll("\\","\\");
var cmdthumb = thumb.replaceAll("\\","\\");
if(!fs.existsSync(thumb)){
exec("ffmpeg -ss 00:00:10 -i "+filename+" -y -f image2 -t 0.001 "+cmdthumb+"", function() {
console.log(arguments[0]);
console.log('success');
readFileEntry(thumb,that.res);
});
}else{
readFileEntry(thumb,that.res);
}
}
自己开F12看两下 貌似是缩略图是上传视频后 由服务器处理截取缩略图并存储,用户鼠标悬停后根据进度条请求图片(我把鼠标从左到右挪动了一遍 看到多了10个请求 应该是缩略图的)但是不太清楚是实时截取并缓存的 还是随着视频上传时就截取保存的。前端新手,可能视频源从别的地方提供啊或者考虑存储的空间啊我都还不是太了解。
想问下具体的流程大概是什么样的。。以及服务器处理截取缩略图如何实现呢?js的话有没有库可以实现。
可以考虑用画布试一下,我在做这块功能的时候用了ffmpeg插件,通过后台截取文件上传。
思路是用h5把视频流上传到node,node保存为文件,再用视频分帧工具生成图片
int a = 0;
String name = "张三"
```