更新

source/_posts/navigator-mediadevices-getusermedia调用本地摄像头.md

@@ -1,15 +1,19 @@
 ---
 title: navigator.mediaDevices.getUserMedia调用本地摄像头
-tags: []
 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>
 
@@ -17,37 +21,42 @@ MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一
 
 然后在js部分如下
 
-```js
-
+``` js
 //获取video标签
 var vedio = document.querySelector('#video');
 
 //constraints 参数是一个包含了video 和 audio两个成员的MediaStreamConstraints
 //对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。
 var constraints = {
-audio: true,
-video: {
-                        //帧率
-frameRate: { ideal: 10,max: 15,min: 8 }
-}
+    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);
-});
-
+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/pages/20170522j7/)
+[demo 传送门](https://demo.dengtongyu.com/pages/20170522j7/)