javascript獲取手機上媒體設備，攝像頭和話筒

時間 2019-12-14

標籤 javascript 獲取手機媒體設備攝像頭話筒欄目 JavaScript 简体版

原文原文鏈接

主要運用H5的媒體接口API，MDN文檔：html

navigator.mediaDevices(新版API)，Navigator.getUserMedia(舊版API，不建議使用，但某些瀏覽器還支持)，本文使用新版APIchrome

這個API並非全部瀏覽器都支持，本人只在最新的chrome中測試經過，而且須要HTTPS協議才行，還要要容許chrome拍照錄像權限。瀏覽器

應用場景其實跟APP中差很少，好比掃描二維碼，拍照上傳，某些實名認證場景眨眼、點頭等app

測試鏈接（注意使用手機chrome訪問，PC上未測試）ide

源碼以下：測試

  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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。