HTML5 MediaDevices.getUserMedia()API を使用して、デバイスのカメラ (前面カメラを含む) にアクセスできます。
MediaDevices.getUserMedia()フロントカメラを取得するために使用するサンプルコードは次のとおりです。
navigator.mediaDevices.getUserMedia({
video: {
facingMode: "user" } })
.then(function(stream) {
var video = document.querySelector('video');
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.error("Error getting video:", err);
});
この例では、facingMode: "user"フロントカメラを使用することを意味します。navigator.mediaDevices.getUserMedia()APIを通じてオブジェクトを取得します。これを要素の属性MediaStreamに割り当て、ビデオを再生するメソッドを呼び出すことができます。<video>srcObjectplay()
さらに、ブラウザでカメラの使用許可をリクエストする必要があります。この例では、API をgetUserMedia()使用して許可を自動的に要求します。別の API を使用している場合は、明示的に許可をリクエストする必要があります。
この API を使用するには HTTPS Web サイトにアクセスする必要があることに注意してください。そうでない場合、ブラウザはカメラへのアクセスをブロックします。
以下は、前面カメラをキャプチャし、iOS と互換性のある単純な HTML ページの例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取前置摄像头并兼容iOS</title>
</head>
<body>
<video id="video" width="640" height="480"></video>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
// 判断是不是IOS系统
var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// 获取video和canvas元素
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 获取媒体流
navigator.mediaDevices.getUserMedia({
video: {
facingMode: isIOS ? 'user' : {
exact: 'environment' }
}
}).then(function(stream) {
video.srcObject = stream;
video.play();
}).catch(function(err) {
console.log(err);
});
// 绘制视频流到canvas
function draw() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
requestAnimationFrame(draw);
}
// 开始绘制
video.addEventListener('play', function() {
draw();
});
</script>
</body>
</html>
上記のコードでは、まずnavigator.mediaDevices.getUserMedia()メソッドを使用してメディア ストリームを取得し、オプション オブジェクトにプロパティを設定しますfacingMode。iOS デバイスの場合は、フロント カメラを取得するために「ユーザー」に設定します。他のデバイスでは、背面カメラを取得するために「環境」に設定します。
<video>次に、取得したメディア ストリームを要素に割り当て、ビデオの再生を開始します。最後に、<canvas>要素を使用してビデオ ストリームを描画し、requestAnimationFrame()関数を使用してアニメーション効果を作成します。
上記の HTML コードを IDE にコピーし、「index.html」という名前のファイルとして保存し、最後にブラウザでファイルを開いて効果を確認します。iOS との互換性を確認するには、実際の iOS デバイスまたはシミュレータでのテストが必要であることに注意してください。