ext js6连接电脑摄像头拍照录像的例子

对于Ext JS 6，由于Ext JS本身并不提供与电脑摄像头的连接和控制功能，所以我们需要借助第三方库来达到目的。以下是一个基于WebcamJS库的例子，可以连接电脑摄像头，拍照和录像。

首先，我们需要在HTML文件中引入WebcamJS库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>

然后，在Ext JS应用程序中创建一个视图，包括两个按钮：一个用于拍照，一个用于录像。

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'app-main',
    title: 'Camera Demo',
    layout: {
        type: 'vbox',
        align: 'center',
        pack: 'center'
    },
    items: [{
        xtype: 'button',
        text: 'Take Photo',
        handler: function() {
            Webcam.snap(function(dataUrl) {
                // Display the photo in an image tag
                Ext.getCmp('photo').setSrc(dataUrl);
            });
        }
    }, {
        xtype: 'button',
        text: 'Start Recording',
        handler: function() {
            Webcam.startRecording(function() {
                Ext.Msg.alert('Recording started');
            });
        }
    }, {
        xtype: 'button',
        text: 'Stop Recording',
        handler: function() {
            Webcam.stopRecording(function(dataUrl) {
                // Display the video in a video tag
                Ext.getCmp('video').setSrc(dataUrl);
            });
        }
    }, {
        xtype: 'image',
        id: 'photo',
        width: 640,
        height: 480
    }, {
        xtype: 'video',
        id: 'video',
        width: 640,
        height: 480,
        controls: true
    }]
});

在这个视图中，我们创建了两个按钮：一个用于拍照，一个用于录像。当用户点击“Take Photo”按钮时，我们调用Webcam.snap()方法来拍照，并将结果显示在一个图像标签中。当用户点击“Start Recording”按钮时，我们调用Webcam.startRecording()方法来开始录像。当用户点击“Stop Recording”按钮时，我们调用Webcam.stopRecording()方法来停止录像，并将结果显示在一个视频标签中。

最后，在Ext JS应用程序的控制器中，我们需要在应用程序启动时初始化WebcamJS库：

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.ViewController',

    init: function() {
        // Initialize WebcamJS
        Webcam.set({
            width: 640,
            height: 480,
            dest_width: 640,
            dest_height: 480,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach('#photo');
        Webcam.attach('#video');
    }
});

在这个控制器中，我们使用Webcam.set()方法来配置WebcamJS库的参数，例如宽度、高度、图片格式和JPEG质量等。然后，我们使用Webcam.attach()方法将摄像头连接到图像和视频标签上。

这就是一个基于WebcamJS库的Ext JS 6连接电脑摄像头拍照录像的例子。注意，由于WebcamJS库是一个第三方库，所以它可能会随着时间的推移而更新。因此，您需要根据最新版本的文档来更新代码。