在这篇文章中，我将向您展示如何通过JavaScript在网页上访问设备的摄像头，支持多种浏览器，而不需要外部库。如何使用摄像头要访问用户的摄像头（或麦克风），我们使用JavaScriptMediaStreamAPI。此API允许对这些设备捕获的视频和音频进行流式访问。第一步是检查浏览器是否支持此API：if("mediaDevices"innavigator&&"getUserMedia"innavigator.mediaDevices){//ok，浏览器支持它}在现代浏览器中，支持很好（没有InternetExplorer课程）。捕获视频流要捕获摄像机生成的视频流，我们使用mediaDevices对象的getUserMedia方法。此方法接收一个对象，其中包含我们要请求的媒体类型（视频或音频）和一些要求。首先，我们可以通过{video:true}获取摄像头的视频。constvideoStream=awaitnavigator.mediaDevices.getUserMedia({video:true});此调用将请求用户访问相机的权限。如果用户拒绝，它将抛出异常并且不返回流。因此，必须在try/catch块中处理这种情况。请注意，它返回一个Promise，因此您必须使用async/await或then块。在MacOS系统上，授权也会弹出。没错，我用的是Mac版的Edge浏览器。单击“确定”以访问计算机摄像头。控制台输出的videoStream对象如下。Videospecifications(requirements)我们可以传递关于要求分辨率的信息和最小和最大限制信息来提高视频要求：constconstraints={video:{width:{min:1280,ideal:1920,max:2560,},height:{min:720,ideal:1080,max:1440,},},};constvideoStream=awaitnavigator.mediaDevices.getUserMedia(constraints);这样，流以正确的宽度和高度比例进来，如果它是纵向模式的手机，则需要大小反转。在页面上显示视频现在我们有了一个流，我们如何处理它呢？我们可以在页面的video元素中显示视频：//页面中有一个标签constvideo=document.querySelector("#video");constvideoStream=awaitnavigator.mediaDevices.getUserMedia（约束）；video.srcObject=videoStream；请注意视频标签中的自动播放属性，如果没有它，您需要调用video.play()才能真正开始显示图像。访问手机前后摄像头默认情况下，getUserMedia将使用系统默认的视频录制设备。对于带有两个摄像头的手机，它使用前置摄像头。要访问后置摄像头，我们必须在视频规范中包含faceModeMode:"environment"：constconstraints={video:{width:{...},height:{...},facingMode:"environment"},};默认值为facingMode:"user"，表示前置摄像头。请注意，如果您想在视频正在播放时更换摄像头，则需要先停止当前视频流，然后再将其替换为另一个摄像头的视频流。videoStream.getTracks().forEach((track)=>{track.stop();});屏幕截图您可以做的另一件很酷的事情是捕获视频图像（屏幕截图）。可以在画布上绘制当前视频帧，例如：//页面中有一个标签constcanvas=document.querySelector("#canvas");canvas.width=video.videoWidth;canvas.height=video.videoHeight;canvas.getContext("2d").drawImage(video,0,0);您还可以在img元素中显示画布内容。在本教程创建的示例中，我添加了一个从画布动态创建图像并将其添加到页面的按钮：constimg=document.createElement("img");img.src=canvas.toDataURL("image/png");screenshotsContainer.prepend(img);完整的代码在线效果和源码，源码不多，很简单，相信有一点Javascript基础的人都能看懂。需要的请复制下方链接，或私信关键词：相机。https://coding.zhangbing.site/view.html?url=./list/camera-api/index.html手Q浏览效果
