EZUIKit_js_v3.0_build20200720下载下来官方有两个环境运行方式
其中 1、javascript的是静态页面,需要部署到web服务器才能运行
2、npm是基于node环境,通过安装依赖包,运行
这边文档主要介绍 第一种截图获取图片流
上代码:
$("#capturePicture").click(function () {
/*截图方法1*/
// decoder.capturePicture(0,'default');
/*截图方法2*/
var capturePicturePromise = decoder.capturePicture(0,'default');
capturePicturePromise.then(function(data){
console.log("截图成功,用户执行关闭成功后的操作",data);
})
})
此时,如果截图,返回的data是数据为空的,需要分析源码decoder.capturePicture函数实现:过程如下
代码如下:
EZUIPlayer.prototype.capturePicture = function (iWind, pictureName) {
if (!!this.jSPlugin) {
return this.jSPlugin.JS_CapturePicture(iWind, pictureName)
} else {
throw new Error("Method not support");
}
}
有代码可知,调用的是jSPlugin.JS_CapturePicture函数,继续分析源码
key: "JS_CapturePicture", value: function e(t, i, n, r) {
var s = this;
var l = new Promise(function (e, l) {
console.log("JS_CapturePicture")
if (t < 0 || t > s.iMaxWndNum - 1) {
l();
return
}
if (!s.aWndList[t].bPlay) {
l();
return
}
if (!n) {
n = "JPEG"
}
if (s.aWndList[t].iMode === 1) {
var u = ".jpeg";
if (n === "BMP") {
u = ".BMP"
}
var f = (0, a.default)("video.play-window").eq(t).get(0);
var c = document.createElement("canvas");
c.width = f.videoWidth;
c.height = f.videoHeight;
c.getContext("2d").drawImage(f, 0, 0, c.width, c.height);
var d = c.toDataURL();
var h = o.oTool.dataURLtoBlob(d);
if (r) {
r(h)
} else {
o.oTool.downloadFile(h, i + u)
}
} else {
if (n === "BMP") {
s.aWndList[t].oPlayCtrl.PlayM4_GetBMP && s.aWndList[t].oPlayCtrl.PlayM4_GetBMP(function (t) {
if (t === 6) {
l(P)
} else {
if (r) {
r(t)
} else {
o.oTool.downloadFile(t, i + ".BMP")
}
e()
}
})
} else if (n === "JPEG") {
s.aWndList[t].oPlayCtrl.PlayM4_GetJPEG && s.aWndList[t].oPlayCtrl.PlayM4_GetJPEG(function (t) {
if (t === 6) {
l(P)
} else {
if (r) {
r(t)
} else {
o.oTool.downloadFile(t, i + ".jpeg")
}
e()
}
})
}
}
});
return l
}
}
得知:1、是一个异步函数,调用oPlayCtrl.PlayM4_GetJPEG放回得到了图片的base64格式
2、通过downloadFile下载文件,然后 e()进行异步成功
修改为: e(t)即可,得到我们需要的图片了