@evolve.ui/core-components 1.0.1 → 1.1.0

package/src/WebRTCPlayer/adaptor/NativeWebRTCAdaptor.ts

@@ -0,0 +1,588 @@
+/* eslint-disable no-console, @typescript-eslint/no-unnecessary-condition */
+/**
+ * Native WebRTC Adaptor for Ant Media Server
+ *
+ * This is a lightweight TypeScript implementation for WebRTC streaming from Ant Media Server.
+ * It uses only native browser APIs (WebSocket, RTCPeerConnection) without external dependencies.
+ *
+ * This adaptor only supports PLAY mode (consuming streams), not publishing.
+ *
+ * Note: Console statements are intentionally enabled in this file for WebRTC debugging,
+ * as they are crucial for troubleshooting connection issues in production environments.
+ */
+
+import { WebRTCErrorToken } from '../types';
+
+/**
+ * WebSocket message types from Ant Media Server
+ */
+type WebSocketCommand =
+    | 'start'
+    | 'takeCandidate'
+    | 'takeConfiguration'
+    | 'stop'
+    | 'error'
+    | 'notification'
+    | 'streamInformation'
+    | 'pong';
+
+/**
+ * WebSocket message structure
+ */
+type WebSocketMessage = {
+    candidate?: string;
+    command: WebSocketCommand;
+    definition?: string;
+    label?: number;
+    sdp?: string;
+    streamId?: string;
+    type?: RTCSdpType;
+};
+
+/**
+ * Configuration for the WebRTC adaptor
+ */
+export type NativeWebRTCAdaptorConfig = {
+    /** Callback for status updates */
+    callback: (info: string, obj?: unknown) => void;
+    /** Callback for errors */
+    callbackError: (error: string, errorObject?: unknown) => void;
+    /** Enable debug logging */
+    debug?: boolean;
+    /** ICE server configuration */
+    peerconnection_config?: RTCConfiguration;
+    /** ID of the video element to attach the stream */
+    remoteVideoId?: string;
+    /** SDP constraints */
+    sdp_constraints?: RTCOfferOptions;
+    /** WebSocket URL for Ant Media Server */
+    websocket_url: string;
+};
+
+/**
+ * WebSocket adaptor for managing the connection to Ant Media Server
+ */
+class WebSocketAdaptor {
+    private wsConn: WebSocket;
+    private connected = false;
+    private callback: (info: string, obj?: unknown) => void;
+    private callbackError: (error: string, errorObject?: unknown) => void;
+    private closePeerConnection: (streamId: string) => void;
+    private debug: boolean;
+    private takeCandidate: (streamId: string, label: number, candidate: string) => void;
+    private takeConfiguration: (streamId: string, sdp: string, type: RTCSdpType) => void;
+
+    constructor(config: {
+        callback: (info: string, obj?: unknown) => void;
+        callbackError: (error: string, errorObject?: unknown) => void;
+        closePeerConnection: (streamId: string) => void;
+        debug: boolean;
+        takeCandidate: (streamId: string, label: number, candidate: string) => void;
+        takeConfiguration: (streamId: string, sdp: string, type: RTCSdpType) => void;
+        websocket_url: string;
+    }) {
+        this.callback = config.callback;
+        this.callbackError = config.callbackError;
+        this.closePeerConnection = config.closePeerConnection;
+        this.debug = config.debug;
+        this.takeCandidate = config.takeCandidate;
+        this.takeConfiguration = config.takeConfiguration;
+
+        this.wsConn = new WebSocket(config.websocket_url);
+        this.setupEventHandlers();
+    }
+
+    /**
+     * Setup WebSocket event handlers
+     */
+    private setupEventHandlers(): void {
+        this.wsConn.onopen = () => {
+            if (this.debug) {
+                console.log('[NativeWebRTC] WebSocket connected');
+            }
+            this.connected = true;
+            this.callback('initialized');
+        };
+
+        this.wsConn.onmessage = ({ data }) => {
+            let obj: WebSocketMessage;
+            try {
+                obj = JSON.parse(data) as WebSocketMessage;
+            } catch (error) {
+                // Malformed/hostile frame — drop it rather than throwing out of the handler.
+                if (this.debug) {
+                    console.error('[NativeWebRTC] Failed to parse WebSocket message:', error);
+                }
+                return;
+            }
+            if (this.debug) {
+                console.log('[NativeWebRTC] WebSocket message:', obj);
+            }
+
+            switch (obj.command) {
+                case 'start':
+                    // 'start' command is for publishing mode - we only support play mode
+                    if (this.debug) {
+                        console.log('[NativeWebRTC] Start command received (ignored in play-only mode)');
+                    }
+                    break;
+
+                case 'takeCandidate':
+                    if (obj.streamId && obj.label !== undefined && obj.candidate) {
+                        if (this.debug) {
+                            console.log(`[NativeWebRTC] Received ICE candidate for stream ${obj.streamId}`);
+                        }
+                        this.takeCandidate(obj.streamId, obj.label, obj.candidate);
+                    }
+                    break;
+
+                case 'takeConfiguration':
+                    if (obj.streamId && obj.sdp && obj.type) {
+                        if (this.debug) {
+                            console.log(
+                                `[NativeWebRTC] Received remote description for stream ${obj.streamId}, type: ${obj.type}`
+                            );
+                        }
+                        this.takeConfiguration(obj.streamId, obj.sdp, obj.type);
+                    }
+                    break;
+
+                case 'stop':
+                    if (this.debug) {
+                        console.log('[NativeWebRTC] Stop command received');
+                    }
+                    if (obj.streamId) {
+                        this.closePeerConnection(obj.streamId);
+                    }
+                    break;
+
+                case 'error':
+                    if (this.debug) {
+                        console.error('[NativeWebRTC] Error from server:', obj.definition);
+                    }
+                    this.callbackError(obj.definition || 'Unknown error');
+                    break;
+
+                case 'notification':
+                    this.callback(obj.definition || 'notification', obj);
+                    if (obj.definition === 'play_finished' || obj.definition === 'publish_finished') {
+                        if (obj.streamId) {
+                            this.closePeerConnection(obj.streamId);
+                        }
+                    }
+                    break;
+
+                case 'streamInformation':
+                    this.callback('streamInformation', obj);
+                    break;
+
+                case 'pong':
+                    if (this.debug) {
+                        console.log('[NativeWebRTC] Pong received');
+                    }
+                    break;
+
+                default:
+                    if (this.debug) {
+                        console.log('[NativeWebRTC] Unhandled message:', obj);
+                    }
+            }
+        };
+
+        this.wsConn.onerror = (error) => {
+            console.error('[NativeWebRTC] WebSocket error:', error);
+            this.callbackError(WebRTCErrorToken.webSocketError);
+        };
+
+        this.wsConn.onclose = (event) => {
+            this.connected = false;
+            if (this.debug) {
+                console.log('[NativeWebRTC] WebSocket connection closed');
+            }
+            this.callback('closed', event);
+        };
+    }
+
+    /**
+     * Send a message through the WebSocket
+     */
+    send(text: string): void {
+        if (this.wsConn.readyState !== WebSocket.OPEN) {
+            this.callbackError(WebRTCErrorToken.webSocketNotConnected);
+            return;
+        }
+        this.wsConn.send(text);
+    }
+
+    /**
+     * Close the WebSocket connection
+     */
+    close(): void {
+        this.wsConn.close();
+    }
+
+    /**
+     * Check if WebSocket is connected
+     */
+    isConnected(): boolean {
+        return this.connected;
+    }
+}
+
+/**
+ * Native WebRTC Adaptor for Ant Media Server (Play Mode Only)
+ */
+export class NativeWebRTCAdaptor {
+    private callback: (info: string, obj?: unknown) => void;
+    private callbackError: (error: string, errorObject?: unknown) => void;
+    private debug: boolean;
+    private websocket_url: string;
+    private peerconnection_config: RTCConfiguration;
+    private sdp_constraints: RTCOfferOptions;
+    private remoteVideoId?: string;
+    private webSocketAdaptor: WebSocketAdaptor | null = null;
+    private remotePeerConnection: Record<string, RTCPeerConnection> = {};
+    private playStreamId: string[] = [];
+    private pingInterval: ReturnType<typeof setInterval> | null = null;
+
+    constructor(config: NativeWebRTCAdaptorConfig) {
+        this.callback = config.callback;
+        this.callbackError = config.callbackError;
+        this.debug = config.debug || false;
+        this.websocket_url = config.websocket_url;
+        this.peerconnection_config = config.peerconnection_config || {
+            iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
+        };
+        this.sdp_constraints = config.sdp_constraints || {
+            offerToReceiveAudio: true,
+            offerToReceiveVideo: true,
+        };
+        this.remoteVideoId = config.remoteVideoId;
+
+        this.init();
+    }
+
+    /**
+     * Initialize the WebSocket connection
+     */
+    private init(): void {
+        if (!('WebSocket' in window)) {
+            console.error('[NativeWebRTC] WebSocket not supported');
+            this.callbackError(WebRTCErrorToken.webSocketNotSupported);
+            return;
+        }
+
+        if (!this.webSocketAdaptor?.isConnected()) {
+            this.webSocketAdaptor = new WebSocketAdaptor({
+                callback: this.callback,
+                callbackError: this.callbackError,
+                closePeerConnection: this.closePeerConnection,
+                debug: this.debug,
+                takeCandidate: this.takeCandidate,
+                takeConfiguration: this.takeConfiguration,
+                websocket_url: this.websocket_url,
+            });
+        }
+    }
+
+    /**
+     * Start playing a stream
+     */
+    play(streamId: string): void {
+        this.playStreamId.push(streamId);
+        const jsCmd = { command: 'play', streamId };
+        if (this.debug) {
+            console.log(`[NativeWebRTC] Sending play command for stream: ${streamId}`);
+        }
+        this.webSocketAdaptor?.send(JSON.stringify(jsCmd));
+    }
+
+    /**
+     * Stop playing a stream
+     */
+    stop(streamId: string): void {
+        this.closePeerConnection(streamId);
+        const jsCmd = { command: 'stop', streamId };
+        if (this.debug) {
+            console.log(`[NativeWebRTC] Sending stop command for stream: ${streamId}`);
+        }
+        this.webSocketAdaptor?.send(JSON.stringify(jsCmd));
+    }
+
+    /**
+     * Send a ping to keep the connection alive
+     */
+    ping(streamId: string): void {
+        const jsCmd = { command: 'ping', streamId };
+        if (this.debug) {
+            console.log('[NativeWebRTC] Sending ping');
+        }
+        this.webSocketAdaptor?.send(JSON.stringify(jsCmd));
+    }
+
+    /**
+     * Start sending periodic pings
+     */
+    startPinging(streamId: string): void {
+        this.pingInterval = setInterval(() => {
+            this.ping(streamId);
+        }, 30000); // 30 seconds
+    }
+
+    /**
+     * Stop sending pings
+     */
+    stopPinging(): void {
+        if (this.pingInterval) {
+            clearInterval(this.pingInterval);
+            this.pingInterval = null;
+        }
+    }
+
+    /**
+     * Leave the stream and close connections
+     */
+    leave(streamId: string): void {
+        this.stopPinging();
+        const jsCmd = { command: 'leave', streamId };
+        if (this.debug) {
+            console.log(`[NativeWebRTC] Leaving stream: ${streamId}`);
+        }
+        this.webSocketAdaptor?.send(JSON.stringify(jsCmd));
+        this.closePeerConnection(streamId);
+        this.webSocketAdaptor?.close();
+    }
+
+    /**
+     * Close the WebSocket connection
+     */
+    closeWebSocket(): void {
+        this.webSocketAdaptor?.close();
+    }
+
+    /**
+     * Initialize peer connection for a stream
+     */
+    private initPeerConnection = (streamId: string): void => {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (this.remotePeerConnection[streamId]) {
+            return;
+        }
+
+        if (this.debug) {
+            console.log(`[NativeWebRTC] Initializing peer connection for stream: ${streamId}`);
+        }
+
+        const peerConnection = new RTCPeerConnection(this.peerconnection_config);
+        this.remotePeerConnection[streamId] = peerConnection;
+
+        // Handle ICE candidates
+        peerConnection.onicecandidate = (event) => {
+            this.iceCandidateReceived(event, streamId);
+        };
+
+        // Handle incoming tracks
+        peerConnection.ontrack = (event) => {
+            this.onTrack(event, streamId);
+        };
+
+        // Detect media-path failures. The WebSocket can stay open while the
+        // peer connection dies (e.g. the network drops mid-stream), which would
+        // otherwise freeze the video with no signal. Surfacing 'failed' as an
+        // error lets the consumer trigger reconnection. 'disconnected' is
+        // intentionally not treated as fatal — it is often transient and may
+        // recover on its own.
+        peerConnection.onconnectionstatechange = () => {
+            if (peerConnection.connectionState === 'failed') {
+                if (this.debug) {
+                    console.log('[NativeWebRTC] Peer connection failed');
+                }
+                this.callbackError(WebRTCErrorToken.peerConnectionFailed);
+            }
+        };
+
+        peerConnection.oniceconnectionstatechange = () => {
+            if (peerConnection.iceConnectionState === 'failed') {
+                if (this.debug) {
+                    console.log('[NativeWebRTC] ICE connection failed');
+                }
+                this.callbackError(WebRTCErrorToken.iceConnectionFailed);
+            }
+        };
+
+        if (this.debug) {
+            console.log(`[NativeWebRTC] Peer connection created for stream: ${streamId}`);
+        }
+    };
+
+    /**
+     * Close peer connection for a stream
+     */
+    private closePeerConnection = (streamId: string): void => {
+        const peerConnection = this.remotePeerConnection[streamId];
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (peerConnection && peerConnection.signalingState !== 'closed') {
+            if (this.debug) {
+                console.log(`[NativeWebRTC] Closing peer connection for stream: ${streamId}`);
+            }
+            peerConnection.close();
+            delete this.remotePeerConnection[streamId];
+
+            const playStreamIndex = this.playStreamId.indexOf(streamId);
+            if (playStreamIndex !== -1) {
+                this.playStreamId.splice(playStreamIndex, 1);
+            }
+        }
+    };
+
+    /**
+     * Handle incoming track (video/audio stream)
+     */
+    private onTrack = (event: RTCTrackEvent, streamId: string): void => {
+        if (this.debug) {
+            console.log(`[NativeWebRTC] Track received for stream: ${streamId}`);
+        }
+
+        const remoteVideo = this.remoteVideoId ? document.getElementById(this.remoteVideoId) : null;
+
+        if (remoteVideo && remoteVideo instanceof HTMLVideoElement) {
+            if (remoteVideo.srcObject !== event.streams[0]) {
+                remoteVideo.srcObject = event.streams[0];
+                if (this.debug) {
+                    console.log('[NativeWebRTC] Remote stream attached to video element');
+                }
+            }
+        } else {
+            // If no video element specified, pass the stream through callback
+            const dataObj = {
+                streamId,
+                track: event.streams[0],
+            };
+            this.callback('newStreamAvailable', dataObj);
+        }
+    };
+
+    /**
+     * Handle ICE candidate
+     */
+    private iceCandidateReceived = (event: RTCPeerConnectionIceEvent, streamId: string): void => {
+        if (event.candidate) {
+            const jsCmd = {
+                candidate: event.candidate.candidate,
+                command: 'takeCandidate',
+                id: event.candidate.sdpMid,
+                label: event.candidate.sdpMLineIndex,
+                streamId,
+            };
+
+            if (this.debug) {
+                console.log(`[NativeWebRTC] Sending ICE candidate for stream: ${streamId}`);
+            }
+
+            this.webSocketAdaptor?.send(JSON.stringify(jsCmd));
+        }
+    };
+
+    /**
+     * Handle remote configuration (SDP)
+     */
+    private takeConfiguration = (streamId: string, sdp: string, type: RTCSdpType): void => {
+        this.initPeerConnection(streamId);
+        const peerConnection = this.remotePeerConnection[streamId];
+
+        if (!peerConnection) {
+            console.error('[NativeWebRTC] Peer connection not found');
+            return;
+        }
+
+        peerConnection
+            .setRemoteDescription(new RTCSessionDescription({ sdp, type }))
+            .then(() => {
+                if (this.debug) {
+                    console.log(`[NativeWebRTC] Remote description set successfully for stream: ${streamId}`);
+                }
+
+                if (type === 'offer') {
+                    // Create answer for the offer
+                    if (this.debug) {
+                        console.log(`[NativeWebRTC] Creating answer for stream: ${streamId}`);
+                    }
+                    peerConnection
+                        .createAnswer(this.sdp_constraints)
+                        .then((description) => {
+                            this.gotDescription(description, streamId);
+                        })
+                        .catch((error) => {
+                            console.error('[NativeWebRTC] Failed to create answer:', error);
+                            this.callbackError(WebRTCErrorToken.failedToCreateAnswer, error);
+                        });
+                }
+            })
+            .catch((error) => {
+                console.error('[NativeWebRTC] Failed to set remote description:', error);
+                this.callbackError(WebRTCErrorToken.failedToSetRemoteDescription, error);
+            });
+    };
+
+    /**
+     * Handle local description (SDP)
+     */
+    private gotDescription = (description: RTCSessionDescriptionInit, streamId: string): void => {
+        const peerConnection = this.remotePeerConnection[streamId];
+
+        if (!peerConnection) {
+            console.error('[NativeWebRTC] Peer connection not found');
+            return;
+        }
+
+        peerConnection
+            .setLocalDescription(description)
+            .then(() => {
+                if (this.debug) {
+                    console.log(`[NativeWebRTC] Local description set successfully for stream: ${streamId}`);
+                }
+
+                const jsCmd = {
+                    command: 'takeConfiguration',
+                    sdp: description.sdp,
+                    streamId,
+                    type: description.type,
+                };
+
+                this.webSocketAdaptor?.send(JSON.stringify(jsCmd));
+            })
+            .catch((error) => {
+                console.error('[NativeWebRTC] Failed to set local description:', error);
+                this.callbackError(WebRTCErrorToken.failedToSetLocalDescription, error);
+            });
+    };
+
+    /**
+     * Handle ICE candidate from server
+     */
+    private takeCandidate = (streamId: string, label: number, candidateSdp: string): void => {
+        const candidate = new RTCIceCandidate({
+            candidate: candidateSdp,
+            sdpMLineIndex: label,
+        });
+
+        this.initPeerConnection(streamId);
+        const peerConnection = this.remotePeerConnection[streamId];
+
+        if (!peerConnection) {
+            console.error('[NativeWebRTC] Peer connection not found');
+            return;
+        }
+
+        peerConnection
+            .addIceCandidate(candidate)
+            .then(() => {
+                if (this.debug) {
+                    console.log(`[NativeWebRTC] ICE candidate added for stream: ${streamId}`);
+                }
+            })
+            .catch((error) => {
+                console.error(`[NativeWebRTC] Failed to add ICE candidate for stream ${streamId}:`, error);
+            });
+    };
+}