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数据流。

下面代码实现视频截图，并将截图保存到下载列表：

javascript 复制代码

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控件