@stream-io/video-client 0.0.1-alpha.7

package/src/coordinator/connection/types.ts

@@ -0,0 +1,120 @@
+import { AxiosRequestConfig, AxiosResponse } from 'axios';
+import { EVENT_MAP } from './events';
+import { StableWSConnection } from './connection';
+
+export type UR = Record<string, unknown>;
+
+export type User = {
+  id: string;
+  anon?: boolean;
+  name?: string;
+  role?: string;
+  teams?: string[];
+  username?: string;
+};
+
+export type UserResponse = User & {
+  banned?: boolean;
+  created_at?: string;
+  deactivated_at?: string;
+  deleted_at?: string;
+  last_active?: string;
+  online?: boolean;
+  revoke_tokens_issued_before?: string;
+  shadow_banned?: boolean;
+  updated_at?: string;
+};
+
+export type OwnUserBase = {
+  invisible?: boolean;
+  roles?: string[];
+};
+
+export type OwnUserResponse = UserResponse & OwnUserBase;
+
+export type ConnectionOpen = {
+  connection_id: string;
+  cid?: string;
+  created_at?: string;
+  me?: OwnUserResponse;
+  type?: string;
+};
+
+export type ConnectAPIResponse = Promise<void | ConnectionOpen>;
+
+export type LogLevel = 'info' | 'error' | 'warn';
+
+type ErrorResponseDetails = {
+  code: number;
+  messages: string[];
+};
+
+export type APIErrorResponse = {
+  code: number;
+  duration: string;
+  message: string;
+  more_info: string;
+  StatusCode: number;
+  details?: ErrorResponseDetails;
+};
+
+export class ErrorFromResponse<T> extends Error {
+  code?: number;
+  response?: AxiosResponse<T>;
+  status?: number;
+}
+export type EventTypes = 'all' | keyof typeof EVENT_MAP;
+export type Event = {
+  type: EventTypes;
+
+  received_at?: string | Date;
+  online?: boolean;
+  mode?: string;
+  // TODO OL: add more properties
+};
+
+export type EventHandler = (event: Event) => void;
+export type Logger = (
+  logLevel: LogLevel,
+  message: string,
+  extraData?: Record<string, unknown>,
+) => void;
+
+export type StreamClientOptions = Partial<AxiosRequestConfig> & {
+  /**
+   * Used to disable warnings that are triggered by using connectUser or connectAnonymousUser server-side.
+   */
+  allowServerSideConnect?: boolean;
+  axiosRequestConfig?: AxiosRequestConfig;
+  /**
+   * Base url to use for API
+   * such as https://chat-proxy-dublin.stream-io-api.com
+   */
+  baseURL?: string;
+  browser?: boolean;
+  // device?: BaseDeviceFields;
+  enableInsights?: boolean;
+  /** experimental feature, please contact support if you want this feature enabled for you */
+  enableWSFallback?: boolean;
+  logger?: Logger;
+  /**
+   * When true, user will be persisted on client. Otherwise if `connectUser` call fails, then you need to
+   * call `connectUser` again to retry.
+   * This is mainly useful for chat application working in offline mode, where you will need client.user to
+   * persist even if connectUser call fails.
+   */
+  persistUserOnConnectionFailure?: boolean;
+
+  /**
+   * The secret key for the API key. This is only needed for server side authentication.
+   */
+  secret?: string;
+
+  warmUp?: boolean;
+  // Set the instance of StableWSConnection on chat client. Its purely for testing purpose and should
+  // not be used in production apps.
+  wsConnection?: StableWSConnection;
+};
+
+export type TokenProvider = () => Promise<string>;
+export type TokenOrProvider = null | string | TokenProvider | undefined;

package/src/coordinator/connection/utils.ts

