let mediaStream = null;

      video.style.position = 'absolute'

      video.style.top = '0px'

      video.style.left = '0px'

      video.style.zIndex = '-2'

      container.appendChild(video);

    }

​

    const connect = () => {

      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {

        return;

      }

​

      navigator.mediaDevices.getUserMedia({

        audio: false, video: {

          facingMode: 'environment',

        }

      }).then((stream) => {

        video.addEventListener('loadedmetadata', () => {

          video.setAttribute('width', video.videoWidth);

          video.setAttribute('height', video.videoHeight);

        });

        mediaStream = stream;

        mediaStream.getTracks().forEach(track => {

          track.onended = () => {

            console.warn('MediaStreamTrack has ended');

            reconnect();

          };

      });

        video.srcObject = stream;

      }).catch((err) => {

        console.log("getUserMedia error", err);

      });

    }

​

    const startVideo = () => {

      console.log(video)

      if (!video) {

        createVideo();

      }

      console.log(video);

      connect();

  }

  start.addEventListener('click', () => {

    startVideo()

  });