63 lines
2.1 KiB
Markdown
63 lines
2.1 KiB
Markdown
---
|
|
title: navigator.mediaDevices.getUserMedia调用本地摄像头
|
|
id: '94'
|
|
categories:
|
|
- 分享
|
|
tags:
|
|
- 摄像头
|
|
- navigator
|
|
- mediaDevices
|
|
- getUserMedia
|
|
date: 2017-04-28 15:20:27
|
|
---
|
|
|
|
MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一个音频输入设备，例如相机或屏幕共享和/或麦克风。 如果用户给予许可，就返回一个Promise 对象，MediaStream对象作为此Promise对象的Resolved［成功］状态的回调函数参数，相应的，如果用户拒绝了许可，或者没有媒体可用的情况下，PermissionDeniedError 或者NotFoundError作为此Promise的Rejected［失败］状态的回调函数参数。 _注意，由于用户不会被要求必须作出允许或者拒绝的选择，所以返回的Promise对象可能既不会触发resolve 也不会触发 reject。_ 首先在页面中放置一个video标签，用来播放本地摄像头采集到的视频流
|
|
|
|
```
|
|
|
|
<video id="video" width="200" height="150" autoplay=""></video>
|
|
|
|
```
|
|
|
|
然后在js部分如下
|
|
|
|
``` js
|
|
//获取video标签
|
|
var vedio = document.querySelector('#video');
|
|
|
|
//constraints 参数是一个包含了video 和 audio两个成员的MediaStreamConstraints
|
|
//对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。
|
|
var constraints = {
|
|
audio: true,
|
|
video: {
|
|
//帧率
|
|
frameRate: {
|
|
ideal: 10,
|
|
max: 15,
|
|
min: 8
|
|
}
|
|
}
|
|
}
|
|
|
|
//获取设备（摄像头或者麦克风）
|
|
navigator.mediaDevices.getUserMedia({
|
|
audio: false,
|
|
video: true
|
|
})
|
|
.then(function(mediaStream) {
|
|
console.log(mediaStream);
|
|
video.src = window.URL.createObjectURL(mediaStream);
|
|
video.onloadedmetadata = function(e) {
|
|
video.play();
|
|
console.log(e);
|
|
};
|
|
})
|
|
.catch(function(error) {
|
|
console.log(error);
|
|
});
|
|
```
|
|
|
|
_注意：调取本地视频或音频设备的接口，出于安全的考虑，只能在localhost或者https下使用！_
|
|
|
|
[demo 传送门](https://demo.dengtongyu.com/20170522j7/)
|