Captured Image appears to be streched width wise

[itshadii1]

    Code snippet 1:

const imageWidth = 320;

const imageHeigth = 240;

const imageHeigthOfUploadImage = 423;

$(function () {

// Create variables (in this scope) to hold the Jcrop API and image size

//var jcrop_api;

var boundx, boundy;

let cropper;



//#region WebCam

// Grab elements, create settings, etc.

let video = document.getElementById('video');





// Elements for taking the snapshot

let canvas = document.getElementById('canvas');

let context = canvas.getContext('2d');



// Trigger photo take

document.getElementById("btnCapture").addEventListener("click", function () {

    const aspectRatio = imageWidth / imageHeigth;

    context.drawImage(video, 0, 0, imageWidth, imageHeigth);



    //Set the canvas to Image1

    $("#Image1")[0].src = canvas.toDataURL();

    let displayWidth = $('#Image1').parent().width();

    let displayHeight= displayWidth/aspectRatio;               

    //Show the respective controls

    $('Image1').css({ width: displayWidth, height: displayHeight });

    $("#Image1").show();

    $("#canvas").hide();

    $('#btnSave').show();

    $('#btnCrop').show();

    $('#btnClear').show();



    /*//Destroy Jcrop if it is existed

    if (typeof jcrop_api != 'undefined') {

        jcrop_api.destroy();

        jcrop_api = null;

    }*/



    //Destroy cropperjs if it is existed

    if (cropper) {

        cropper.destroy();

    }



    /*//Jcrop for Webcamera

    $('#Image1').Jcrop({

        boxWidth: imageWidth,   //Maximum width you want for your bigger images

        boxHeight: imageHeigth,  //Maximum Height for your bigger images

        onChange: updateCoords,

        onSelect: updateCoords

    },

        function () {

            // use the Jcrop API to get the real image size

            var bounds = this.getBounds();

            boundx = bounds[0];

            boundy = bounds[1];

            // Store the Jcrop API in the jcrop_api variable

            jcrop_api = this;

            $("#canvas").hide();

        });*/



    //cropperjs for Webcamera

    cropper = new Cropper($('#Image1')[0], {

        viewMode: 3,

        restore: false,

        //aspectRatio: imageWidth / imageHeigth,

        autoCropArea: 1,

        crop(event) {

            $('#x').val(event.detail.x);

            $('#y').val(event.detail.y);

            $('#w').val(event.detail.width);

            $('#h').val(event.detail.height);

        },

    });

});



//#endregion WebCam

code snippet 2:

    function GetAccessToCamera() {

        let video = document.getElementById('video');



        // Get access to the camera!

        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

            // Not adding { audio: true } since we only want video now

            navigator.mediaDevices.getUserMedia({ video: true, width: imageWidth, heigth: imageHeigth }).then(function (stream) {

                //video.src = window.URL.createObjectURL(stream);

                video.srcObject = stream;

                video.play();

            });

        }

    }

Code snippet 3:

<div class="center">

    <p>

        <b>

            <asp:Label ID="lblUploadFile" runat="server" Text="<%$Resources:Resource, lblUploadFile %>"></asp:Label></b>

    </p>

    <input type="file" name="image_file" id="image_file" accept=".jpg,.png,.gif" />

    <br />

    <br />

</div>

<table class="table" border="0">

    <tbody>

        <tr>

            <td>

                <img id="preview" />

                <img id="Image1" src="" style="display: block; max-width: 100%; height:auto;" />

                <canvas id="canvas" width="320" height="240"></canvas>

            </td>

        </tr>

    </tbody>

</table>

<br />

I have attached 3 code snippets of the same file. It works as it is supposed to on laptops, and desktops. But on mobiles, after capturing the image from the webcam, the image appears to be stretched width wise in the class="col-md-4 center".

[itshadii1]