allWebPlugin中间件VLC专用版之截图功能介绍

 背景

         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示例。

本人维护的vlc控件