SAP Fiori UI5从视频捕获快照

Question

我在做一个小的crud操作。我想从视频中捕获多个图像。在执行此操作时，我正在使用fixedDialog。但拍完照片后，再次打开fixedDialog时看不到视频。我在下面分享我的代码。

第一次打开视频，

​

​

在捕获之后，

​

​

<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);
            }
        });

    }

Answer 1

我建议您在执行new Dialog()之前检查您的this.fixedDialog是否存在:我怀疑您在再次打开对话框时添加了多个<video id='player' autoplay/>……

Answer 2

我建议您只添加that.fixedDialog.destroy()；在新闻事件中，我的代码如下

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);
            }
        });

    }