HTML5 之摄像头调用（User Media API）

最新推荐文章于 2023-10-23 00:12:11 发布

Jartto

最新推荐文章于 2023-10-23 00:12:11 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/Jartto/article/details/106681245

本文介绍了HTML5的User Media API如何在Web页面中调用摄像头和麦克风。通过MediaDevices.getUserMedia()方法获取用户许可，实现与设备的交互。文章详细讲解了使用方法，包括Promise的运用、分辨率、帧率设置，以及在移动设备上选择前后摄像头的处理，并提到了在可安装app中使用权限管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提起移动端调用设备摄像头，我们很容易就想到借助 PhoneGap 或 Cordova 。如果只是想在 Web 页面简单的用一下，那不妨试试 HTML5 的 User Media API 。

一、先来看看支持情况

User Media API

二、说明文档

MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一个音频输入设备，例如相机或屏幕共享和/或麦克风。

如果用户给予许可，就返回一个Promise 对象，MediaStream 对象作为此 Promise 对象的 Resolved［成功］状态的回调函数参数；
相应的，如果用户拒绝了许可，或者没有媒体可用的情况下，PermissionDeniedError 或者 NotFoundError 作为此 Promise 的 Rejected［失败］状态的回调函数参数。

1
2
3

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) { ... })
.catch(function(error) { ... })

注意，由于用户不会被要求必须作出允许或者拒绝的选择，所以返回的 Promise 对象可能既不会触发 resolve 也不会触发 reject。

使用文档请移步：
MediaDevices.getUserMedia
MDN Web Docs

三、使用说明

1.使用 Promise ：

最低0.47元/天解锁文章

200万优质内容无限畅学