@sbhjt-gr/react-native-webrtc 124.0.0

package/src/RTCUtil.ts

@@ -0,0 +1,211 @@
+
+const DEFAULT_AUDIO_CONSTRAINTS = {};
+
+const DEFAULT_VIDEO_CONSTRAINTS = {
+    facingMode: 'user',
+    frameRate: 30,
+    height: 720,
+    width: 1280
+};
+
+const FACING_MODES = [ 'user', 'environment' ];
+
+const ASPECT_RATIO = 16 / 9;
+
+export type RTCOfferOptions  = {
+    iceRestart?:boolean;
+    offerToReceiveAudio?: boolean;
+    offerToReceiveVideo?: boolean;
+    voiceActivityDetection?:boolean
+};
+
+const STANDARD_OFFER_OPTIONS = {
+    icerestart: 'IceRestart',
+    offertoreceiveaudio: 'OfferToReceiveAudio',
+    offertoreceivevideo: 'OfferToReceiveVideo',
+    voiceactivitydetection: 'VoiceActivityDetection'
+};
+
+const SDP_TYPES = [
+    'offer',
+    'pranswer',
+    'answer',
+    'rollback'
+];
+
+function getDefaultMediaConstraints(mediaType) {
+    switch (mediaType) {
+        case 'audio':
+            return DEFAULT_AUDIO_CONSTRAINTS;
+        case 'video':
+            return DEFAULT_VIDEO_CONSTRAINTS;
+        default:
+            throw new TypeError(`Invalid media type: ${mediaType}`);
+    }
+}
+
+function extractString(constraints, prop) {
+    const value = constraints[prop];
+    const type = typeof value;
+
+    if (type === 'object') {
+        for (const v of [ 'exact', 'ideal' ]) {
+            if (value[v]) {
+                return value[v];
+            }
+        }
+    } else if (type === 'string') {
+        return value;
+    }
+}
+
+function extractNumber(constraints, prop) {
+    const value = constraints[prop];
+    const type = typeof value;
+
+    if (type === 'number') {
+        return Number.parseInt(value);
+    } else if (type === 'object') {
+        for (const v of [ 'exact', 'ideal', 'max', 'min' ]) {
+            if (value[v]) {
+                return Number.parseInt(value[v]);
+            }
+        }
+    }
+}
+
+function normalizeMediaConstraints(constraints, mediaType) {
+    switch (mediaType) {
+        case 'audio':
+            return constraints;
+
+        case 'video': {
+            const c = {
+                deviceId: extractString(constraints, 'deviceId'),
+                facingMode: extractString(constraints, 'facingMode'),
+                frameRate: extractNumber(constraints, 'frameRate'),
+                height: extractNumber(constraints, 'height'),
+                width: extractNumber(constraints, 'width')
+            };
+
+            if (!c.deviceId) {
+                delete c.deviceId;
+            }
+
+            if (!FACING_MODES.includes(c.facingMode)) {
+                c.facingMode = DEFAULT_VIDEO_CONSTRAINTS.facingMode;
+            }
+
+            if (!c.frameRate) {
+                c.frameRate = DEFAULT_VIDEO_CONSTRAINTS.frameRate;
+            }
+
+            if (!c.height && !c.width) {
+                c.height = DEFAULT_VIDEO_CONSTRAINTS.height;
+                c.width = DEFAULT_VIDEO_CONSTRAINTS.width;
+            } else if (!c.height && c.width) {
+                c.height = Math.round(c.width / ASPECT_RATIO);
+            } else if (!c.width && c.height) {
+                c.width = Math.round(c.height * ASPECT_RATIO);
+            }
+
+            return c;
+        }
+
+        default:
+            throw new TypeError(`Invalid media type: ${mediaType}`);
+    }
+}
+
+/**
+ * Utility for creating short random strings from float point values.
+ * We take 4 characters from the end after converting to a string.
+ * Conversion to string gives us some letters as we don't want just numbers.
+ * Should be suitable to pass for enough randomness.
+ *
+ * @return {String} 4 random characters
+ */
+function chr4() {
+    return Math.random().toString(16).slice(-4);
+}
+
+/**
+ * Put together a random string in UUIDv4 format {xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}
+ *
+ * @return {String} uuidv4
+ */
+export function uniqueID(): string {
+    return `${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
+}
+
+/**
+ * Utility for deep cloning an object. Object.assign() only does a shallow copy.
+ *
+ * @param {Object} obj - object to be cloned
+ * @return {Object} cloned obj
+ */
+export function deepClone<T>(obj: T): T {
+    return JSON.parse(JSON.stringify(obj));
+}
+
+/**
+ * Checks whether an SDP type is valid or not.
+ *
+ * @param type SDP type to check.
+ * @returns Whether the SDP type is valid or not.
+ */
+export function isSdpTypeValid(type: string): boolean {
+    return SDP_TYPES.includes(type);
+}
+
+/**
+ * Normalize options passed to createOffer().
+ *
+ * @param options - user supplied options
+ * @return Normalized options
+ */
+export function normalizeOfferOptions(options?: RTCOfferOptions) {
+    const newOptions: Record<string,string> = {};
+
+    if (typeof options !== 'object') {
+        return newOptions;
+    }
+
+    // Convert standard options into WebRTC internal constant names.
+    // See: https://github.com/jitsi/webrtc/blob/0cd6ce4de669bed94ba47b88cb71b9be0341bb81/sdk/media_constraints.cc#L113
+    for (const [ key, value ] of Object.entries(options)) {
+        const newKey = STANDARD_OFFER_OPTIONS[key.toLowerCase()];
+
+        if (newKey) {
+            newOptions[newKey] = String(Boolean(value));
+        }
+    }
+
+    return newOptions;
+}
+
+/**
+ * Normalize the given constraints in something we can work with.
+ */
+export function normalizeConstraints(constraints) {
+    const c = deepClone(constraints);
+
+    for (const mediaType of [ 'audio', 'video' ]) {
+        const mediaTypeConstraints = c[mediaType];
+        const typeofMediaTypeConstraints = typeof mediaTypeConstraints;
+
+        if (typeofMediaTypeConstraints !== 'undefined') {
+            if (typeofMediaTypeConstraints === 'boolean') {
+                if (mediaTypeConstraints) {
+                    c[mediaType] = getDefaultMediaConstraints(mediaType);
+                }
+            } else if (typeofMediaTypeConstraints === 'object') {
+                c[mediaType] = normalizeMediaConstraints(mediaTypeConstraints, mediaType);
+            } else {
+                throw new TypeError(`constraints.${mediaType} is neither a boolean nor a dictionary`);
+            }
+        }
+    }
+
+    return c;
+}

package/src/RTCView.ts

@@ -0,0 +1,122 @@
+import { requireNativeComponent, ViewProps } from 'react-native';
+
+/**
+ * Native prop validation was removed from RN in:
+ * https://github.com/facebook/react-native/commit/8dc3ba0444c94d9bbb66295b5af885bff9b9cd34
+ *
+ * So we list them here for documentation purposes.
+ */
+export interface RTCVideoViewProps extends ViewProps {
+  /**
+   * Indicates whether the video specified by {@link #streamURL} should be
+   * mirrored during rendering. Commonly, applications choose to mirror the
+   * user-facing camera.
+   *
+   * mirror: boolean
+   */
+  mirror?: boolean;
+
+  /**
+   * In the fashion of
+   * https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth
+   * and https://www.w3.org/TR/html5/rendering.html#video-object-fit,
+   * resembles the CSS style object-fit.
+   *
+   * objectFit: 'contain' | 'cover'
+   *
+   * Defaults to 'cover'.
+   */
+  objectFit?: 'contain' | 'cover';
+
+  /**
+   * URL / id of the stream that should be rendered.
+   *
+   * streamURL: string
+   */
+  streamURL?: string;
+  /**
+   * Similarly to the CSS property z-index, specifies the z-order of this
+   * RTCView in the stacking space of all RTCViews. When RTCViews overlap,
+   * zOrder determines which one covers the other. An RTCView with a larger
+   * zOrder generally covers an RTCView with a lower one.
+   *
+   * Non-overlapping RTCViews may safely share a z-order (because one does not
+   * have to cover the other).
+   *
+   * The support for zOrder is platform-dependent and/or
+   * implementation-specific. Thus, specifying a value for zOrder is to be
+   * thought of as giving a hint rather than as imposing a requirement. For
+   * example, video renderers such as RTCView are commonly implemented using
+   * OpenGL and OpenGL views may have different numbers of layers in their
+   * stacking space. Android has three: a layer bellow the window (aka
+   * default), a layer bellow the window again but above the previous layer
+   * (aka media overlay), and above the window. Consequently, it is advisable
+   * to limit the number of utilized layers in the stacking space to the
+   * minimum sufficient for the desired display. For example, a video call
+   * application usually needs a maximum of two zOrder values: 0 for the
+   * remote video(s) which appear in the background, and 1 for the local
+   * video(s) which appear above the remote video(s).
+   *
+   * zOrder: number
+   */
+  zOrder?: number;
+
+
+  /**
+   * Picture in picture options for this view. Disabled if not supplied.
+   *
+   * Note: this should only be generally only used with remote video tracks,
+   * as the local camera may stop while in the background.
+   *
+   * iOS only. Requires iOS 15.0 or above, and the PIP background mode capability.
+   */
+  iosPIP?: RTCIOSPIPOptions;
+
+  /**
+   * Callback function that is called when the dimensions of the video change.
+   *
+   * @param {Object} event - The event object containing the new dimensions.
+   * @param {Object} event.nativeEvent - The native event data.
+   * @param {number} event.nativeEvent.width - The width of the video.
+   * @param {number} event.nativeEvent.height - The height of the video.
+   */
+  onDimensionsChange?: (event: { nativeEvent: { width: number; height: number } }) => void;
+}
+
+export interface RTCIOSPIPOptions {
+
+  /**
+   * Whether PIP can be launched from this view.
+   *
+   * Defaults to true.
+   */
+  enabled?: boolean;
+
+  /**
+   * The preferred size of the PIP window.
+   */
+  preferredSize?: {
+    width: number;
+    height: number;
+  },
+
+  /**
+   * Indicates whether Picture in Picture starts automatically
+   * when the controller embeds its content inline and the app
+   * transitions to the background.
+   *
+   * Defaults to true.
+   *
+   * See: AVPictureInPictureController.canStartPictureInPictureAutomaticallyFromInline
+   */
+  startAutomatically?: boolean;
+
+  /**
+   * Indicates whether Picture in Picture should stop automatically
+   * when the app returns to the foreground.
+   *
+   * Defaults to true.
+   */
+  stopAutomatically?: boolean;
+}
+export default requireNativeComponent<RTCVideoViewProps>('RTCVideoView');

package/src/RTCView.web.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { StyleSheet, View, ViewProps } from 'react-native';
+
+import { getStream } from './webStream';
+
+export interface RTCVideoViewProps extends ViewProps {
+  mirror?: boolean;
+  objectFit?: 'contain' | 'cover';
+  streamURL?: string;
+  zOrder?: number;
+  iosPIP?: RTCIOSPIPOptions;
+  onDimensionsChange?: (event: { nativeEvent: { width: number; height: number } }) => void;
+}
+
+export interface RTCIOSPIPOptions {
+  enabled?: boolean;
+  preferredSize?: {
+    width: number;
+    height: number;
+  };
+  startAutomatically?: boolean;
+  stopAutomatically?: boolean;
+}
+
+export default function RTCView({
+    mirror,
+    objectFit = 'cover',
+    streamURL,
+    style,
+    onDimensionsChange,
+}: RTCVideoViewProps) {
+    const ref = useRef<HTMLVideoElement | null>(null);
+    const stream = useMemo(() => getStream(streamURL), [ streamURL ]);
+
+    useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+
+        ref.current.srcObject = stream;
+    }, [ stream ]);
+
+    const flatStyle = StyleSheet.flatten(style) as React.CSSProperties | undefined;
+
+    return (
+        <View style={[ styles.container, style ]}>
+            {React.createElement('video', {
+                autoPlay: true,
+                muted: true,
+                playsInline: true,
+                ref,
+                onLoadedMetadata: (event: Event) => {
+                    const target = event.currentTarget as HTMLVideoElement | null;
+
+                    if (!target || !onDimensionsChange) {
+                        return;
+                    }
+
+                    onDimensionsChange({
+                        nativeEvent: {
+                            width: target.videoWidth,
+                            height: target.videoHeight,
+                        },
+                    });
+                },
+                style: {
+                    ...flatStyle,
+                    width: '100%',
+                    height: '100%',
+                    objectFit,
+                    transform: mirror ? 'scaleX(-1)' : undefined,
+                },
+            })}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+    },
+});

package/src/ScreenCapturePickerView.ts

@@ -0,0 +1,4 @@
+
+import { requireNativeComponent } from 'react-native';
+
+export default requireNativeComponent('ScreenCapturePickerView');

package/src/ScreenCapturePickerView.web.tsx

@@ -0,0 +1,3 @@
+export default function ScreenCapturePickerView() {
+    return null;
+}

package/src/getDisplayMedia.ts

@@ -0,0 +1,30 @@
+
+import { NativeModules } from 'react-native';
+
+import MediaStream from './MediaStream';
+import MediaStreamError from './MediaStreamError';
+
+const { WebRTCModule } = NativeModules;
+
+export default function getDisplayMedia(): Promise<MediaStream> {
+    return new Promise((resolve, reject) => {
+        WebRTCModule.getDisplayMedia().then(
+            data => {
+                const { streamId, track } = data;
+
+                const info = {
+                    streamId: streamId,
+                    streamReactTag: streamId,
+                    tracks: [ track ]
+                };
+
+                const stream = new MediaStream(info);
+
+                resolve(stream);
+            },
+            error => {
+                reject(new MediaStreamError(error));
+            }
+        );
+    });
+}

package/src/getUserMedia.ts

@@ -0,0 +1,111 @@
+
+import { NativeModules } from 'react-native';
+
+
+import { MediaTrackConstraints } from './Constraints';
+import MediaStream from './MediaStream';
+import MediaStreamError from './MediaStreamError';
+import permissions from './Permissions';
+import * as RTCUtil from './RTCUtil';
+
+const { WebRTCModule } = NativeModules;
+
+export interface Constraints {
+    audio?: boolean | MediaTrackConstraints;
+    video?: boolean | MediaTrackConstraints;
+}
+
+export default function getUserMedia(constraints: Constraints = {}): Promise<MediaStream> {
+    // According to
+    // https://www.w3.org/TR/mediacapture-streams/#dom-mediadevices-getusermedia,
+    // the constraints argument is a dictionary of type MediaStreamConstraints.
+    if (typeof constraints !== 'object') {
+        return Promise.reject(new TypeError('constraints is not a dictionary'));
+    }
+
+    if (
+        (typeof constraints.audio === 'undefined' || !constraints.audio) &&
+        (typeof constraints.video === 'undefined' || !constraints.video)
+    ) {
+        return Promise.reject(new TypeError('audio and/or video is required'));
+    }
+
+    // Normalize constraints.
+    constraints = RTCUtil.normalizeConstraints(constraints);
+
+    // Request required permissions
+    const reqPermissions: Promise<boolean>[] = [];
+
+    if (constraints.audio) {
+        reqPermissions.push(permissions.request({ name: 'microphone' }));
+    } else {
+        reqPermissions.push(Promise.resolve(false));
+    }
+
+    if (constraints.video) {
+        reqPermissions.push(permissions.request({ name: 'camera' }));
+    } else {
+        reqPermissions.push(Promise.resolve(false));
+    }
+
+    return new Promise((resolve, reject) => {
+        Promise.all(reqPermissions).then(results => {
+            const [ audioPerm, videoPerm ] = results;
+
+            // Check permission results and remove unneeded permissions.
+
+            if (!audioPerm && !videoPerm) {
+                // https://www.w3.org/TR/mediacapture-streams/#dom-mediadevices-getusermedia
+                // step 4
+                const error = {
+                    message: 'Permission denied.',
+                    name: 'SecurityError'
+                };
+
+                reject(new MediaStreamError(error));
+
+                return;
+            }
+
+            audioPerm || delete constraints.audio;
+            videoPerm || delete constraints.video;
+
+            const success = (id, tracks) => {
+                // Store initial constraints.
+                for (const trackInfo of tracks) {
+                    const c = constraints[trackInfo.kind];
+
+                    if (typeof c === 'object') {
+                        trackInfo.constraints = RTCUtil.deepClone(c);
+                    }
+                }
+
+                const info = {
+                    streamId: id,
+                    streamReactTag: id,
+                    tracks
+                };
+
+                resolve(new MediaStream(info));
+            };
+
+            const failure = (type, message) => {
+                let error;
+
+                switch (type) {
+                    case 'TypeError':
+                        error = new TypeError(message);
+                        break;
+                }
+
+                if (!error) {
+                    error = new MediaStreamError({ message, name: type });
+                }
+
+                reject(error);
+            };
+
+            WebRTCModule.getUserMedia(constraints, success, failure);
+        });
+    });
+}

package/src/index.ts

@@ -0,0 +1,107 @@
+import { NativeModules, Platform } from 'react-native';
+const { WebRTCModule } = NativeModules;
+
+if (WebRTCModule === null) {
+    throw new Error(`WebRTC native module not found.\n${Platform.OS === 'ios' ?
+        'Try executing the "pod install" command inside your projects ios folder.' :
+        'Try executing the "npm install" command inside your projects folder.'
+    }`);
+}
+
+import { setupNativeEvents } from './EventEmitter';
+import Logger from './Logger';
+import mediaDevices from './MediaDevices';
+import MediaStream from './MediaStream';
+import MediaStreamTrack, {
+    type MediaTrackSettings,
+    type PalabraConfig,
+    type PalabraTranscription,
+} from './MediaStreamTrack';
+import MediaStreamTrackEvent from './MediaStreamTrackEvent';
+import permissions from './Permissions';
+import RTCAudioSession from './RTCAudioSession';
+import RTCDataPacketCryptor, { RTCEncryptedPacket } from './RTCDataPacketCryptor';
+import RTCDataPacketCryptorFactory from './RTCDataPacketCryptorFactory';
+import RTCErrorEvent from './RTCErrorEvent';
+import RTCFrameCryptor, { RTCFrameCryptorState } from './RTCFrameCryptor';
+import RTCFrameCryptorFactory, { RTCFrameCryptorAlgorithm, RTCKeyProviderOptions } from './RTCFrameCryptorFactory';
+import RTCIceCandidate from './RTCIceCandidate';
+import RTCKeyProvider from './RTCKeyProvider';
+import RTCPIPView, { startIOSPIP, stopIOSPIP } from './RTCPIPView';
+import RTCPeerConnection from './RTCPeerConnection';
+import RTCRtpReceiver from './RTCRtpReceiver';
+import RTCRtpSender from './RTCRtpSender';
+import RTCRtpTransceiver from './RTCRtpTransceiver';
+import RTCSessionDescription from './RTCSessionDescription';
+import RTCView, { type RTCVideoViewProps, type RTCIOSPIPOptions } from './RTCView';
+import ScreenCapturePickerView from './ScreenCapturePickerView';
+
+Logger.enable(`${Logger.ROOT_PREFIX}:*`);
+
+// Add listeners for the native events early, since they are added asynchronously.
+setupNativeEvents();
+
+export {
+    RTCIceCandidate,
+    RTCPeerConnection,
+    RTCSessionDescription,
+    RTCView,
+    RTCPIPView,
+    ScreenCapturePickerView,
+    RTCRtpTransceiver,
+    RTCRtpReceiver,
+    RTCRtpSender,
+    RTCErrorEvent,
+    RTCAudioSession,
+    RTCDataPacketCryptor,
+    RTCDataPacketCryptorFactory,
+    RTCEncryptedPacket,
+    RTCFrameCryptor,
+    RTCFrameCryptorAlgorithm,
+    RTCFrameCryptorState,
+    RTCFrameCryptorFactory,
+    RTCKeyProvider,
+    RTCKeyProviderOptions,
+    MediaStream,
+    MediaStreamTrack,
+    type MediaTrackSettings,
+    type PalabraConfig,
+    type PalabraTranscription,
+    type RTCVideoViewProps,
+    type RTCIOSPIPOptions,
+    mediaDevices,
+    permissions,
+    registerGlobals,
+    startIOSPIP,
+    stopIOSPIP,
+};
+
+declare const global: any;
+
+function registerGlobals(): void {
+    // Should not happen. React Native has a global navigator object.
+    if (typeof global.navigator !== 'object') {
+        throw new Error('navigator is not an object');
+    }
+
+    if (!global.navigator.mediaDevices) {
+        global.navigator.mediaDevices = {};
+    }
+
+    global.navigator.mediaDevices.getUserMedia = mediaDevices.getUserMedia.bind(mediaDevices);
+    global.navigator.mediaDevices.getDisplayMedia = mediaDevices.getDisplayMedia.bind(mediaDevices);
+    global.navigator.mediaDevices.enumerateDevices = mediaDevices.enumerateDevices.bind(mediaDevices);
+
+    global.RTCIceCandidate = RTCIceCandidate;
+    global.RTCPeerConnection = RTCPeerConnection;
+    global.RTCRtpReceiver = RTCRtpReceiver;
+    global.RTCRtpSender = RTCRtpReceiver;
+    global.RTCSessionDescription = RTCSessionDescription;
+    global.MediaStream = MediaStream;
+    global.MediaStreamTrack = MediaStreamTrack;
+    global.MediaStreamTrackEvent = MediaStreamTrackEvent;
+    global.RTCRtpTransceiver = RTCRtpTransceiver;
+    global.RTCRtpReceiver = RTCRtpReceiver;
+    global.RTCRtpSender = RTCRtpSender;
+    global.RTCErrorEvent = RTCErrorEvent;
+}