@stream-io/video-client 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.5.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.5.1...@stream-io/video-client-0.5.2) (2023-12-11)
+
+
+### Bug Fixes
+
+* **ringing:** Auto-Cancel outgoing calls ([#1217](https://github.com/GetStream/stream-video-js/issues/1217)) ([c4d557b](https://github.com/GetStream/stream-video-js/commit/c4d557b736df8ff0a95166d1f9f0a52d4a57a122)), closes [#1215](https://github.com/GetStream/stream-video-js/issues/1215)
+
+### [0.5.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.5.0...@stream-io/video-client-0.5.1) (2023-12-05)
+
+
+### Features
+
+* **client:** speaking while muted in React Native using temporary peer connection ([#1207](https://github.com/GetStream/stream-video-js/issues/1207)) ([9093006](https://github.com/GetStream/stream-video-js/commit/90930063503b6dfb83572dad8a31e45b16bf1685))
+
 ## [0.5.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.4.10...@stream-io/video-client-0.5.0) (2023-11-29)
 
 

package/README.md

@@ -1,4 +1,4 @@
-# Official Plain-JS SDK and Low-Level Client for [Stream Video](https://getstream.io/video/docs/)
+# Official JavaScript SDK and Low-Level Client for [Stream Video](https://getstream.io/video/docs/)
 
 <img src="../../.readme-assets/Github-Graphic-JS.jpg" alt="Stream Video for JavaScript Header image" style="box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); border-radius: 1rem" />
 
@@ -7,7 +7,6 @@ Low-level Video SDK client for browser and Node.js integrations.
 ## **Quick Links**
 
 - [Register](https://getstream.io/chat/trial/) to get an API key for Stream Video
-  TODO: add links to docs and tutorials
 
 ## What is Stream?
 
@@ -15,9 +14,9 @@ Stream allows developers to rapidly deploy scalable feeds, chat messaging and vi
 
 With Stream's video components, you can use their SDK to build in-app video calling, audio rooms, audio calls, or live streaming. The best place to get started is with their tutorials:
 
-- [Video & Audio Calling Tutorial](https://getstream.io/video/docs/javascript/tutorials/video-calling/)
-- Audio Rooms Tutorial
-- [Livestreaming Tutorial](https://getstream.io/video/docs/javascript/tutorials/livestream/)
+- [Video and Audio Calling Tutorial](https://getstream.io/video/sdk/javascript/tutorial/video-calling/)
+- [Audio Rooms Tutorial](https://getstream.io/video/sdk/javascript/tutorial/audio-room/)
+- [Livestream Tutorial](https://getstream.io/video/sdk/javascript/tutorial/livestreaming/)
 
 Stream provides UI components and state handling that make it easy to build video calling for your app. All calls run on Stream's network of edge servers around the world, ensuring optimal latency and reliability.
 

package/dist/index.browser.es.js

@@ -4,7 +4,7 @@ import { ServiceType, stackIntercept } from '@protobuf-ts/runtime-rpc';
 import axios, { AxiosHeaders } from 'axios';
 export { AxiosError } from 'axios';
 import { TwirpFetchTransport } from '@protobuf-ts/twirp-transport';
-import { ReplaySubject, combineLatest, BehaviorSubject, map as map$1, shareReplay, distinctUntilChanged, takeWhile, distinctUntilKeyChanged, merge, from, Observable, debounceTime, concatMap, pairwise, of, filter, tap, debounce, timer } from 'rxjs';
+import { ReplaySubject, combineLatest, BehaviorSubject, map as map$1, shareReplay, distinctUntilChanged, takeWhile, distinctUntilKeyChanged, merge, from, Observable, debounceTime, concatMap, pairwise, of, filter, debounce, timer } from 'rxjs';
 import * as SDP from 'sdp-transform';
 import { UAParser } from 'ua-parser-js';
 import WebSocket from 'isomorphic-ws';
@@ -6492,7 +6492,7 @@ class Publisher {
              */
             const handleTrackEnded = async () => {
                 logger$3('info', `Track ${TrackType[trackType]} has ended, notifying the SFU`);
-                await this.notifyTrackMuteStateChanged(mediaStream, track, trackType, true);
+                await this.notifyTrackMuteStateChanged(mediaStream, trackType, true);
                 // clean-up, this event listener needs to run only once.
                 track.removeEventListener('ended', handleTrackEnded);
             };
@@ -6548,7 +6548,7 @@ class Publisher {
                 }
                 await transceiver.sender.replaceTrack(track);
             }
-            await this.notifyTrackMuteStateChanged(mediaStream, track, trackType, false);
+            await this.notifyTrackMuteStateChanged(mediaStream, trackType, false);
         };
         /**
          * Stops publishing the given track type to the SFU, if it is currently being published.
@@ -6570,7 +6570,7 @@ class Publisher {
                     : (transceiver.sender.track.enabled = false);
                 // We don't need to notify SFU if unpublishing in response to remote soft mute
                 if (this.state.localParticipant?.publishedTracks.includes(trackType)) {
-                    await this.notifyTrackMuteStateChanged(undefined, transceiver.sender.track, trackType, true);
+                    await this.notifyTrackMuteStateChanged(undefined, trackType, true);
                 }
             }
         };
@@ -6602,7 +6602,7 @@ class Publisher {
             }
             return false;
         };
-        this.notifyTrackMuteStateChanged = async (mediaStream, track, trackType, isMuted) => {
+        this.notifyTrackMuteStateChanged = async (mediaStream, trackType, isMuted) => {
             await this.sfuClient.updateMuteState(trackType, isMuted);
             const audioOrVideoOrScreenShareStream = trackTypeToParticipantStreamKey(trackType);
             if (isMuted) {
@@ -7646,131 +7646,6 @@ var rxUtils = /*#__PURE__*/Object.freeze({
     setCurrentValue: setCurrentValue
 });
 
-class StreamVideoWriteableStateStore {
-    constructor() {
-        /**
-         * A store keeping data of a successfully connected user over WS to the coordinator server.
-         */
-        this.connectedUserSubject = new BehaviorSubject(undefined);
-        /**
-         * A list of {@link Call} objects created/tracked by this client.
-         */
-        this.callsSubject = new BehaviorSubject([]);
-        /**
-         * Gets the current value of an observable, or undefined if the observable has
-         * not emitted a value yet.
-         *
-         * @param observable$ the observable to get the value from.
-         */
-        this.getCurrentValue = getCurrentValue;
-        /**
-         * Updates the value of the provided Subject.
-         * An `update` can either be a new value or a function which takes
-         * the current value and returns a new value.
-         *
-         * @param subject the subject to update.
-         * @param update the update to apply to the subject.
-         * @return the updated value.
-         */
-        this.setCurrentValue = setCurrentValue;
-        /**
-         * Sets the currently connected user.
-         *
-         * @internal
-         * @param user the user to set as connected.
-         */
-        this.setConnectedUser = (user) => {
-            return this.setCurrentValue(this.connectedUserSubject, user);
-        };
-        /**
-         * Sets the list of {@link Call} objects created/tracked by this client.
-         * @param calls
-         */
-        this.setCalls = (calls) => {
-            return this.setCurrentValue(this.callsSubject, calls);
-        };
-        /**
-         * Adds a {@link Call} object to the list of {@link Call} objects created/tracked by this client.
-         *
-         * @param call the call to add.
-         */
-        this.registerCall = (call) => {
-            if (!this.calls.find((c) => c.cid === call.cid)) {
-                this.setCalls((calls) => [...calls, call]);
-            }
-        };
-        /**
-         * Removes a {@link Call} object from the list of {@link Call} objects created/tracked by this client.
-         *
-         * @param call the call to remove
-         */
-        this.unregisterCall = (call) => {
-            return this.setCalls((calls) => calls.filter((c) => c !== call));
-        };
-        /**
-         * Finds a {@link Call} object in the list of {@link Call} objects created/tracked by this client.
-         *
-         * @param type the type of call to find.
-         * @param id the id of the call to find.
-         */
-        this.findCall = (type, id) => {
-            return this.calls.find((c) => c.type === type && c.id === id);
-        };
-        this.connectedUserSubject.subscribe(async (user) => {
-            // leave all calls when the user disconnects.
-            if (!user) {
-                for (const call of this.calls) {
-                    getLogger(['client-state'])('info', `User disconnected, leaving call: ${call.cid}`);
-                    await call.leave();
-                }
-            }
-        });
-    }
-    /**
-     * The currently connected user.
-     */
-    get connectedUser() {
-        return this.getCurrentValue(this.connectedUserSubject);
-    }
-    /**
-     * A list of {@link Call} objects created/tracked by this client.
-     */
-    get calls() {
-        return this.getCurrentValue(this.callsSubject);
-    }
-}
-/**
- * A reactive store that exposes state variables in a reactive manner.
- * You can subscribe to changes of the different state variables.
- * This central store contains all the state variables related to [`StreamVideoClient`](./StreamVideClient.md) and [`Call`](./Call.md).
- */
-class StreamVideoReadOnlyStateStore {
-    constructor(store) {
-        /**
-         * This method allows you the get the current value of a state variable.
-         *
-         * @param observable the observable to get the current value of.
-         * @returns the current value of the observable.
-         */
-        this.getCurrentValue = getCurrentValue;
-        // convert and expose subjects as observables
-        this.connectedUser$ = store.connectedUserSubject.asObservable();
-        this.calls$ = store.callsSubject.asObservable();
-    }
-    /**
-     * The current user connected over WS to the backend.
-     */
-    get connectedUser() {
-        return getCurrentValue(this.connectedUser$);
-    }
-    /**
-     * A list of {@link Call} objects created/tracked by this client.
-     */
-    get calls() {
-        return getCurrentValue(this.calls$);
-    }
-}
-
 /**
  * Creates a new combined {@link Comparator<T>} which sorts items by the given comparators.
  * The comparators are applied in the order they are given (left -> right).
@@ -8729,6 +8604,136 @@ class CallState {
     }
 }
 
+class StreamVideoWriteableStateStore {
+    constructor() {
+        /**
+         * A store keeping data of a successfully connected user over WS to the coordinator server.
+         */
+        this.connectedUserSubject = new BehaviorSubject(undefined);
+        /**
+         * A list of {@link Call} objects created/tracked by this client.
+         */
+        this.callsSubject = new BehaviorSubject([]);
+        /**
+         * Gets the current value of an observable, or undefined if the observable has
+         * not emitted a value yet.
+         *
+         * @param observable$ the observable to get the value from.
+         */
+        this.getCurrentValue = getCurrentValue;
+        /**
+         * Updates the value of the provided Subject.
+         * An `update` can either be a new value or a function which takes
+         * the current value and returns a new value.
+         *
+         * @param subject the subject to update.
+         * @param update the update to apply to the subject.
+         * @return the updated value.
+         */
+        this.setCurrentValue = setCurrentValue;
+        /**
+         * Sets the currently connected user.
+         *
+         * @internal
+         * @param user the user to set as connected.
+         */
+        this.setConnectedUser = (user) => {
+            return this.setCurrentValue(this.connectedUserSubject, user);
+        };
+        /**
+         * Sets the list of {@link Call} objects created/tracked by this client.
+         * @param calls
+         */
+        this.setCalls = (calls) => {
+            return this.setCurrentValue(this.callsSubject, calls);
+        };
+        /**
+         * Adds a {@link Call} object to the list of {@link Call} objects created/tracked by this client.
+         *
+         * @param call the call to add.
+         */
+        this.registerCall = (call) => {
+            if (!this.calls.find((c) => c.cid === call.cid)) {
+                this.setCalls((calls) => [...calls, call]);
+            }
+        };
+        /**
+         * Removes a {@link Call} object from the list of {@link Call} objects created/tracked by this client.
+         *
+         * @param call the call to remove
+         */
+        this.unregisterCall = (call) => {
+            return this.setCalls((calls) => calls.filter((c) => c !== call));
+        };
+        /**
+         * Finds a {@link Call} object in the list of {@link Call} objects created/tracked by this client.
+         *
+         * @param type the type of call to find.
+         * @param id the id of the call to find.
+         */
+        this.findCall = (type, id) => {
+            return this.calls.find((c) => c.type === type && c.id === id);
+        };
+        this.connectedUserSubject.subscribe(async (user) => {
+            // leave all calls when the user disconnects.
+            if (!user) {
+                const logger = getLogger(['client-state']);
+                for (const call of this.calls) {
+                    if (call.state.callingState === CallingState.LEFT)
+                        continue;
+                    logger('info', `User disconnected, leaving call: ${call.cid}`);
+                    await call.leave().catch((err) => {
+                        logger('error', `Error leaving call: ${call.cid}`, err);
+                    });
+                }
+            }
+        });
+    }
+    /**
+     * The currently connected user.
+     */
+    get connectedUser() {
+        return this.getCurrentValue(this.connectedUserSubject);
+    }
+    /**
+     * A list of {@link Call} objects created/tracked by this client.
+     */
+    get calls() {
+        return this.getCurrentValue(this.callsSubject);
+    }
+}
+/**
+ * A reactive store that exposes state variables in a reactive manner.
+ * You can subscribe to changes of the different state variables.
+ * This central store contains all the state variables related to [`StreamVideoClient`](./StreamVideClient.md) and [`Call`](./Call.md).
+ */
+class StreamVideoReadOnlyStateStore {
+    constructor(store) {
+        /**
+         * This method allows you the get the current value of a state variable.
+         *
+         * @param observable the observable to get the current value of.
+         * @returns the current value of the observable.
+         */
+        this.getCurrentValue = getCurrentValue;
+        // convert and expose subjects as observables
+        this.connectedUser$ = store.connectedUserSubject.asObservable();
+        this.calls$ = store.callsSubject.asObservable();
+    }
+    /**
+     * The current user connected over WS to the backend.
+     */
+    get connectedUser() {
+        return getCurrentValue(this.connectedUser$);
+    }
+    /**
+     * A list of {@link Call} objects created/tracked by this client.
+     */
+    get calls() {
+        return getCurrentValue(this.calls$);
+    }
+}
+
 /**
  * Event handler that watched the delivery of `call.accepted`.
  * Once the event is received, the call is joined.
@@ -9318,7 +9323,7 @@ const createStatsReporter = ({ subscriber, publisher, state, pollingIntervalInMs
 const transform = (report, opts) => {
     const { trackKind, kind } = opts;
     const direction = kind === 'subscriber' ? 'inbound-rtp' : 'outbound-rtp';
-    const stats = flatten(report);
+    const stats = flatten$1(report);
     const streams = stats
         .filter((stat) => stat.type === direction &&
         stat.kind === trackKind)
@@ -9413,7 +9418,7 @@ const aggregate = (stats) => {
  *
  * @param report the report to flatten.
  */
-const flatten = (report) => {
+const flatten$1 = (report) => {
     const stats = [];
     report.forEach((s) => {
         stats.push(s);
@@ -10755,7 +10760,7 @@ class MicrophoneManagerState extends InputMediaDeviceManagerState {
 }
 
 const DETECTION_FREQUENCY_IN_MS = 500;
-const AUDIO_LEVEL_THRESHOLD = 150;
+const AUDIO_LEVEL_THRESHOLD$1 = 150;
 const FFT_SIZE = 128;
 /**
  * Creates a new sound detector.
@@ -10766,7 +10771,7 @@ const FFT_SIZE = 128;
  * @returns a clean-up function which once invoked stops the sound detector.
  */
 const createSoundDetector = (audioStream, onSoundDetectedStateChanged, options = {}) => {
-    const { detectionFrequencyInMs = DETECTION_FREQUENCY_IN_MS, audioLevelThreshold = AUDIO_LEVEL_THRESHOLD, fftSize = FFT_SIZE, destroyStreamOnStop = true, } = options;
+    const { detectionFrequencyInMs = DETECTION_FREQUENCY_IN_MS, audioLevelThreshold = AUDIO_LEVEL_THRESHOLD$1, fftSize = FFT_SIZE, destroyStreamOnStop = true, } = options;
     const audioContext = new AudioContext();
     const analyser = audioContext.createAnalyser();
     analyser.fftSize = fftSize;
@@ -10805,6 +10810,99 @@ const createSoundDetector = (audioStream, onSoundDetectedStateChanged, options =
     };
 };
 
+/**
+ * Flatten the stats report into an array of stats objects.
+ *
+ * @param report the report to flatten.
+ */
+const flatten = (report) => {
+    const stats = [];
+    report.forEach((s) => {
+        stats.push(s);
+    });
+    return stats;
+};
+const AUDIO_LEVEL_THRESHOLD = 0.2;
+class RNSpeechDetector {
+    constructor() {
+        this.pc1 = new RTCPeerConnection({});
+        this.pc2 = new RTCPeerConnection({});
+    }
+    /**
+     * Starts the speech detection.
+     */
+    async start() {
+        try {
+            const audioStream = await navigator.mediaDevices.getUserMedia({
+                audio: true,
+            });
+            this.pc1.addEventListener('icecandidate', async (e) => {
+                await this.pc2.addIceCandidate(e.candidate);
+            });
+            this.pc2.addEventListener('icecandidate', async (e) => {
+                await this.pc1.addIceCandidate(e.candidate);
+            });
+            audioStream
+                .getTracks()
+                .forEach((track) => this.pc1.addTrack(track, audioStream));
+            const offer = await this.pc1.createOffer({});
+            await this.pc2.setRemoteDescription(offer);
+            await this.pc1.setLocalDescription(offer);
+            const answer = await this.pc2.createAnswer();
+            await this.pc1.setRemoteDescription(answer);
+            await this.pc2.setLocalDescription(answer);
+            const audioTracks = audioStream.getAudioTracks();
+            // We need to mute the audio track for this temporary stream, or else you will hear yourself twice while in the call.
+            audioTracks.forEach((track) => (track.enabled = false));
+        }
+        catch (error) {
+            console.error('Error connecting and negotiating between PeerConnections:', error);
+        }
+    }
+    /**
+     * Stops the speech detection and releases all allocated resources.
+     */
+    stop() {
+        this.pc1.close();
+        this.pc2.close();
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+        }
+    }
+    /**
+     * Public method that detects the audio levels and returns the status.
+     */
+    onSpeakingDetectedStateChange(onSoundDetectedStateChanged) {
+        this.intervalId = setInterval(async () => {
+            const stats = (await this.pc1.getStats());
+            const report = flatten(stats);
+            // Audio levels are present inside stats of type `media-source` and of kind `audio`
+            const audioMediaSourceStats = report.find((stat) => stat.type === 'media-source' &&
+                stat.kind === 'audio');
+            if (audioMediaSourceStats) {
+                const { audioLevel } = audioMediaSourceStats;
+                if (audioLevel) {
+                    if (audioLevel >= AUDIO_LEVEL_THRESHOLD) {
+                        onSoundDetectedStateChanged({
+                            isSoundDetected: true,
+                            audioLevel,
+                        });
+                    }
+                    else {
+                        onSoundDetectedStateChanged({
+                            isSoundDetected: false,
+                            audioLevel: 0,
+                        });
+                    }
+                }
+            }
+        }, 1000);
+        return () => {
+            clearInterval(this.intervalId);
+        };
+    }
+}
+
 class MicrophoneManager extends InputMediaDeviceManager {
     constructor(call) {
         super(call, new MicrophoneManagerState(), TrackType.AUDIO);
@@ -10846,20 +10944,31 @@ class MicrophoneManager extends InputMediaDeviceManager {
         return this.call.stopPublish(TrackType.AUDIO, stopTracks);
     }
     async startSpeakingWhileMutedDetection(deviceId) {
+        await this.stopSpeakingWhileMutedDetection();
         if (isReactNative()) {
-            return;
+            this.rnSpeechDetector = new RNSpeechDetector();
+            await this.rnSpeechDetector.start();
+            const unsubscribe = this.rnSpeechDetector?.onSpeakingDetectedStateChange((event) => {
+                this.state.setSpeakingWhileMuted(event.isSoundDetected);
+            });
+            this.soundDetectorCleanup = () => {
+                unsubscribe();
+                this.rnSpeechDetector?.stop();
+                this.rnSpeechDetector = undefined;
+            };
+        }
+        else {
+            // Need to start a new stream that's not connected to publisher
+            const stream = await this.getStream({
+                deviceId,
+            });
+            this.soundDetectorCleanup = createSoundDetector(stream, (event) => {
+                this.state.setSpeakingWhileMuted(event.isSoundDetected);
+            });
         }
-        await this.stopSpeakingWhileMutedDetection();
-        // Need to start a new stream that's not connected to publisher
-        const stream = await this.getStream({
-            deviceId,
-        });
-        this.soundDetectorCleanup = createSoundDetector(stream, (event) => {
-            this.state.setSpeakingWhileMuted(event.isSoundDetected);
-        });
     }
     async stopSpeakingWhileMutedDetection() {
-        if (isReactNative() || !this.soundDetectorCleanup) {
+        if (!this.soundDetectorCleanup) {
             return;
         }
         this.state.setSpeakingWhileMuted(false);
@@ -11811,9 +11920,10 @@ class Call {
             return this.state.setSortParticipantsBy(criteria);
         };
         /**
+         * Updates the list of video layers to publish.
+         *
          * @internal
-         * @param enabledRids
-         * @returns
+         * @param enabledLayers the list of layers to enable.
          */
         this.updatePublishQuality = async (enabledLayers) => {
             return this.publisher?.updateVideoPublishQuality(enabledLayers);
@@ -12085,35 +12195,29 @@ class Call {
         this.updateCallMembers = async (data) => {
             return this.streamClient.post(`${this.streamClientBasePath}/members`, data);
         };
+        /**
+         * Schedules an auto-drop timeout based on the call settings.
+         * Applicable only for ringing calls.
+         */
         this.scheduleAutoDrop = () => {
-            if (this.dropTimeout)
-                clearTimeout(this.dropTimeout);
-            const subscription = this.state.settings$
-                .pipe(pairwise(), tap(([prevSettings, currentSettings]) => {
-                if (!currentSettings || !this.clientStore.connectedUser)
+            clearTimeout(this.dropTimeout);
+            this.leaveCallHooks.add(createSubscription(this.state.settings$, (settings) => {
+                if (!settings)
                     return;
-                const isOutgoingCall = this.currentUserId === this.state.createdBy?.id;
-                const [prevTimeoutMs, timeoutMs] = isOutgoingCall
-                    ? [
-                        prevSettings?.ring.auto_cancel_timeout_ms,
-                        currentSettings.ring.auto_cancel_timeout_ms,
-                    ]
-                    : [
-                        prevSettings?.ring.incoming_call_timeout_ms,
-                        currentSettings.ring.incoming_call_timeout_ms,
-                    ];
-                if (typeof timeoutMs === 'undefined' ||
-                    timeoutMs === prevTimeoutMs ||
-                    timeoutMs === 0)
+                // ignore if the call is not ringing
+                if (this.state.callingState !== CallingState.RINGING)
                     return;
-                if (this.dropTimeout)
-                    clearTimeout(this.dropTimeout);
-                this.dropTimeout = setTimeout(() => this.leave(), timeoutMs);
-            }), takeWhile(() => !!this.clientStore.calls.find((call) => call.cid === this.cid)))
-                .subscribe();
-            this.leaveCallHooks.add(() => {
-                !subscription.closed && subscription.unsubscribe();
-            });
+                const timeoutInMs = settings.ring.auto_cancel_timeout_ms;
+                // 0 means no auto-drop
+                if (timeoutInMs <= 0)
+                    return;
+                clearTimeout(this.dropTimeout);
+                this.dropTimeout = setTimeout(() => {
+                    this.leave().catch((err) => {
+                        this.logger('error', 'Failed to drop call', err);
+                    });
+                }, timeoutInMs);
+            }));
         };
         /**
          * Retrieves the list of recordings for the current call or call session.
@@ -14037,7 +14141,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "0.5.0" ;
+            const version = "0.5.2" ;
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };