从网络摄像头 Ext JS 捕获图片

Question

我在这里看到了这个教程： https://github.com/mdn/samples-server/blob/master/s/webrtc-capturestill/capture.js

但是我在将它实现到我的代码中时遇到了麻烦，正在寻求一些帮助...

我基本上想要一个面板，您可以在其中按下“拍照”按钮。这将打开一个新的浮动面板，其中网络摄像头的实时流将自动启动，并且您有一个捕获图像的按钮。

    takePicture: function (photoPanel)
    {
        let me = this;

        let capture = Ext.create('Ext.panel.Panel', {
            title: 'Take Picture',
            height: 500,
            width: 750,
            draggable: true,
            closable: true,
            floating: true,
            layout: {
                type: 'vbox',
                pack: 'center',
                align: 'middle'
            },
            items: [
                {
                    xtype: 'container',
                    itemId: 'video',
                    height: 400,
                    width: 350
  // this is where I want the live webcam to stream
                },
                {
                    xtype: 'button',
                    text: 'Take Picture',
                    itemId: 'startbutton',
                    handler: function (btn)
                    {

                    }
    // button to capture the image
                }
            ]
        });
        photoPanel.add(capture).show();
    },

Answer 1

我制作了一个简单的fiddle，根据提供的脚本拍摄照片