[英]SAP Fiori UI5 Capturing snapshot from video
I'm doing a small crud operation.我正在做一个小的 crud 操作。 I want to capture more than one image from the video.
我想从视频中捕获多个图像。 I am using a fixedDialog while doing this.
这样做时我正在使用 fixedDialog 。 But after taking a picture, I can't see the video while opening the fixedDialog again.
但是拍照后,再次打开fixedDialog看不到视频。 I share my codes below.
我在下面分享我的代码。
First time opening video,第一次打开视频,
After capturing,捕获后,
<Button text="Resim Ekle" width="100px" id="idCapture" press="takePhoto"/>
<Vbox id="wow">
<Vbox id="canvasContainer">
</Vbox>
</Vbox>
takePhoto: function(oEvent) {
// Create a popup object as a global variable
var that = this;
that.fixedDialog = new Dialog({
title: "Fotoğraf çekmek için tıklayınız",
beginButton: new sap.m.Button({
text: "Resim Çek",
press: function() {
that.imageVal = document.getElementById("player");
that.fixedDialog.close();
}
}),
content: [
new sap.ui.core.HTML({
content: "<video id='player' autoplay/>"
}),
new sap.m.Input({
placeholder: 'Lütfen resim adını giriniz',
required: false
})
],
endButton: new sap.m.Button({
text: "İptal",
press: function() {
that.fixedDialog.close();
}
})
});
that.getView().addDependent(this.fixedDialog);
this.fixedDialog.open();
that.fixedDialog.attachBeforeClose(this.setImage, this);
var handleSuccess = function(stream) {
player.srcObject = stream;
};
navigator.mediaDevices.getUserMedia({
video: true
}).then(handleSuccess);
},
setImage: function() {
var oVBox = this.getView().byId("wow");
var canvasContainer = this.getView().byId("canvasContainer");
var items = oVBox.getItems();
var snapId = 'canvas-' + items.length;
var textId = snapId + '-text';
var imageVal = this.imageVal;
var snapImg = null;
var snapCanvas = new sap.ui.core.HTML({
content: "<canvas display:none id='" + snapId + "' width='400' height='200' ></canvas>"
});
oVBox.addItem(snapCanvas);
snapCanvas.addEventDelegate({
onAfterRendering: function() {
var canvasElem = document.getElementById(snapId);
var snapCanvasContext = canvasElem.getContext('2d');
snapCanvasContext.drawImage(imageVal, 0, 0, canvasElem.width, canvasElem.height);
}
});
}
我建议您在执行new Dialog()
之前检查您的this.fixedDialog
存在:我怀疑您在再次打开对话框时添加了多个<video id='player' autoplay/>
...
I suggest you to add only that.fixedDialog.destroy();我建议你只添加 that.fixedDialog.destroy(); in press event my code is below
在新闻发布会上,我的代码如下
takePhoto: function (oEvent) {
debugger;
// Create a popup object as a global variable
var that = this;
that.fixedDialog = new sap.m.Dialog({
title: "Open Camera For Video",
beginButton: new sap.m.Button({
text: "Capture",
press: function () {
that.imageVal = document.getElementById("player");
that.fixedDialog.close(this);
that.fixedDialog.destroy();
}
}),
content: [
new sap.ui.core.HTML({
content: "<video id='player' autoplay/>",
}),
new sap.m.Input({
placeholder: 'Name',
required: false
})
],
endButton: new sap.m.Button({
text: "Close",
press: function () {
that.fixedDialog.destroy();
that.fixedDialog.close();
}
})
});
that.getView().addDependent(this.fixedDialog);
this.fixedDialog.open();
that.fixedDialog.attachBeforeClose(this.setImage, this);
var handleSuccess = function (stream) {
player.srcObject = stream;
};
navigator.mediaDevices.getUserMedia({
video: true
}).then(handleSuccess);
},
setImage: function () {
var oVBox = this.getView().byId("wow");
var canvasContainer = this.getView().byId("canvasContainer");
var items = oVBox.getItems();
var snapId = 'canvas-' + items.length;
var textId = snapId + '-text';
var imageVal = this.imageVal;
var snapImg = null;
var snapCanvas = new sap.ui.core.HTML({
content: "<canvas display:none id='" + snapId + "' width='400' height='200' ></canvas>"
});
oVBox.addItem(snapCanvas);
snapCanvas.addEventDelegate({
onAfterRendering: function () {
var canvasElem = document.getElementById(snapId);
var snapCanvasContext = canvasElem.getContext('2d');
snapCanvasContext.drawImage(imageVal, 0, 0, canvasElem.width, canvasElem.height);
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.