0
ユーザーのカメラを表示するためにCrosswalkを使用しようとしています。私が抱えている問題は、それが表示されていないということです。理由はわかりません。コンソールにもエラーは表示されません。アンドロイドデバイスにカメラが表示されない
<!doctype html>
<html>
<head>
<title>Camera</title>
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com 'unsafe-inline'; style-src * 'unsafe-eval'; media-src 'self' blob:">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<video id="monitor" autoplay></video>
<canvas id="photo"></canvas>
<input type=button value="📷" onclick="snapshot()">
</div>
<script type="text/javascript" src="js/plugins/jquery.min.js"></script>
<script type="text/javascript" src="js/dist/pages/camera.js"></script>
</body>
</html>
私はそれを実行するには、このJavaScriptを使用しています:
$(window).on('load', event => {
var video = document.getElementById('monitor');
var canvas = document.getElementById('photo');
navigator.getUserMedia({
video: true
}, stream => {
video.src = URL.createObjectURL(stream);
video.onloadedmetadata = function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
};
}, error => {
console.log('Could not load media');
});
function snapshot() {
canvas.getContext('2d').drawImage(video, 0, 0);
}
});
私もこの方法が同様にJavaScriptを試してみました:
$(window).on('load', event => {
var video = document.getElementById('monitor');
var canvas = document.getElementById('photo');
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
video.src = URL.createObjectURL(stream);
video.onloadedmetadata =() => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
}
});
});