Ext js6连接电脑摄像头实现拍照保存录像功能的示例

非常感谢您的提问！以下是一个基于 Ext JS 6 的连接电脑摄像头实现拍照保存录像功能示例：

// create video element
var videoElement = Ext.create('Ext.dom.Element', {
    tag: 'video',
    width: 480,
    height: 320
});

// add video element to panel
var panel = Ext.create('Ext.panel.Panel', {
    title: 'Camera',
    items: [videoElement],
    buttons: [
        {
            text: 'Take Photo',
            handler: function() {
                // create canvas element
                var canvasElement = Ext.create('Ext.dom.Element', {
                    tag: 'canvas',
                    width: videoElement.getWidth(),
                    height: videoElement.getHeight()
                });

                // draw video frame on canvas
                canvasElement.dom.getContext('2d').drawImage(videoElement.dom, 0, 0, videoElement.getWidth(), videoElement.getHeight());

                // save canvas as image
                Ext.ux.saveAs({
                    data: canvasElement.dom.toDataURL(),
                    filename: 'photo.png'
                });
            }
        },
        {
            text: 'Record Video',
            handler: function() {
                // create media stream
                navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
                    // play media stream on video element
                    videoElement.dom.srcObject = stream;
                    videoElement.dom.play();

                    // start recording
                    var mediaRecorder = new MediaRecorder(stream);
                    var chunks = [];
                    mediaRecorder.ondataavailable = function(event) {
                        chunks.push(event.data);
                    };
                    mediaRecorder.onstop = function() {
                        // save video as blob
                        var blob = new Blob(chunks, { type: 'video/mp4' });
                        Ext.ux.saveAs({
                            data: URL.createObjectURL(blob),
                            filename: 'video.mp4'
                        });
                    };
                    mediaRecorder.start();
                }).catch(function(error) {
                    console.error(error);
                });
            }
        }
    ]
});

Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    items: [panel]
});

希望这个示例对您有所帮助！如果您还有其他问题或需要更多帮助，请随时联系我。