fxxqq / 6fedcom.github.io

frank的前端养成记(hexo博客)
https://6fed.com
22 stars 5 forks source link

javascript如何调取设备的摄像头和麦克风,并且可以进行选择 #103

Open fxxqq opened 6 years ago

fxxqq commented 6 years ago
   <div class="select">
      <label for="audioSource">Audio source: </label>
      <select id="audioSource"></select>
    </div>

    <div class="select">
      <label for="videoSource">Video source: </label>
      <select id="videoSource"></select>
    </div>

    <video muted autoplay></video>
 var videoElement = document.querySelector('video');
 var audioSelect = document.querySelector('select#audioSource');
 var videoSelect = document.querySelector('select#videoSource');

 navigator.mediaDevices.enumerateDevices()
     .then(gotDevices).then(getStream).catch(handleError);

 audioSelect.onchange = getStream;
 videoSelect.onchange = getStream;

 function gotDevices(deviceInfos) {
     for (var i = 0; i !== deviceInfos.length; ++i) {
         var deviceInfo = deviceInfos[i];
         var option = document.createElement('option');
         option.value = deviceInfo.deviceId;
         if (deviceInfo.kind === 'audioinput') {
             option.text = deviceInfo.label ||
                 'microphone ' + (audioSelect.length + 1);
             audioSelect.appendChild(option);
         } else if (deviceInfo.kind === 'videoinput') {
             option.text = deviceInfo.label || 'camera ' +
                 (videoSelect.length + 1);
             videoSelect.appendChild(option);
         } else {
             console.log('Found one other kind of source/device: ', deviceInfo);
         }
     }
 }

 function getStream() {
     if (window.stream) {
         window.stream.getTracks().forEach(function (track) {
             track.stop();
         });
     }

     var constraints = {
         audio: {
             deviceId: {
                 exact: audioSelect.value
             }
         },
         video: {
             deviceId: {
                 exact: videoSelect.value
             }
         }
     };

     navigator.mediaDevices.getUserMedia(constraints).
     then(gotStream).catch(handleError);
 }

 function gotStream(stream) {
     window.stream = stream; // make stream available to console
     videoElement.srcObject = stream;
 }

 function handleError(error) {
     console.log('Error: ', error);
 }