frontend/src/lib/mediaStream.ts

import { get, writable, type Writable } from 'svelte/store';

const BASE_HEIGHT = 720;
export enum MediaStreamStatusEnum {
  INIT = 'init',
  CONNECTED = 'connected',
  DISCONNECTED = 'disconnected'
}
export const onFrameChangeStore: Writable<{ blob: Blob }> = writable({ blob: new Blob() });

export const mediaDevices = writable<MediaDeviceInfo[]>([]);
export const mediaStreamStatus = writable(MediaStreamStatusEnum.INIT);
export const mediaStream = writable<MediaStream | null>(null);

export const mediaStreamActions = {
  async enumerateDevices() {
    // console.log("Enumerating devices");
    await navigator.mediaDevices
      .enumerateDevices()
      .then((devices) => {
        const cameras = devices.filter((device) => device.kind === 'videoinput');
        mediaDevices.set(cameras);
      })
      .catch((err) => {
        console.error(err);
      });
  },
  async start(mediaDevicedID?: string, aspectRatio: number = 1) {
    const constraints = {
      audio: false,
      video: {
        width: {
          ideal: BASE_HEIGHT * aspectRatio
        },
        height: {
          ideal: BASE_HEIGHT
        },
        deviceId: mediaDevicedID
      }
    };

    await navigator.mediaDevices
      .getUserMedia(constraints)
      .then((stream) => {
        mediaStreamStatus.set(MediaStreamStatusEnum.CONNECTED);
        mediaStream.set(stream);
      })
      .catch((err) => {
        console.error(`${err.name}: ${err.message}`);
        mediaStreamStatus.set(MediaStreamStatusEnum.DISCONNECTED);
        mediaStream.set(null);
      });
  },
  async startScreenCapture() {
    const displayMediaOptions = {
      video: {
        displaySurface: 'window'
      },
      audio: false,
      surfaceSwitching: 'include'
    };

    let captureStream = null;

    try {
      captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
      const videoTrack = captureStream.getVideoTracks()[0];

      console.log('Track settings:');
      console.log(JSON.stringify(videoTrack.getSettings(), null, 2));
      console.log('Track constraints:');
      console.log(JSON.stringify(videoTrack.getConstraints(), null, 2));
      mediaStreamStatus.set(MediaStreamStatusEnum.CONNECTED);
      mediaStream.set(captureStream);

      const capabilities = videoTrack.getCapabilities();
      const aspectRatio = capabilities.aspectRatio;
      console.log('Aspect Ratio Constraints:', aspectRatio);
    } catch (err) {
      console.error(err);
    }
  },
  async switchCamera(mediaDevicedID: string, aspectRatio: number) {
    console.log('Switching camera');
    if (get(mediaStreamStatus) !== MediaStreamStatusEnum.CONNECTED) {
      return;
    }
    const constraints = {
      audio: false,
      video: {
        width: {
          ideal: BASE_HEIGHT * aspectRatio
        },
        height: {
          ideal: BASE_HEIGHT
        },
        deviceId: mediaDevicedID
      }
    };
    console.log('Switching camera', constraints);
    await navigator.mediaDevices
      .getUserMedia(constraints)
      .then((stream) => {
        mediaStreamStatus.set(MediaStreamStatusEnum.CONNECTED);
        mediaStream.set(stream);
      })
      .catch((err) => {
        console.error(`${err.name}: ${err.message}`);
      });
  },
  async stop() {
    navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
      stream.getTracks().forEach((track) => track.stop());
    });
    mediaStreamStatus.set(MediaStreamStatusEnum.DISCONNECTED);
    mediaStream.set(null);
  }
};