使用javascript在Android chrome浏览器上打开前置摄像头

时间:2017-07-21 12:50:25

标签: javascript android jquery html css

如何在Android手机的Chrome浏览器上点击按钮,在Android手机上打开前置摄像头?

我正致力于网络增强现实技术,默认情况下,在浏览器中打开后置摄像头(基本上是镀铬)。我想点击按钮打开前置摄像头,但我无法做到。以下是我的代码:

        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
        <html lang="en">
        <head>
        <script src="three.js"></script>
        <script src="aframe.min.js"></script>
        <script src="aframe-ar.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js">
        </script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
        </script> 
        </head>
        <body>
        <button onclick="callMe()" style="margin-top:150px; 
        padding:20px;">Click Me</button>
        <a-scene embedded arjs='sourceType: webcam;'><a-assets>
        <img id="my_image" src="Samplee.jpg" draggable="true" 
        crossorigin="anonymous">><img>
        </a-assets >
        <a-image id="image_disp"  src="#my_image" rotation="90 180 0" 
        visible="true"></a-image> 
        <a-marker-camera preset='hiro'></a-marker-camera>
        </a-scene>
        </body>
        <script>
        function callMe(){
        var video = document.querySelector('video');
        navigator.mediaDevices.enumerateDevices().
        then(function(devices) 
        {
          var userMediaConstraints = {
          audio: false,
          video: {
          facingMode: 'user',
          width: 1920, 
          height: 1080
        }
        } 
        navigator.mediaDevices.getUserMedia(userMediaConstraints)
        .then(function success(stream) {
        video.srcObject = stream;
        document.body.addEventListener('click', function(){
        video.play();
        })
        var interval = setInterval(function() {
        if (!video.videoWidth)  return;
        clearInterval(interval)
        }, 1000/50);
        }).catch(function(error) {
        console.log("Can't access user media", error);
        alert("Can't access user media :()");
        });
        }).catch(function(err) {
        console.log(err.name + ": " + err.message);
        });
        }
        </script>
        </html>

该代码不包含视频代码,但我仍然试图通过ID获取它,因为aframe-ar.js添加了视频代码。

1 个答案:

答案 0 :(得分:0)

简短的回答是,您无法在AR.js上选择后置和前置摄像头源。 但是有一个AR.js的拉取请求可能对你有所帮助。 Automatic back camera selection for exotic browsers