@@ -0,0 +1,148 @@
+export const sleep = (m: number): Promise<void> =>
+  new Promise((r) => setTimeout(r, m));
+
+export function isFunction<T>(value: Function | T): value is Function {
+  return (
+    value &&
+    (Object.prototype.toString.call(value) === '[object Function]' ||
+      'function' === typeof value ||
+      value instanceof Function)
+  );
+}
+
+export const chatCodes = {
+  TOKEN_EXPIRED: 40,
+  WS_CLOSED_SUCCESS: 1000,
+};
+
+/**
+ * retryInterval - A retry interval which increases acc to number of failures
+ *
+ * @return {number} Duration to wait in milliseconds
+ */
+export function retryInterval(numberOfFailures: number) {
+  // try to reconnect in 0.25-25 seconds (random to spread out the load from failures)
+  const max = Math.min(500 + numberOfFailures * 2000, 25000);
+  const min = Math.min(Math.max(250, (numberOfFailures - 1) * 2000), 25000);
+  return Math.floor(Math.random() * (max - min) + min);
+}
+
+export function randomId() {
+  return generateUUIDv4();
+}
+
+function hex(bytes: Uint8Array): string {
+  let s = '';
+  for (let i = 0; i < bytes.length; i++) {
+    s += bytes[i].toString(16).padStart(2, '0');
+  }
+  return s;
+}
+
+// https://tools.ietf.org/html/rfc4122
+export function generateUUIDv4() {
+  const bytes = getRandomBytes(16);
+  bytes[6] = (bytes[6] & 0x0f) | 0x40; // version
+  bytes[8] = (bytes[8] & 0xbf) | 0x80; // variant
+
+  return (
+    hex(bytes.subarray(0, 4)) +
+    '-' +
+    hex(bytes.subarray(4, 6)) +
+    '-' +
+    hex(bytes.subarray(6, 8)) +
+    '-' +
+    hex(bytes.subarray(8, 10)) +
+    '-' +
+    hex(bytes.subarray(10, 16))
+  );
+}
+
+function getRandomValuesWithMathRandom(bytes: Uint8Array): void {
+  const max = Math.pow(2, (8 * bytes.byteLength) / bytes.length);
+  for (let i = 0; i < bytes.length; i++) {
+    bytes[i] = Math.random() * max;
+  }
+}
+declare const msCrypto: Crypto;
+
+const getRandomValues = (() => {
+  if (
+    typeof crypto !== 'undefined' &&
+    typeof crypto?.getRandomValues !== 'undefined'
+  ) {
+    return crypto.getRandomValues.bind(crypto);
+  } else if (typeof msCrypto !== 'undefined') {
+    return msCrypto.getRandomValues.bind(msCrypto);
+  } else {
+    return getRandomValuesWithMathRandom;
+  }
+})();
+
+function getRandomBytes(length: number): Uint8Array {
+  const bytes = new Uint8Array(length);
+  getRandomValues(bytes);
+  return bytes;
+}
+
+export function convertErrorToJson(err: Error) {
+  const jsonObj = {} as Record<string, unknown>;
+
+  if (!err) return jsonObj;
+
+  try {
+    Object.getOwnPropertyNames(err).forEach((key) => {
+      jsonObj[key] = Object.getOwnPropertyDescriptor(err, key);
+    });
+  } catch (_) {
+    return {
+      error: 'failed to serialize the error',
+    };
+  }
+
+  return jsonObj;
+}
+
+/**
+ * isOnline safely return the navigator.online value for browser env
+ * if navigator is not in global object, it always return true
+ */
+export function isOnline() {
+  const nav =
+    typeof navigator !== 'undefined'
+      ? navigator
+      : typeof window !== 'undefined' && window.navigator
+      ? window.navigator
+      : undefined;
+
+  if (!nav) {
+    console.warn(
+      'isOnline failed to access window.navigator and assume browser is online',
+    );
+    return true;
+  }
+
+  // RN navigator has undefined for onLine
+  if (typeof nav.onLine !== 'boolean') {
+    return true;
+  }
+
+  return nav.onLine;
+}
+
+/**
+ * listenForConnectionChanges - Adds an event listener fired on browser going online or offline
+ */
+export function addConnectionEventListeners(cb: (e: Event) => void) {
+  if (typeof window !== 'undefined' && window.addEventListener) {
+    window.addEventListener('offline', cb);
+    window.addEventListener('online', cb);
+  }
+}
+
+export function removeConnectionEventListeners(cb: (e: Event) => void) {
+  if (typeof window !== 'undefined' && window.removeEventListener) {
+    window.removeEventListener('offline', cb);
+    window.removeEventListener('online', cb);
+  }
+}

package/src/devices.ts

