Capture picture from webcam Ext JS

Question

I came across this tutorial here: https://github.com/mdn/samples-server/blob/master/s/webrtc-capturestill/capture.js

However I am having trouble implementing it into my code and was looking for some assistance...

I basically want to have a panel where you can press a 'take picture' button. This will then open up a new floating panel where the live stream of the webcam will start automatically and you have a button which captures the image.

    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

I made a simple fiddle with capturing photos based on provided scripts