const localVideo = document.querySelector('video');
var videoSelect = document.querySelector('select#video');
var audioSelect = document.querySelector('select#audio');
let localStream;
let constraint;

function getDevices() {
  return navigator.mediaDevices.enumerateDevices()
}

function gotDevices(devices) {
  console.log(JSON.stringify(devices))
  console.log(devices.length)
  var selectText = document.getElementById("selectText")
  selectText.innerHTML = devices.length
  let audioNum = 0,
    videoNum = 0;
  devices.forEach(function(device) {
    if (device['kind'] == 'audioinput') {
      let opt = document.createElement('option');
      opt.value = device['deviceId'];

      if (device['label']) {
        opt.innerText = device['label'];
      } else {
        audioNum++
        opt.innerText = 'audio' + audioNum
      }

      audioSelect.appendChild(opt);
      console.log("audioinput：" + JSON.stringify(device['label']))

    } else if (device['kind'] == 'videoinput') {
      let opt = document.createElement('option');
      opt.value = device['deviceId'];

      if (device['label']) {
        opt.innerText = device['label'];
      } else {
        videoNum++
        if (device['label']) {
          opt.innerText = device['label'];
        } else {
          videoNum++
          opt.innerText = 'video' + videoNum
        }

      }

      videoSelect.appendChild(opt);
      console.log("videoinput：" + JSON.stringify(device['label']))

    }
  })
  changeConstraint();
}

function changeConstraint() {
  constraint = {
    video: {
      deviceId: videoSelect.value
    },
    audio: {
      deviceId: audioSelect.value
    }
  };
  getMedia(constraint);
}

function gotLocalMediaStream(mediaStream) {
  localStream = mediaStream;
  localVideo.srcObject = mediaStream;
}

function getMedia(mediaStreamConstraints) {
  // 这里是重点，必须要先停止才可以
  if (localStream) {
    localStream.getVideoTracks()[0].stop();
  }
  if (navigator.mediaDevices.getUserMedia) {
    //最新的标准API
    navigator.mediaDevices.getUserMedia(mediaStreamConstraints).then(gotLocalMediaStream).catch(
      handleLocalMediaStreamError);
  } else if (navigator.webkitGetUserMedia) {
    //webkit核心浏览器
    navigator.webkitGetUserMedia(mediaStreamConstraints, gotLocalMediaStream, handleLocalMediaStreamError)
  } else if (navigator.mozGetUserMedia) {
    //firfox浏览器
    navigator.mozGetUserMedia(mediaStreamConstraints, gotLocalMediaStream, handleLocalMediaStreamError);
  } else if (navigator.getUserMedia) {
    //旧版API
    navigator.getUserMedia(mediaStreamConstraints, gotLocalMediaStream, handleLocalMediaStreamError);
  }

}

function handleLocalMediaStreamError(error) {
  console.log('navigator.getUserMedia error: ', error);
}

getDevices().then(gotDevices)

audioSelect.onchange = changeConstraint;
videoSelect.onchange = changeConstraint;