@stream-io/video-client 0.4.10 → 0.5.1

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [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)
+
+
+### ⚠ BREAKING CHANGES
+
+* **react-native:** move to webrtc 118 (#1197)
+
+### Features
+
+* **react-native:** move to webrtc 118 ([#1197](https://github.com/GetStream/stream-video-js/issues/1197)) ([8cdbe11](https://github.com/GetStream/stream-video-js/commit/8cdbe11de069fcb6eae5643f5cef5c9612f6c805))
+
 ### [0.4.10](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.4.9...@stream-io/video-client-0.4.10) (2023-11-27)
 
 

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

@@ -5829,6 +5829,15 @@ const createSignalClient = (options) => {
     return new SignalServerClient(transport);
 };
 
+/**
+ * Checks whether we are using React Native
+ */
+const isReactNative = () => {
+    if (typeof navigator === 'undefined')
+        return false;
+    return navigator.product?.toLowerCase() === 'reactnative';
+};
+
 // log levels, sorted by verbosity
 const logLevels = Object.freeze({
     trace: 0,
@@ -5846,6 +5855,11 @@ const logToConsole = (logLevel, message, ...args) => {
             logMethod = console.error;
             break;
         case 'warn':
+            if (isReactNative()) {
+                message = `WARN: ${message}`;
+                logMethod = console.info;
+                break;
+            }
             logMethod = console.warn;
             break;
         case 'info':
@@ -6032,15 +6046,6 @@ function getIceCandidate(candidate) {
     }
 }
 
-/**
- * Checks whether we are using React Native
- */
-const isReactNative = () => {
-    if (typeof navigator === 'undefined')
-        return false;
-    return navigator.product?.toLowerCase() === 'reactnative';
-};
-
 let sdkInfo;
 let osInfo;
 let deviceInfo;
@@ -9313,7 +9318,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)
@@ -9408,7 +9413,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);
@@ -10750,7 +10755,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.
@@ -10761,7 +10766,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;
@@ -10800,6 +10805,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);
@@ -10841,20 +10939,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);
@@ -14032,7 +14141,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "0.4.10" ;
+            const version = "0.5.1" ;
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };