Camera composable for Vue written in Typescript

useCamera.ts

export const useCamera = () => {
  // State
  const cameraFacing = useState<ConstrainDOMString | undefined>("cameraFacing", () => 'environment')
  const cameraStream = useState<MediaStream | undefined>("cameraStream", () => undefined)

  // Start camera
  // ----------
  const start = async () => {
    // Promise
    return new Promise(async (resolve, revoke) => {
      try {
        // Get camera
        const stream = await navigator.mediaDevices.getUserMedia({
          video: {
            facingMode: cameraFacing.value
          }
        })

        // Get video tag
        let video = document.getElementById("cameraVideo") as HTMLMediaElement

        // If video null
        if (video === null) {
          // Log
          console.error("Video tag not found.")

          // Revoke
          revoke()

        } else {
          // Replace video tag source
          video.srcObject = stream

          // Video ready
          video.onloadedmetadata = async () => {
            // Update camera stream
            cameraStream.value = stream

            // Resolve
            resolve("Camera successfully started.")

          }

        }

      } catch (e: any) {
        // Camera error
        switch (e.name) {
          case "NotFoundError":
            revoke("Please enable the camera on your device.")
            break
          case "NotAllowedError":
            revoke("Please allow access to your camera.")
            break
          case "NotReadableError":
            revoke("Please close all other tabs which are using your camera.")
            break
          default:
            revoke("This experience requires access to your camera.")
        }

      }

    })

  }

  // Stop camera
  // ----------
  const stop = async () => {
    // If stream exists
    if (cameraStream.value) {
      // Stop all streams
      cameraStream.value.getTracks().forEach(track => track.stop())

      // Set stream to undefined
      cameraStream.value = undefined

    }
    
  }

  // Flip camera
  // ----------
  const flip = async () => {
    // Stop camera
    stop()

    // Check facing
    if (cameraFacing.value == 'environment') {
      // Face user
      cameraFacing.value = 'user'

    } else {
      // Face environment
      cameraFacing.value = 'environment'

    }

    // Start camera
    start()

  }

  // Return
  return {
    flip,
    start,
    stop
  }

}