Ext js6连接电脑摄像头可以拍照录像功能的例子

我能够提供一个基于 Ext JS6 的连接电脑摄像头拍照录像功能的例子。但是，需要提醒的是，由于涉及 WebRTC 技术，所以在浏览器兼容性上存在一定的问题。以下是代码示例：

Ext.define('Camera', {
    extend: 'Ext.container.Container',

    renderTpl: [
        '<div class="{baseCls}-wrap">',
            '<video class="{baseCls}-video"></video>',
            '<div class="{baseCls}-actions">',
                '<button type="button" class="{baseCls}-capture">Capture</button>',
                '<button type="button" class="{baseCls}-record">Record</button>',
                '<button type="button" class="{baseCls}-stop">Stop</button>',
            '</div>',
        '</div>'
    ],

    initComponent: function() {
        var me = this;

        me.callParent();

        var videoEl = me.el.down('.Camera-video');

        navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function(stream) {
            videoEl.srcObject = stream;
            videoEl.play();
        });

        var captureBtnEl = me.el.down('.Camera-capture');
        var recordBtnEl = me.el.down('.Camera-record');
        var stopBtnEl = me.el.down('.Camera-stop');

        var canvasEl = document.createElement('canvas');
        var context = canvasEl.getContext('2d');

        captureBtnEl.on('click', function() {
            var width = videoEl.videoWidth;
            var height = videoEl.videoHeight;

            canvasEl.width = width;
            canvasEl.height = height;

            context.drawImage(videoEl, 0, 0, width, height);

            var url = canvasEl.toDataURL('image/png');

            // do something with the captured image
        });

        var mediaRecorder;
        var chunks = [];

        recordBtnEl.on('click', function() {
            mediaRecorder = new MediaRecorder(videoEl.srcObject);

            mediaRecorder.ondataavailable = function(e) {
                chunks.push(e.data);
            };

            mediaRecorder.onstop = function() {
                var blob = new Blob(chunks, { type: 'video/webm' });
                var url = URL.createObjectURL(blob);

                // do something with the recorded video
            };

            mediaRecorder.start();
        });

        stopBtnEl.on('click', function() {
            mediaRecorder.stop();
            chunks = [];
        });
    }
});

这个例子基于 WebRTC 技术，可以在支持 WebRTC 的浏览器中运行。它包含电脑摄像头连接、拍照和录制视频的功能。