html5调用相机api,HTML5之摄像头调用（UserMediaAPI）

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

一、先来看看支持情况

二、说明文档

MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一个音频输入设备&＃xff0c;例如相机或屏幕共享和/或麦克风。如果用户给予许可&＃xff0c;就返回一个Promise 对象&＃xff0c;MediaStream 对象作为此 Promise 对象的 Resolved&＃xff3b;成功&＃xff3d;状态的回调函数参数&＃xff1b;

相应的&＃xff0c;如果用户拒绝了许可&＃xff0c;或者没有媒体可用的情况下&＃xff0c;PermissionDeniedError 或者 NotFoundError 作为此 Promise 的 Rejected&＃xff3b;失败&＃xff3d;状态的回调函数参数。1

2

3navigator.mediaDevices.getUserMedia(constraints)

.then(function(mediaStream) { ... })

.catch(function(error) { ... })

三、使用说明

1.使用 Promise &＃xff1a;1

2

3

4

5

6

7

8

9

10

11var p &＃61; navigator.mediaDevices.getUserMedia({ audio: true, video: true });

p.then(function(mediaStream){

var video &＃61; document.querySelector(&＃39;video&＃39;);

video.src &＃61; window.URL.createObjectURL(mediaStream);

video.onloadedmetadata &＃61; function(e){

};

});

p.catch(function(err){ console.log(err.name); }); // always check for errors at the end.

2.宽度和高度

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38var promisifiedOldGUM &＃61; function(constraints){

// First get ahold of getUserMedia, if present

var getUserMedia &＃61; (navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia);

// Some browsers just don&＃39;t implement it - return a rejected promise with an error

// to keep a consistent interface

if(!getUserMedia) {

return Promise.reject(new Error(&＃39;getUserMedia is not implemented in this browser&＃39;));

}

// Otherwise, wrap the call to the old navigator.getUserMedia with a Promise

return new Promise(function(resolve, reject){

getUserMedia.call(navigator, constraints, resolve, reject);

});

}

// Older browsers might not implement mediaDevices at all, so we set an empty object first

if(navigator.mediaDevices &＃61;&＃61;&＃61; undefined) {

navigator.mediaDevices &＃61; {};

}

// Some browsers partially implement mediaDevices. We can&＃39;t just assign an object

// with getUserMedia as it would overwrite existing properties.

// Here, we will just add the getUserMedia property if it&＃39;s missing.

if(navigator.mediaDevices.getUserMedia &＃61;&＃61;&＃61; undefined) {

navigator.mediaDevices.getUserMedia &＃61; promisifiedOldGUM;

}

// Prefer camera resolution nearest to 1280x720.

var constraints &＃61; { audio: true, video: { width: 1280, height: 720 } };

navigator.mediaDevices.getUserMedia(constraints)

.then(function(stream){

var video &＃61; document.querySelector(&＃39;video&＃39;);

video.src &＃61; window.URL.createObjectURL(stream);

video.onloadedmetadata &＃61; function(e){

video.play();

};

})

.catch(function(err){

console.log(err.name &＃43; ": " &＃43; err.message);

});

3.帧率

在某些情况下&＃xff0c;比如WebRTC上使用受限带宽传输时&＃xff0c;低帧率可能更适宜。

1var constraints &＃61; { video: { frameRate: { ideal: 10, max: 15 } } };

4.在移动设备(电话)上&＃xff0c;前置或者后置摄像头1

2

3

4var front &＃61; false;

document.getElementById(&＃39;flip-button&＃39;).onclick &＃61; function(){ front &＃61; !front; };

var constraints &＃61; { video: { facingMode: (front? "user" : "environment") } };

5.权限

在一个可安装的app(如Firefox OS app)中使用 getUserMedia() &＃xff0c;你需要在声明文件中指定以下的权限&＃xff1a;

1

2

3

4

5

6

7

8"permissions": {

"audio-capture": {

"description": "Required to capture audio using getUserMedia()"

},

"video-capture": {

"description": "Required to capture video using getUserMedia()"

}

}

四、使用插件