JSFiddle - React, Tailwind, and code Playground

by Nenad Novakovic

HTML

<video class="mirror" muted></video>

<div>
  <button type="button" id="video-disable">
    Toggle Disable Video
  </button>
  
  <button type="button" id="video-init">
    Init Video
  </button>
  
  <button type="button" id="video-destroy">
    Destroy Video
  </button>
</div>

<div>
  <button type="button" id="audio-disable">
    Toggle Disable Audio
  </button>
  
  <button type="button" id="audio-init">
    Init Audio
  </button>
  
  <button type="button" id="audio-destroy">
    Destroy Audio
  </button>
</div>

<div>
  <button id="init-toggle" data-type="init">
  Init/Destroy
  </button>
</div>

SCSS

.mirror {
  transform: rotateY(180deg);
}

Babel + JSX

let mediaDevicesConstraints = {}
let video = document.querySelector('video')
let mediaDevicesStream = null


function requestStream (constraints) {
	if (mediaDevicesStream != null) {
  	mediaDevicesStream.getTracks().forEach(track => track.stop())
  }
  
	window.navigator
    .mediaDevices
    .getUserMedia(constraints)
    .then(mediaStream => {
      mediaDevicesStream = mediaStream

      video.srcObject = mediaStream
      video.onloadedmetadata = () => video.play()
    })
}

function clearStream () {
  if (Object.keys(mediaDevicesConstraints).length) {
    requestStream(mediaDevicesConstraints)
  }
  else {
		mediaDevicesStream = null
  }
}

function disableAudio (stream) {
	let getTrack = stream.getAudioTracks()[0]
  getTrack.enabled = ! getTrack.enabled
}

function disableVideo (stream) {
	let getTrack = stream.getVideoTracks()[0]
  getTrack.enabled = ! getTrack.enabled
}



document.querySelector('#init-toggle')
	.addEventListener('click', (e) => {
    if (e.target.dataset.type == 'init') {
    	mediaDevicesConstraints = {
	      audio: true,
        video: {
          width: 160,
          height: 160
        }
      }
      
    	requestStream(mediaDevicesConstraints)
    }
  	else {
    	mediaDevicesStream
      	.getTracks()
        .forEach(track => track.stop())
      
      mediaDevicesConstraints = {}
      mediaDevicesStream = null
      video.srcObject = null
    }
    
    e.target.dataset.type = (e.target.dataset.type == 'init')
    	? 'destroy'
      : 'init'
  })

// => VIDEO
document.querySelector('#video-disable')
	.addEventListener('click', () => {
    disableVideo(mediaDevicesStream)
	})
  
document.querySelector('#video-init')
	.addEventListener('click', () => {
  	mediaDevicesConstraints = Object.assign(mediaDevicesConstraints, {
    	video: {
        width: 160,
        height: 160
      }
    })
    
    requestStream(mediaDevicesConstraints)
	})

document.querySelector('#video-destroy')
	.addEventListener('click', () => {
  	delete...