@@ -0,0 +1,266 @@
+import {
+  combineLatest,
+  concatMap,
+  debounceTime,
+  filter,
+  firstValueFrom,
+  from,
+  map,
+  merge,
+  Observable,
+  shareReplay,
+} from 'rxjs';
+
+const getDevices = (constraints?: MediaStreamConstraints) => {
+  return new Observable<MediaDeviceInfo[]>((subscriber) => {
+    navigator.mediaDevices
+      .getUserMedia(constraints)
+      .then((media) => {
+        // in Firefox, devices can be enumerated after userMedia is requested
+        // and permissions granted. Otherwise, device labels are empty
+        navigator.mediaDevices.enumerateDevices().then((devices) => {
+          subscriber.next(devices);
+          // If we stop the tracks before enumerateDevices -> the labels won't show up in Firefox
+          media.getTracks().forEach((t) => t.stop());
+          subscriber.complete();
+        });
+      })
+      .catch((error) => {
+        console.error('Failed to get devices', error);
+        subscriber.error(error);
+      });
+  });
+};
+
+/**
+ * [Tells if the browser supports audio output change on 'audio' elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId).
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ */
+export const checkIfAudioOutputChangeSupported = () => {
+  if (typeof document === 'undefined') return false;
+  const element = document.createElement('audio');
+  const isFeatureSupported = (element as any).sinkId !== undefined;
+
+  return isFeatureSupported;
+};
+
+const audioDeviceConstraints: MediaStreamConstraints = {
+  audio: { noiseSuppression: true },
+};
+const videoDeviceConstraints: MediaStreamConstraints = {
+  video: { width: 960, height: 540 },
+};
+
+// Audio and video devices are requested in two separate requests: that way users will be presented with two separate prompts -> they can give access to just camera, or just microphone
+const deviceChange$ = new Observable((subscriber) => {
+  const deviceChangeHandler = () => subscriber.next();
+
+  navigator.mediaDevices.addEventListener?.(
+    'devicechange',
+    deviceChangeHandler,
+  );
+
+  return () =>
+    navigator.mediaDevices.removeEventListener?.(
+      'devicechange',
+      deviceChangeHandler,
+    );
+}).pipe(
+  debounceTime(500),
+  concatMap(() => from(navigator.mediaDevices.enumerateDevices())),
+  shareReplay(1),
+);
+
+const audioDevices$ = merge(
+  getDevices(audioDeviceConstraints),
+  deviceChange$,
+).pipe(shareReplay(1));
+
+const videoDevices$ = merge(
+  getDevices(videoDeviceConstraints),
+  deviceChange$,
+).pipe(shareReplay(1));
+
+/**
+ * Prompts the user for a permission to use audio devices (if not already granted) and lists the available 'audioinput' devices, if devices are added/removed the list is updated.
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @returns
+ */
+export const getAudioDevices = () =>
+  audioDevices$.pipe(
+    map((values) => values.filter((d) => d.kind === 'audioinput')),
+  );
+
+/**
+ * Prompts the user for a permission to use video devices (if not already granted) and lists the available 'videoinput' devices, if devices are added/removed the list is updated.
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @returns
+ */
+export const getVideoDevices = () =>
+  videoDevices$.pipe(
+    map((values) =>
+      values.filter((d) => d.kind === 'videoinput' && d.deviceId.length),
+    ),
+  );
+
+/**
+ * Prompts the user for a permission to use audio devices (if not already granted) and lists the available 'audiooutput' devices, if devices are added/removed the list is updated. Selecting 'audiooutput' device only makes sense if [the browser has support for changing audio output on 'audio' elements](#checkifaudiooutputchangesupported)
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @returns
+ */
+export const getAudioOutputDevices = () => {
+  return audioDevices$.pipe(
+    map((values) => values.filter((d) => d.kind === 'audiooutput')),
+  );
+};
+
+const getStream = async (
+  kind: Exclude<MediaDeviceKind, 'audiooutput'>,
+  deviceId?: string,
+) => {
+  if (!deviceId) {
+    const allDevices = await firstValueFrom(
+      kind === 'audioinput' ? getAudioDevices() : getVideoDevices(),
+    );
+    if (allDevices.length === 0) {
+      throw new Error(`No available ${kind} device found`);
+    }
+    // TODO: store last used device in local storage and use that value
+    const selectedDevice = allDevices[0];
+    deviceId = selectedDevice.deviceId;
+  }
+  const type = kind === 'audioinput' ? 'audio' : 'video';
+  const defaultConstraints =
+    type === 'audio' ? audioDeviceConstraints : videoDeviceConstraints;
+
+  // merge the default constraints with the deviceId
+  const constraints: MediaStreamConstraints = {
+    [type]: {
+      ...(defaultConstraints[type] as {}),
+      deviceId,
+    },
+  };
+
+  try {
+    return await navigator.mediaDevices.getUserMedia(constraints);
+  } catch (e) {
+    console.error(`Failed to get ${type} stream for device ${deviceId}`, e);
+    throw e;
+  }
+};
+
+/**
+ * Returns an 'audioinput' media stream with the given `deviceId`, if no `deviceId` is provided, it uses the first available device.
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @param deviceId
+ * @returns
+ */
+export const getAudioStream = async (deviceId?: string) => {
+  return getStream('audioinput', deviceId);
+};
+
+/**
+ * Returns a 'videoinput' media stream with the given `deviceId`, if no `deviceId` is provided, it uses the first available device.
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @param deviceId
+ * @returns
+ */
+export const getVideoStream = async (deviceId?: string) => {
+  return getStream('videoinput', deviceId);
+};
+
+/**
+ * Prompts the user for a permission to share a screen.
+ * If the user grants the permission, a screen sharing stream is returned. Throws otherwise.
+ *
+ * The callers of this API are responsible to handle the possible errors.
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ *
+ * @param options any additional options to pass to the [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) API.
+ */
+export const getScreenShareStream = async (
+  // TODO OL: switch to `DisplayMediaStreamConstraints` once Angular supports it
+  options?: Record<string, any>,
+) => {
+  try {
+    return await navigator.mediaDevices.getDisplayMedia({
+      video: true,
+      audio: false,
+      ...options,
+    });
+  } catch (e) {
+    console.error('Failed to get screen share stream', e);
+    throw e;
+  }
+};
+
+const watchForDisconnectedDevice = (
+  kind: MediaDeviceKind,
+  deviceId$: Observable<string | undefined>,
+) => {
+  let devices$;
+  switch (kind) {
+    case 'audioinput':
+      devices$ = getAudioDevices();
+      break;
+    case 'videoinput':
+      devices$ = getVideoDevices();
+      break;
+    case 'audiooutput':
+      devices$ = getAudioOutputDevices();
+      break;
+  }
+  return combineLatest([devices$, deviceId$]).pipe(
+    filter(
+      ([devices, deviceId]) =>
+        !!deviceId && !devices.find((d) => d.deviceId === deviceId),
+    ),
+    map(() => true),
+  );
+};
+
+/**
+ * Notifies the subscriber if a given 'audioinput' device is disconnected
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @param deviceId$ an Observable that specifies which device to watch for
+ * @returns
+ */
+export const watchForDisconnectedAudioDevice = (
+  deviceId$: Observable<string | undefined>,
+) => {
+  return watchForDisconnectedDevice('audioinput', deviceId$);
+};
+
+/**
+ * Notifies the subscriber if a given 'videoinput' device is disconnected
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @param deviceId$ an Observable that specifies which device to watch for
+ * @returns
+ */
+export const watchForDisconnectedVideoDevice = (
+  deviceId$: Observable<string | undefined>,
+) => {
+  return watchForDisconnectedDevice('videoinput', deviceId$);
+};
+
+/**
+ * Notifies the subscriber if a given 'audiooutput' device is disconnected
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @param deviceId$ an Observable that specifies which device to watch for
+ * @returns
+ */
+export const watchForDisconnectedAudioOutputDevice = (
+  deviceId$: Observable<string | undefined>,
+) => {
+  return watchForDisconnectedDevice('audiooutput', deviceId$);
+};

