How to retake a webcam image through phone camera

Question

am creating a form where guests take a picture through their phone camera before submitting the form. So the webcam works well on desktop/computer but on mobile devices I notice when the Retake Picture button is clicked on mobile it opens the file gallery instead of starting the webcam camera again. Its a must the guests take the picture through their phone camera. Also I need help to submit the captured image as woocommerce product image, am working with wordpress user frontend plugin.

jQuery(document).ready(function ($) {
var fileSelectorID = webcam_params.fileSelectorID;
Webcam.set({
    width: 640,
    height: 480
});

var webcamActive = false;

function captureImage() {
    Webcam.snap(function (data_uri) {
        var $imageElement = $('<img id="captured-image" />');
        $('#' + fileSelectorID).after($imageElement);
        $imageElement.attr('src', data_uri);

        Webcam.reset();
        webcamActive = false;

        $('#retake-button').show();
        $('#capture-button').hide();

        saveImageOnServer(data_uri);
    });
}

function retakePicture() {
    $('#captured-image').remove();
    $('#capture-button').show();
    $('#retake-button').hide();

    if (!webcamActive) {
        Webcam.attach('#' + fileSelectorID);
        webcamActive = true;
    }
}

function saveImageOnServer(imageData) {
    $.ajax({
        url: ajaxurl,
        type: 'POST',
        data: {
            action: 'save_webcam_image',
            captured_image_data: imageData
        },
        success: function (response) {
            console.log(response);
        },
        error: function (error) {
            console.error(error);
        }
    });
}

function initializeWebcam() {
    Webcam.attach('#' + fileSelectorID);

    var $captureButton = $('<button id="capture-button">Capture</button>');
    $('#' + fileSelectorID).after($captureButton);

    var $retakeButton = $('<button id="retake-button" style="display:none;">Retake Picture</button>');
    $('#' + fileSelectorID).after($retakeButton);

    $captureButton.on('click', function () {
        captureImage();
    });

    $retakeButton.on('click', function () {
        retakePicture();
    });
}

initializeWebcam();

$('#' + fileSelectorID).on('click', function () {
    if (!webcamActive) {
        initializeWebcam();
        webcamActive = true;
    }
});

});