Webcam.js rear camera not rotating properly

Question

I'm using Webcam.min.js library to capture image. When i'm using Tablet horizontally then it's working properly. But when i'm doing Tablet vertically then camera not rotating.

My code is:

<script type="text/javascript" src="../assets/webcam.min.js"></script>

<h4>Take picture</h4>
<div style="float:left;">
    <div id="my_camera"></div>
    <input type="button" id="snap" value="Take Snapshot" ng-click="ctrl.take_snapshot()">
</div>
<div style="display: inline-block;margin-top: -35px;;margin-left: 30%;;" id="results">Your captured image will appear here...</div>

Script code:

Webcam.set({
        width: 320,
        height: 240,
        image_format: 'jpeg',
        jpeg_quality: 90,
        flip_horiz: true,
        constraints: {
            video: true,
            facingMode: "environment"
        }
});
Webcam.attach( '#my_camera' );

this.take_snapshot= function take_snapshot() {
        // take snapshot and get image data
        Webcam.snap( function(data_uri) {
            // display results in page
            document.getElementById('results').innerHTML = 
                '<h5>Captured on : '+new Date()+'</h5>' + 
                '<img src="'+data_uri+'"/>';
                alert(data_uri);
        } );
}

I struggle a lot to fix it. But no luck.

Answer 1

I think I have a solution to the camera preference when using mobile.

The navigator.getUserMedia function is deprecated and you should instead use the newer MediaDevices.getUserMedia function. The link for the docs.

in your Threex.ArToolkitSource.js file at line 143 should then be changed to

var constraints = { video: { 
                   facingMode: "environment"  
                   mandatory: {
                                        maxWidth: _this.parameters.sourceWidth,
                               maxHeight: _this.parameters.sourceHeight
                    }
};

And if someone wants to instead use the 'selfie' camera they change "environment" to "user". You can even make a button to choose between the two.

However this might result in you changing a lot of code possibly