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();
},