@snapcall/stream-ui 1.0.0

package/dist/types.d.ts

@@ -0,0 +1,290 @@
+import * as mediasoupClient from "mediasoup-client";
+import { types } from "mediasoup-client";
+import * as protooClient from "protoo-client";
+import { Transport } from "mediasoup-client/lib/Transport";
+import { MediaKind } from "mediasoup-client/lib/RtpParameters";
+interface MenuItem {
+    id: string;
+    title: string;
+    jsxIcon?: JSX.Element;
+    srcIcon?: string;
+    action: () => void;
+    danger?: boolean;
+    isNew?: boolean;
+}
+interface MenuCategory {
+    id: string;
+    title?: string;
+    items: MenuItem[];
+}
+interface SettingsCategory extends MenuCategory {
+    position?: number;
+    items: SettingsItem[];
+}
+interface SettingsItem extends MenuItem {
+    position?: number;
+}
+type VideoResolution = 'qvga' | 'vga' | 'hd';
+type PeerId = string;
+type DeviceType = 'webcam' | 'screen' | 'microphone';
+interface JoinOptions {
+    apiKey?: string;
+    email?: string;
+    displayName?: string;
+}
+interface ProducerData {
+    producerId: string;
+    deviceType: DeviceType;
+    paused: boolean;
+}
+interface PeerInfo {
+    id: PeerId;
+    displayName: string;
+    producersData: Array<ProducerData>;
+}
+type ConsumerId = string;
+type ProducerId = string;
+interface ConsumerData {
+    mediaSoupConsumer: types.Consumer;
+    deviceType?: DeviceType;
+}
+interface DevicesState {
+    microphone: {
+        enabled: boolean;
+        muted: boolean;
+    };
+    camera: {
+        enabled: boolean;
+    };
+    screenshare: {
+        enabled: boolean;
+    };
+}
+declare global {
+    interface Window {
+        webkitAudioContext: Function;
+    }
+    interface MediaTrackConstraintSet {
+        displaySurface?: ConstrainDOMString;
+        logicalSurface?: ConstrainBoolean;
+        zoom?: number;
+    }
+    interface MediaTrackCapabilities {
+        zoom: {
+            min: number;
+            max: number;
+            step: number;
+        };
+    }
+}
+interface AudioLevelListener {
+    onAudioLevel?(audioLevel: number, id: string): void;
+    onMuteDetection?(id: string): void;
+    onStartSpeak(): void;
+    onStopSpeak(): void;
+}
+declare class AudioLevel {
+    readonly id: string;
+    constructor(stream: MediaStream, listener?: AudioLevelListener);
+    /**
+     * return the median of the audio levels (60 per second) for the
+     * current second
+     */
+    getAudioLevelMedian(): number;
+    getCurrentAudioLevel(): number;
+    analyse(): void;
+    release(): void;
+    static isAPIAvailable(): boolean;
+}
+interface DeviceRequest {
+    requestId: string;
+    deviceType: DeviceType;
+}
+interface WebRTCTransportData {
+    kind: MediaKind;
+    transport: Transport;
+    disconnectTimeout: number | undefined;
+}
+interface CustomMessage {
+    chunks: Array<{
+        index: number;
+        data: string;
+    }>;
+    totalChunks: number;
+}
+declare class StreamerClient implements AudioLevelListener {
+    iceServers: Array<RTCIceServer>;
+    peers: Map<PeerId, PeerInfo>;
+    consumers: Map<ConsumerId, ConsumerData>;
+    webcams: Map<string, MediaDeviceInfo>;
+    webcam: {
+        device: MediaDeviceInfo | null;
+        resolution: VideoResolution;
+    };
+    webcamTrack: MediaStreamTrack | null;
+    webcamZoom: {
+        available: boolean;
+        min: number;
+        max: number;
+    };
+    audioLevel: AudioLevel | undefined;
+    muted: boolean;
+    roomId: string;
+    peerId: PeerId;
+    displayName?: string;
+    protooTransport: protooClient.WebSocketTransport;
+    protoo: protooClient.Peer;
+    mediasoupDevice: mediasoupClient.types.Device;
+    routerRtpCapabilities: mediasoupClient.types.RtpCapabilities;
+    recvVideoTransports?: WebRTCTransportData;
+    sendVideoTransports?: WebRTCTransportData;
+    recvAudioTransports?: WebRTCTransportData;
+    sendAudioTransports?: WebRTCTransportData;
+    micProducer?: mediasoupClient.types.Producer;
+    webcamProducer: mediasoupClient.types.Producer | null;
+    screenshareProducer: mediasoupClient.types.Producer | null;
+    pendingDeviceRequest: Record<string, DeviceRequest>;
+    joinOptions: JoinOptions;
+    customMessages: Map<string, CustomMessage>;
+    constructor();
+    onStartSpeak(): void;
+    onStopSpeak(): void;
+    generateToken(bid: string): Promise<string>;
+    init(room?: string, options?: JoinOptions): Promise<void>;
+    joinRoom(): Promise<void>;
+    enableMicrophone(): Promise<void>;
+    muteMicrophone(): Promise<void>;
+    unMuteMicrophone(): Promise<void>;
+    toggleMute(): Promise<{
+        muted: boolean;
+    }>;
+    endCall(): void;
+    terminateRoom(): void;
+    updateWebcams(): Promise<void>;
+    isVideoZoomAvailable(): boolean;
+    handleGetUserMediaError(deviceType: DeviceType, getUserMediaPromise: Promise<MediaStream>): Promise<MediaStream>;
+    restartIce(transport: Transport): Promise<void>;
+    enableVideo(): Promise<void>;
+    rotateVideo(): Promise<void>;
+    zoomVideo(): Promise<void>;
+    unzoomVideo(): Promise<void>;
+    disableVideo(): Promise<void>;
+    enableScreenshare(): Promise<void>;
+    disableScreenshare(): Promise<void>;
+    onConsumerClose({ consumerId }: {
+        consumerId: ConsumerId;
+    }): void;
+    requestVoice({ consumerId, element }: {
+        consumerId: string;
+        element: HTMLAudioElement;
+    }): void;
+    requestVideo({ consumerId, element }: {
+        consumerId: string;
+        element: HTMLVideoElement;
+    }): void;
+    captureVideo(videoElement?: HTMLVideoElement): Promise<string>;
+    requestLocalVideo(element: HTMLVideoElement): {
+        facingMode: string;
+    };
+    requestLocalScreenshare(element: HTMLVideoElement): void;
+    consumePeer({ peerId, producersData, }: {
+        peerId: PeerId;
+        producersData: Array<ProducerData>;
+    }): void;
+    consumeProducer({ peerId, producerId, deviceType, paused, }: {
+        peerId: PeerId;
+        producerId: ProducerId;
+        deviceType: DeviceType;
+        paused: boolean;
+    }): Promise<void>;
+    setDisplayName(displayName: string): Promise<void>;
+    requestPeerDevice(remotePeerId: string, deviceType: DeviceType): Promise<void>;
+    denyDeviceRequest(deviceType: DeviceType): void;
+    getCallId(): Promise<number>;
+    getConsumers(): Map<string, ConsumerData>;
+    getDevicesState(): DevicesState;
+    sendCustomMessageToAll(event: any): Promise<void>;
+    sendCustomMessage(peerId: string, event: any): Promise<void>;
+}
+declare const streamerClient: StreamerClient;
+interface StreamUIMethods {
+    init: (options: StreamUIInitOptions) => void;
+    setExtraSettingsOptions: (extraOptions: SettingsCategory[]) => void;
+    joinRoom: typeof streamerClient.init;
+    leaveRoom: typeof streamerClient.endCall;
+    terminateRoom: typeof streamerClient.terminateRoom;
+    generateToken: typeof streamerClient.generateToken;
+}
+interface ControlSettings {
+    available?: boolean;
+    enabled?: boolean;
+}
+interface StreamUIBaseOptions {
+    sharedURL?: string;
+    audioTiles?: boolean;
+    settingsShortcuts?: string[];
+    extraSettingsOptions?: SettingsCategory[];
+    controls?: {
+        microphone?: ControlSettings;
+        camera?: ControlSettings;
+        screenshare?: ControlSettings;
+    };
+    logo?: {
+        text?: string;
+        size?: 'small' | 'medium' | 'large';
+    };
+    showMenuButton?: boolean;
+    GDPRDisclaimer?: boolean;
+}
+interface StreamUIInitOptions extends StreamUIBaseOptions {
+    element: HTMLElement;
+}
+declare global {
+    interface Window {
+        streamUI: StreamUIMethods;
+        snapcallAPI: {
+            join: typeof streamerClient.init;
+            endCall: typeof streamerClient.endCall;
+            terminateRoom: typeof streamerClient.terminateRoom;
+            generateToken: typeof streamerClient.generateToken;
+            setDisplayName: typeof streamerClient.setDisplayName;
+        };
+    }
+    interface MediaSession {
+        setMicrophoneActive: (active: boolean) => void;
+        setCameraActive: (active: boolean) => void;
+    }
+    interface WindowEventMap {
+        streamUISetExtraSettingsOptions: CustomEvent;
+        enterRoom: CustomEvent;
+        newPeer: CustomEvent;
+        peerClosed: CustomEvent;
+        newConsumer: CustomEvent;
+        consumerClose: CustomEvent;
+        screenshareEnabled: CustomEvent;
+        screenshareDisabled: CustomEvent;
+        producerPaused: CustomEvent;
+        producerResumed: CustomEvent;
+        displayName: CustomEvent;
+        selfDisplayName: CustomEvent;
+        requestDevice: CustomEvent;
+        requestDeviceResult: CustomEvent;
+        webcamsUpdate: CustomEvent;
+        microphoneEnabled: CustomEvent;
+        microphoneMute: CustomEvent;
+        microphoneUnmute: CustomEvent;
+        peerStartSpeak: CustomEvent;
+        peerStopSpeak: CustomEvent;
+        agentIdentity: CustomEvent;
+        customMessage: CustomEvent;
+    }
+}
+declare global {
+    interface Window {
+        onYouTubeIframeAPIReady: () => void;
+        YT?: {
+            loaded?: boolean;
+        };
+    }
+}
+export const streamUI: StreamUIMethods;

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@snapcall/stream-ui",
+  "version": "1.0.0",
+  "description": "",
+  "source": "src/index.tsx",
+  "main": "dist/stream-ui.js",
+  "module": "dist/stream-ui.esm.js",
+  "umd": "dist/stream-ui.umd.js",
+  "types": "dist/types.d.ts",
+  "targets": {
+    "umd": {
+      "context": "browser",
+      "outputFormat": "global",
+      "includeNodeModules": true,
+      "isLibrary": false,
+      "optimize": true,
+      "sourceMap": false
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "watch": "parcel watch",
+    "serve": "parcel serve --https example/index.html",
+    "build": "parcel build",
+    "build:npm": "parcel build --no-source-maps",
+    "build:s3": "parcel build --no-source-maps --target umd",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "prettier": "prettier --check ."
+  },
+  "keywords": [],
+  "author": "Seampl",
+  "license": "ISC",
+  "peerDependencies": {
+    "@sentry/browser": "^7.0.0",
+    "bowser": "^2.11.0",
+    "inobounce": "^0.2.1",
+    "mediasoup-client": "^3.6.52",
+    "protoo-client": "^4.0.6",
+    "qrcode": "^1.5.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hot-toast": "^2.2.0",
+    "styled-components": "^5.3.3"
+  },
+  "devDependencies": {
+    "@parcel/packager-ts": "^2.6.0",
+    "@parcel/transformer-typescript-types": "^2.6.0",
+    "@types/protoo-client": "^4.0.1",
+    "@types/qrcode": "^1.4.2",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/styled-components": "^5.1.25",
+    "@types/uuid": "^8.3.4",
+    "eslint": "^8.16.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.1",
+    "parcel": "^2.6.0",
+    "prettier": "2.6.2",
+    "process": "^0.11.10",
+    "typescript": "^4.7.2"
+  },
+  "dependencies": {
+    "@sentry/browser": "^7.0.0",
+    "@types/youtube": "^0.0.46",
+    "bowser": "^2.11.0",
+    "inobounce": "^0.2.1",
+    "mediasoup-client": "^3.6.52",
+    "protoo-client": "^4.0.6",
+    "qrcode": "^1.5.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hot-toast": "^2.2.0",
+    "styled-components": "^5.3.3",
+    "uuid": "^8.3.2"
+  }
+}