import { getFriendlyErrorMessage } from './errorMessages' ; const videoHolder = document . querySelector ( '.video' ) ; const text = document . querySelector ( '.text' ) ; const startbutton = document . querySelector ( '.start-camera' ) ; function handleError ( err ) { text . textContent = getFriendlyErrorMessage ( err ) ; } async function getCameras ( ) { const devices = await navigator . mediaDevices . enumerateDevices ( ) ; const cameras = devices . filter ( ( device ) => device . kind === 'videoinput' ) . filter ( ( device ) => ! device . label . includes ( 'Camo' ) ) ; return cameras ; } function createVideoElementFromCamera ( camera ) { const markup = `
    <div class="camera">
      <video autoplay playsinline muted></video>
      <p>${ camera . label }</p>
    </div>
  ` ; const fragment = document . createRange ( ) . createContextualFragment ( markup ) ; return fragment ; } async function requestIntialAccess ( ) { videoHolder . innerHTML = '' ; console . log ( navigator ) ; const stream = await navigator . mediaDevices . getUserMedia ( { audio : false , video : true , } ) ; console . log ( 'initial stream' ) ; const cameras = await getCameras ( ) ; const streamPromises = cameras . map ( function ( camera ) { return navigator . mediaDevices . getUserMedia ( { audio : false , video : { deviceId : { exact : camera . deviceId } } , } ) ; } ) ; const streams = await Promise . all ( streamPromises ) . catch ( console . error ) ; console . log ( { streams } ) ; const videoFragment = cameras . map ( createVideoElementFromCamera ) ; videoFragment . forEach ( ( el ) => videoHolder . append ( el ) ) ; const videoElements = videoHolder . querySelectorAll ( 'video' ) ; videoElements . forEach ( ( el , i ) => { el . srcObject = streams [ i ] ; } ) ; } startbutton . addEventListener ( 'click' , requestIntialAccess ) ; requestIntialAccess ( ) ;