Блог

Я использую Webcam.min.js библиотека для захвата изображения. Когда я использую планшет горизонтально, он работает правильно. Но когда я делаю планшет вертикально, камера не вращается.

Мой код:

 <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>
 

Код скрипта:

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

Я изо всех сил пытаюсь это исправить. Но не повезло.

Я думаю, что у меня есть решение для настройки камеры при использовании мобильного устройства.

Эта navigator.getUserMedia функция устарела, и вместо нее следует использовать более новую MediaDevices.getUserMedia функцию. Ссылка на документы.

в вашем Threex.ArToolkitSource.js файле at строка 143 должна быть изменена на

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

И если кто-то хочет вместо этого использовать камеру «селфи», они меняют «окружение» на «пользователь». Вы даже можете сделать кнопку для выбора между двумя.

Однако это может привести к возможному изменению большого количества кода