背景
VLC控件原有接口具有视频截图方法,即video对象的takeSnapshot方法,但是该方法返回的是一个IPicture对象,不适合在谷歌等现代浏览器上使用。因此,本人增加一个新的视频截图方法takeSnapshot2B64方法,直接将视频截图转成base64数据流返回出来。非常适合谷歌、火狐、Edge等现代浏览器上使用。
allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件产品,致力于将浏览器插件重新应用到所有浏览器。它不仅可以实现ActiveX控件在现代浏览器上使用,而且集成也非常方便。
allWebPlugin中间件VLC专用版内部以包含VLC控件,只需安装一次allWebPlugin中间件,VLC控件不需注册,就可以在Web系统中应用VLC控件。
alWebPlugin中间件核心优势
1、自创定位算法,实现插件与页面布局无缝衔接,极致用户体验。
2、自创插件接口调用方法,保持原汁原味的接口调用及事件响应方式,轻松实现OA系统升级改造。
3、支持同一页面或不同页面同时加载多个插件,适应各种复杂应用场景。
4、自主创新、安全可控,不受浏览器插件技术限制,支持更多浏览器(谷歌、火狐、Edge、360浏览器等)。
5、创新沙箱机制,隔离插件与浏览器运行环境,增强插件与浏览器稳定性和安全性。
6、攻克诸多技术难点,实现插件不修改、不注册也能使用,极大的降低插件开发量和维护量。
准备工作
1、下载allWebPlugin中间件产品,具体如下:
百度网盘
视频截图接口介绍
在video对象下,增加takeSnapshot2B64接口,具体如下
string takeSnapshot2B64()
接口说明:截获当前播放的视频图像,并将其转成base64编码。图像默认为jpg格式。
参数说明:无
返 回 值:字符串 表示截获的图像的base64数据流。
下面代码实现视频截图,并将截图保存到下载列表:
function snapshot(){
var video = vlcPlugin.video();
//获取vlc截图base64图片流
var imageb64 = video.takeSnapshot2B64();
//将图片保存到下载列表
var bimage = atob(imageb64);
var byteNumbers = new Uint8Array(bimage.length);
for (var i = 0; i < bimage.length; i++) {
byteNumbers[i] = bimage.charCodeAt(i);
}
var blob = new Blob([byteNumbers], { type: "image/jpg" });
// 创建一个隐藏的 <a> 元素
var link = document.createElement("a");
var url = URL.createObjectURL(blob);
link.href = url;
link.download = "vlc_snapshot.jpg"; // 设置下载文件名
document.body.appendChild(link); // 将链接添加到页面
link.click(); // 触发下载
document.body.removeChild(link); // 下载完成后移除链接
}

以上详细代码,请查看VLC包vlc.html示例。
