JSFiddle - React, Tailwind, and code Playground

by Vladimir Vershinin

HTML

<select id="devices">
  <option></option>
</select>
<button onclick="enable()">Enable</button>
<pre id="error"></pre>
<div id="videos"></div>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

JavaScript

navigator.mediaDevices.enumerateDevices()
  .then(function(devices) {
    let select = document.querySelector('#devices')
    for (let device of devices) {
      if (device.kind !== 'videoinput') continue

      let option = document.createElement("option")
      option.text = device.label + " id = " + device.deviceId
      option.value = device.deviceId
      select.appendChild(option)
    }
  })
  .catch(function(err) {
    console.error(err)
    document.querySelector('#error').innerText = err.toString()
  })

function enable() {
  let deviceId = document.querySelector('#devices').value
  if (!deviceId) {
  	alert('select video input') 
    return
  }

  navigator.mediaDevices.getUserMedia({
      audio: false,
      video: {
        deviceId: deviceId,
      }
    })
    .then(s => {
    	let video = document.createElement('video')
      video.autoplay = true
      video.srcObject = s
      document.querySelector('#videos').appendChild(video)
    })
    .catch(err => {
      console.error(err)
      document.querySelector('#error').innerText = err.toString()
    })
}