繁体   English   中英

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

[英]Open front camera on android chrome browser using javascript

如何在Android手机的chrome浏览器中单击按钮打开Android手机上的前置摄像头?

我正在研究网络增强现实,默认情况下,它会在浏览器中打开任何手机上的后置摄像头(基本上是 chrome)。 我想通过单击按钮打开前置摄像头,但我无法做到。 以下是我的代码:

        <!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 添加的。

简短的回答是,您目前无法在 AR.js 上在后置和前置摄像头来源之间进行选择。 但是,有一个 AR.js 的 pull request 可能会对您有所帮助。 异国浏览器的自动后置摄像头选择

更新了 AR.js Github 页面

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM