<video id="player" controls autoplay></video>
                <button id="capture">Capture</button>
                <canvas id="canvas" width=320 height=240></canvas>
                <script>
                    const player = document.getElementById('player');
                    const canvas = document.getElementById('canvas');
                    const context = canvas.getContext('2d');
                    const captureButton = document.getElementById('capture');
                    const constraints = {
                        audio: false,
                        video: {
                            facingMode: {
                                exact: "environment"
                            },
                            width: { min: 1024, ideal: 1280, max: 1920 },
                            height: { min: 776, ideal: 720, max: 1080 }
                        }
                    };

                    captureButton.addEventListener('click', () => {
                        context.drawImage(player, 0, 0, canvas.width, canvas.height);
                    });
                    navigator.mediaDevices.getUserMedia(constraints)
                        .then((stream) => {
                            player.srcObject = stream;
                        });
                </script>