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