Extjs6调用电脑摄像头录像和拍照功能的例子

以下是一个使用 Extjs6 调用电脑摄像头录像和拍照功能的示例代码：

Ext.create('Ext.window.Window', {
    title: '摄像头',
    width: 640,
    height: 480,
    layout: 'fit',
    items: [{
        xtype: 'component',
        autoEl: {
            tag: 'video',
            autoplay: true,
            muted: true,
            width: 640,
            height: 480
        },
        listeners: {
            afterrender: function(cmp) {
                navigator.mediaDevices.getUserMedia({
                    video: true
                }).then(function(stream) {
                    cmp.getEl().dom.srcObject = stream;
                });
            }
        }
    }],
    buttons: [{
        text: '拍照',
        handler: function() {
            var video = this.up('window').down('video').getEl().dom;
            var canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            var dataURL = canvas.toDataURL();
            Ext.Msg.alert('拍照成功', '<img src="' + dataURL + '">');
        }
    }, {
        text: '录像',
        handler: function() {
            var video = this.up('window').down('video').getEl().dom;
            if (video.paused) {
                video.play();
                this.setText('停止');
            } else {
                video.pause();
                this.setText('录像');
            }
        }
    }]
}).show();

这个例子创建了一个窗口，里面包含一个视频组件和两个按钮，一个用于拍照，一个用于录像。当用户点击拍照按钮时，它会将视频帧绘制到画布上，并将画布转换为数据 URL，然后在一个消息框中显示。当用户点击录像按钮时，它会开始或停止录像。