H5 获取前置摄像头

2023-06-13 01:57| 来源: 网络整理| 查看: 265

您可以使用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 对象，您可以将其分配给元素的 srcObject 属性，并调用 play() 方法来播放视频。

此外，您需要在浏览器中请求使用摄像头的权限，此示例中使用 getUserMedia() API 自动提示请求权限，如果您使用的是其他 API，则需要明确请求权限。

请注意，您需要在 HTTPS 网站上才能使用此 API，否则浏览器会阻止访问摄像头。

以下是一个简单的HTML页面示例，可以获取前置摄像头并且兼容iOS：

DOCTYPE html> 获取前置摄像头并兼容iOS // 判断是不是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(); });

在上面的代码中，我们首先使用navigator.mediaDevices.getUserMedia()方法获得媒体流，并在选项对象中设置了facingMode属性。如果是iOS设备，我们将其设置为’user’来获取前置摄像头。在其他设备中，我们将其设置为’environment’来获取后置摄像头。

然后，我们将获取到的媒体流分配给元素，开始播放视频。最后，我们使用元素来绘制视频流，并使用requestAnimationFrame()函数创建一个动画效果。

您可以将上面的HTML代码复制到您的IDE中，然后将其保存为一个名为“index.html”的文件，最后在浏览器中打开该文件以查看效果。注意，兼容iOS需要在真实的iOS设备或模拟器上测试。

【本文地址】

公司简介

联系我们