package/src/events/call.ts

@@ -0,0 +1,166 @@
+import { StreamVideoWriteableStateStore } from '../store';
+import {
+  CallAccepted,
+  CallCancelled,
+  CallCreated,
+  CallRejected,
+} from '../gen/coordinator';
+import { CallMetadata } from '../rtc/CallMetadata';
+
+/**
+ * Event handler that watches the delivery of CallCreated Websocket event
+ * Updates the state store and notifies its subscribers that
+ * a new pending call has been initiated.
+ */
+export const watchCallCreated = (store: StreamVideoWriteableStateStore) => {
+  return function onCallCreated(event: CallCreated) {
+    const { call, members } = event;
+    if (!call) {
+      console.warn("Can't find call in CallCreated event");
+      return;
+    }
+
+    const currentUser = store.getCurrentValue(store.connectedUserSubject);
+    if (currentUser?.id === call.created_by.id) {
+      console.warn('Received CallCreated event sent by the current user');
+      return;
+    }
+
+    store.setCurrentValue(store.pendingCallsSubject, (pendingCalls) => [
+      ...pendingCalls,
+      new CallMetadata(call, members),
+    ]);
+  };
+};
+
+/**
+ * Event handler that watched the delivery of CallAccepted Websocket event
+ * Updates the state store and notifies its subscribers that
+ * the given user will be joining the call.
+ */
+export const watchCallAccepted = (store: StreamVideoWriteableStateStore) => {
+  return function onCallAccepted(event: CallAccepted) {
+    const { call_cid } = event;
+    if (!call_cid) {
+      console.warn("Can't find call_cid in CallAccepted event");
+      return;
+    }
+
+    const acceptedIncomingCall = store
+      .getCurrentValue(store.incomingCalls$)
+      .find((incomingCall) => incomingCall.call.cid === call_cid);
+
+    if (acceptedIncomingCall) {
+      console.warn('Received CallAccepted event for an incoming call');
+      return;
+    }
+
+    const acceptedOutgoingCall = store
+      .getCurrentValue(store.outgoingCalls$)
+      .find((outgoingCall) => outgoingCall.call.cid === call_cid);
+    const activeCall = store.getCurrentValue(store.activeCallSubject);
+
+    // FIXME OL: we should revisit this logic, it is hard to follow
+    const acceptedActiveCall =
+      activeCall?.data.call.cid !== undefined &&
+      activeCall.data.call.cid === call_cid
+        ? activeCall
+        : undefined;
+
+    if (!acceptedOutgoingCall && !acceptedActiveCall) {
+      console.warn(
+        `CallAccepted event received for a non-existent outgoing call (CID: ${call_cid}`,
+      );
+      return;
+    }
+
+    // once in active call, it is unnecessary to keep track of accepted call events
+    if (call_cid === acceptedActiveCall?.data.call.cid) {
+      return;
+    }
+
+    store.setCurrentValue(store.acceptedCallSubject, event);
+  };
+};
+
+/**
+ * Event handler that watches delivery of CallRejected Websocket event.
+ * Updates the state store and notifies its subscribers that
+ * the given user will not be joining the call.
+ */
+export const watchCallRejected = (store: StreamVideoWriteableStateStore) => {
+  return function onCallRejected(event: CallRejected) {
+    const { call_cid } = event;
+    if (!call_cid) {
+      console.warn("Can't find call_cid in CallRejected event");
+      return;
+    }
+
+    const rejectedIncomingCall = store
+      .getCurrentValue(store.incomingCalls$)
+      .find((incomingCall) => incomingCall.call.cid === call_cid);
+
+    if (rejectedIncomingCall) {
+      console.warn('Received CallRejected event for an incoming call');
+      return;
+    }
+
+    const rejectedOutgoingCall = store
+      .getCurrentValue(store.outgoingCalls$)
+      .find((outgoingCall) => outgoingCall.call.cid === call_cid);
+    const activeCall = store.getCurrentValue(store.activeCallSubject);
+    const rejectedActiveCall =
+      activeCall?.data.call.cid !== undefined &&
+      activeCall.data.call.cid === call_cid
+        ? activeCall
+        : undefined;
+
+    if (!rejectedOutgoingCall && !rejectedActiveCall) {
+      console.warn(
+        `CallRejected event received for a non-existent outgoing call (CID: ${call_cid}`,
+      );
+      return;
+    }
+
+    store.setCurrentValue(store.pendingCallsSubject, (pendingCalls) =>
+      pendingCalls.filter((pendingCall) => pendingCall.call.cid !== call_cid),
+    );
+  };
+};
+
+/**
+ * Event handler that watches the delivery of CallCancelled Websocket event
+ * Updates the state store and notifies its subscribers that
+ * the call is now considered terminated.
+ */
+export const watchCallCancelled = (store: StreamVideoWriteableStateStore) => {
+  return function onCallCancelled(event: CallCancelled) {
+    const { call_cid } = event;
+    if (!call_cid) {
+      console.log("Can't find call in CallCancelled event");
+      return;
+    }
+
+    const cancelledIncomingCall = store
+      .getCurrentValue(store.incomingCalls$)
+      .find((incomingCall) => incomingCall.call.cid === call_cid);
+
+    const activeCall = store.getCurrentValue(store.activeCallSubject);
+    const cancelledActiveCall =
+      activeCall?.data.call.cid !== undefined &&
+      activeCall.data.call.cid === call_cid
+        ? activeCall
+        : undefined;
+
+    if (!cancelledIncomingCall && !cancelledActiveCall) {
+      console.warn(
+        `CallCancelled event received for a non-existent incoming call (CID: ${call_cid}`,
+      );
+      return;
+    }
+
+    store.setCurrentValue(store.pendingCallsSubject, (pendingCalls) =>
+      pendingCalls.filter((pendingCall) => pendingCall.call.cid !== call_cid),
+    );
+  };
+};