JavaScript访问设备摄像头怎么实现


本篇内容主要讲解“JavaScript访问设备摄像头怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript访问设备摄像头怎么实现”吧!如何使用相机
要访问用户的相机(或麦克风),我们使用JavaScript MediaStream API。该API允许通过流访问这些设备捕获的视频和音频。第一步是检查浏览器是否支持此 香港云主机API:在现代浏览器中,支持是不错的(当然没有Internet Explorer)。捕获视频流要捕获由摄像机生成的视频流,我们使用 mediaDevices 对象的 getUserMedia 方法。这个方法接收一个对象,其中包含我们要请求的媒体类型(视频或音频)和一些要求。首先,我们可以通过 {video: true} 来获取摄像机的视频。此调用将询问用户是否允许访问摄像机。如果用户拒绝,它将引发异常并且不返回流。因此,必须在 try/catch 块内完成处理这种情况。请注意,它返回一个Promise,因此您必须使用 async/await 或 then 块。在Mac OS系统上还会弹出授权。没错,我使用的是Mac版的Edge浏览器点击“好”,就可以访问电脑摄像头了,控制台输出的 videoStream 对象如下视频规格(requirements)我们可以通过传递有关所需分辨率以及最小和最大限制的信息来改善视频的要求:这样,流以正确的宽度和高度比例进入,如果它是处于纵向模式的手机,则需要进行尺寸反转。在页面上显示视频既然有了流,我们该如何处理?我们可以在页面上的 video 元素中显示视频:请注意 video 标签中的自动播放属性 autoplay,没有它,你需要调用 video.play() 才能真正开始显示图像。访问手机的前后摄像头默认情况下,getUserMedia 将使用系统默认的视频录制设备。如果是有两个摄像头的手机,它使用前置摄像头。要访问后置摄像头,我们必须在视频规格中包括 faceModeMode:”environment”:默认值为 faceingMode:”user”,即前置摄像头。需要注意的是,如果你想在已经播放视频的情况下更换摄像机,你需要先停止当前的视频流,然后再将其替换成另一台摄像机的视频流。截屏你可以做的另一件很酷的事情是捕获视频的图像(屏幕快照)。你可以在canvas上绘制当前视频帧,例如:你还可以在 img 元素中显示画布内容。在本教程创建的示例中,我添加了一个按钮,该按钮可从画布动态创建图像并将其添加到页面:到此,相信大家对“JavaScript访问设备摄像头怎么实现”有了更深的了解,不妨来实际操作一番吧!这里是开发云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: js中math怎么向下取整

这篇文章主要介绍“js中math怎么向下取整”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“js中math怎么向下取整”文章能帮助大家解决问题。1、Math.floor()向下取整2、语法3、参数x:一个数值。4、 香港…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 07/03 22:03
下一篇 07/03 22:03

相关推荐