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

相关推荐
半点寒12W4 分钟前
uniapp全局状态管理实现方案
前端
Vertira5 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL40 分钟前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟1 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
buibui1 小时前
打包一个工具类
前端
巴别塔的饿灵1 小时前
Webpack[TBC]
前端
LinHan1 小时前
我的浏览器插件 Horizon-Hop 又又又更新啦!
前端