javascript获取手机上媒体设备，摄像头和话筒

主要运用H5的媒体接口API，MDN文档：

navigator.mediaDevices(新版API)，Navigator.getUserMedia(旧版API，不建议使用，但某些浏览器还支持)，本文使用新版API

这个API并不是所有浏览器都支持，本人只在最新的chrome中测试通过，并且需要HTTPS协议才行，还要要允许chrome拍照录像权限。

应用场景其实跟APP中差不多，比如扫描二维码，拍照上传，某些实名认证场景眨眼、点头等

 

测试连接（注意使用手机chrome访问，PC上未测试）

 

源码如下：

  1 <!DOCTYPE html>
  2 
  3 <html>
  4 
  5 <head>
  6 
  7   <meta charset="utf-8">
  8   <meta name="description" content="navigator.mediaDevices.getUserMedia()示例">
  9   <meta name="viewport" content="width=device-width, initial-scale=1">
 10   <meta id="theme-color" name="theme-color" content="#fff">
 11 
 12   <title>获取视频和音频设备API navigator.mediaDevices.getUserMedia()</title>
 13 
 14   <style>
 15     div.select {
 16       margin: 0 0 1em 0;
 17     }
 18 
 19     video {
 20       background: #222;
 21       margin: 0 0 20px 0;
 22       width: 100%;
 23     }
 24 
 25     a {
 26       color: #15c;
 27       font-weight: 300;
 28       text-decoration: none;
 29     }
 30 
 31     a:hover {
 32       text-decoration: underline;
 33     }
 34   </style>
 35 
 36 </head>
 37 
 38 <body>
 39   <div><a href="/" target="_blank">本站首页</a></div>
 40   <hr>
 41   <div id="container">
 42 
 43     <div>主要使用navigator.mediaDevices.getUserMedia()，兼容性只在chrome中测试通过</div>
 44 
 45     <div class="select">
 46       <label for="audioSource">音频源: </label><select id="audioSource"></select>
 47     </div>
 48 
 49     <div class="select">
 50       <label for="videoSource">视频源: </label><select id="videoSource"></select>
 51     </div>
 52 
 53     <video muted autoplay></video>
 54 
 55     <script>
 56       'use strict';
 57 
 58       var videoElement = document.querySelector('video');
 59       var audioSelect = document.querySelector('select#audioSource');
 60       var videoSelect = document.querySelector('select#videoSource');
 61 
 62       navigator.mediaDevices.enumerateDevices().then(gotDevices).then(getStream).catch(handleError);
 63 
 64       audioSelect.onchange = getStream;
 65       videoSelect.onchange = getStream;
 66 
 67       function gotDevices(deviceInfos) {
 68         for (var i = 0; i !== deviceInfos.length; ++i) {
 69           var deviceInfo = deviceInfos[i];
 70           var option = document.createElement('option');
 71           option.value = deviceInfo.deviceId;
 72           if (deviceInfo.kind === 'audioinput') {
 73             option.text = deviceInfo.label || 'microphone ' + (audioSelect.length + 1);
 74             audioSelect.appendChild(option);
 75           } else if (deviceInfo.kind === 'videoinput') {
 76             option.text = deviceInfo.label || 'camera ' + (videoSelect.length + 1);
 77             videoSelect.appendChild(option);
 78           } else {
 79             console.log('Found one other kind of source/device: ', deviceInfo);
 80           }
 81         }
 82       }
 83 
 84       function getStream() {
 85         if (window.stream) {
 86           window.stream.getTracks().forEach(function (track) {
 87             track.stop();
 88           });
 89         }
 90 
 91         var constraints = {
 92           audio: {
 93             deviceId: {
 94               // deviceInfo.deviceId
 95               exact: audioSelect.value
 96             }
 97           },
 98           video: {
 99             deviceId: {
100               // deviceInfo.deviceId
101               exact: videoSelect.value
102             }
103           }
104         };
105 
106         navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError);
107       }
108 
109       function gotStream(stream) {
110         window.stream = stream; // make stream available to console
111         videoElement.srcObject = stream;
112       }
113 
114       function handleError(error) {
115         console.log('Error: ', error);
116       }
117     </script>
118 
119   </div>
120 
121 
122 </body>
123 
124 </html>

 

posted @ 2019-01-07 14:28  极·简  Views(4571)  Comments(1)  Edit  收藏  举报