2017-07-21 52 views
1

如何在android手機的chrome瀏覽器中點擊按鈕上的android手機上打開前端攝像頭?在android chrome瀏覽器上使用javascript打開前端攝像頭

我正在使用網頁增強現實技術,在瀏覽器中默認在任何手機上打開後置攝像頭(基本上是鉻)。我想點擊按鈕打開前置攝像頭,但我無法做到。以下是我的代碼:

 <!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相加得到它。

回答

相關問題