@stream-io/video-client 0.6.7 → 0.6.8

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.6.8](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.6.7...@stream-io/video-client-0.6.8) (2024-04-05)
+
+
+### Features
+
+* **react:** Support for Background Filters and Background Blurring ([#1283](https://github.com/GetStream/stream-video-js/issues/1283)) ([f790ee7](https://github.com/GetStream/stream-video-js/commit/f790ee78c20fb0f5266e429a777d8bb7ef158c83)), closes [#1271](https://github.com/GetStream/stream-video-js/issues/1271) [#1276](https://github.com/GetStream/stream-video-js/issues/1276)
+
 ### [0.6.7](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.6.6...@stream-io/video-client-0.6.7) (2024-04-02)
 
 

package/dist/index.browser.es.js

@@ -5802,7 +5802,7 @@ class SignalServerClient {
 const defaultOptions = {
     baseUrl: '',
     sendJson: true,
-    timeout: 5 * 1000,
+    timeout: 5 * 1000, // ms.
     jsonOptions: {
         ignoreUnknownFields: true,
     },
@@ -6208,7 +6208,7 @@ const findOptimalScreenSharingLayers = (videoTrack, preferences) => {
     return [
         {
             active: true,
-            rid: 'q',
+            rid: 'q', // single track, start from 'q'
             width: settings.width || 0,
             height: settings.height || 0,
             scaleResolutionDownBy: 1,
@@ -7061,9 +7061,14 @@ class CallState {
         this.thumbnails$ = this.thumbnailsSubject.asObservable();
         this.eventHandlers = {
             // these events are not updating the call state:
+            'call.closed_caption': undefined,
             'call.permission_request': undefined,
             'call.recording_failed': undefined,
             'call.recording_ready': undefined,
+            'call.transcription_started': undefined,
+            'call.transcription_stopped': undefined,
+            'call.transcription_ready': undefined,
+            'call.transcription_failed': undefined,
             'call.user_muted': undefined,
             'connection.error': undefined,
             'connection.ok': undefined,
@@ -9896,7 +9901,6 @@ class DynascaleManager {
                         // play audio through the system's default device
                         const { selectedDevice } = this.call.speaker.state;
                         if (selectedDevice && 'setSinkId' in audioElement) {
-                            // @ts-expect-error setSinkId is not yet in the lib
                             audioElement.setSinkId(selectedDevice);
                         }
                     }
@@ -9906,7 +9910,6 @@ class DynascaleManager {
                 ? null
                 : this.call.speaker.state.selectedDevice$.subscribe((deviceId) => {
                     if (deviceId) {
-                        // @ts-expect-error setSinkId is not yet in the lib
                         audioElement.setSinkId(deviceId);
                     }
                 });
@@ -10306,8 +10309,14 @@ class InputMediaDeviceManager {
         this.stopOnLeave = true;
         this.subscriptions = [];
         this.isTrackStoppedDueToTrackEnd = false;
-        this.removeSubscriptions = () => {
-            this.subscriptions.forEach((s) => s.unsubscribe());
+        this.filters = [];
+        /**
+         * Disposes the manager.
+         *
+         * @internal
+         */
+        this.dispose = () => {
+            this.subscriptions.forEach((s) => s());
         };
         this.logger = getLogger([`${TrackType[trackType].toLowerCase()} manager`]);
         if (deviceIds$ &&
@@ -10384,6 +10393,23 @@ class InputMediaDeviceManager {
             return this.enable();
         }
     }
+    /**
+     * Registers a filter that will be applied to the stream.
+     *
+     * The registered filter will get the existing stream, and it should return
+     * a new stream with the applied filter.
+     *
+     * @param filter the filter to register.
+     * @returns a function that will unregister the filter.
+     */
+    async registerFilter(filter) {
+        this.filters.push(filter);
+        await this.applySettingsToStream();
+        return async () => {
+            this.filters = this.filters.filter((f) => f !== filter);
+            await this.applySettingsToStream();
+        };
+    }
     /**
      * Will set the default constraints for the device.
      *
@@ -10479,7 +10505,62 @@ class InputMediaDeviceManager {
                 ...defaultConstraints,
                 deviceId: this.state.selectedDevice,
             };
-            stream = await this.getStream(constraints);
+            /**
+             * Chains two media streams together.
+             *
+             * In our case, filters MediaStreams are derived from their parent MediaStream.
+             * However, once a child filter's track is stopped,
+             * the tracks of the parent MediaStream aren't automatically stopped.
+             * This leads to a situation where the camera indicator light is still on
+             * even though the user stopped publishing video.
+             *
+             * This function works around this issue by stopping the parent MediaStream's tracks
+             * as well once the child filter's tracks are stopped.
+             *
+             * It works by patching the stop() method of the child filter's tracks to also stop
+             * the parent MediaStream's tracks of the same type. Here we assume that
+             * the parent MediaStream has only one track of each type.
+             *
+             * @param parentStream the parent MediaStream. Omit for the root stream.
+             */
+            const chainWith = (parentStream) => async (filterStream) => {
+                if (!parentStream)
+                    return filterStream;
+                // TODO OL: take care of track.enabled property as well
+                const parent = await parentStream;
+                filterStream.getTracks().forEach((track) => {
+                    const originalStop = track.stop;
+                    track.stop = function stop() {
+                        originalStop.call(track);
+                        parent.getTracks().forEach((parentTrack) => {
+                            if (parentTrack.kind === track.kind) {
+                                parentTrack.stop();
+                            }
+                        });
+                    };
+                });
+                parent.getTracks().forEach((parentTrack) => {
+                    // When the parent stream abruptly ends, we propagate the event
+                    // to the filter stream.
+                    // This usually happens when the camera/microphone permissions
+                    // are revoked or when the device is disconnected.
+                    const handleParentTrackEnded = () => {
+                        filterStream.getTracks().forEach((track) => {
+                            if (parentTrack.kind !== track.kind)
+                                return;
+                            track.stop();
+                            track.dispatchEvent(new Event('ended')); // propagate the event
+                        });
+                    };
+                    parentTrack.addEventListener('ended', handleParentTrackEnded);
+                    this.subscriptions.push(() => {
+                        parentTrack.removeEventListener('ended', handleParentTrackEnded);
+                    });
+                });
+                return filterStream;
+            };
+            // we publish the last MediaStream of the chain
+            stream = await this.filters.reduce((parent, filter) => parent.then(filter).then(chainWith(parent)), this.getStream(constraints));
         }
         if (this.call.state.callingState === CallingState.JOINED) {
             await this.publishStream(stream);
@@ -10515,10 +10596,10 @@ class InputMediaDeviceManager {
         return '';
     }
     handleDisconnectedOrReplacedDevices() {
-        this.subscriptions.push(combineLatest([
+        this.subscriptions.push(createSubscription(combineLatest([
             deviceIds$.pipe(pairwise()),
             this.state.selectedDevice$,
-        ]).subscribe(async ([[prevDevices, currentDevices], deviceId]) => {
+        ]), async ([[prevDevices, currentDevices], deviceId]) => {
             if (!deviceId) {
                 return;
             }
@@ -11282,7 +11363,12 @@ class SpeakerManager {
     constructor(call) {
         this.state = new SpeakerState();
         this.subscriptions = [];
-        this.removeSubscriptions = () => {
+        /**
+         * Disposes the manager.
+         *
+         * @internal
+         */
+        this.dispose = () => {
             this.subscriptions.forEach((s) => s.unsubscribe());
         };
         this.call = call;
@@ -11477,10 +11563,10 @@ class Call {
             // Call all leave call hooks, e.g. to clean up global event handlers
             this.leaveCallHooks.forEach((hook) => hook());
             this.clientStore.unregisterCall(this);
-            this.camera.removeSubscriptions();
-            this.microphone.removeSubscriptions();
-            this.screenShare.removeSubscriptions();
-            this.speaker.removeSubscriptions();
+            this.camera.dispose();
+            this.microphone.dispose();
+            this.screenShare.dispose();
+            this.speaker.dispose();
             const stopOnLeavePromises = [];
             if (this.camera.stopOnLeave) {
                 stopOnLeavePromises.push(this.camera.disable(true));
@@ -12282,6 +12368,20 @@ class Call {
         this.stopRecording = async () => {
             return this.streamClient.post(`${this.streamClientBasePath}/stop_recording`, {});
         };
+        /**
+         * Starts the transcription of the call.
+         *
+         * @param request the request data.
+         */
+        this.startTranscription = async (request) => {
+            return this.streamClient.post(`${this.streamClientBasePath}/start_transcription`, request);
+        };
+        /**
+         * Stops the transcription of the call.
+         */
+        this.stopTranscription = async () => {
+            return this.streamClient.post(`${this.streamClientBasePath}/stop_transcription`);
+        };
         /**
          * Sends a `call.permission_request` event to all users connected to the call. The call settings object contains infomration about which permissions can be requested during a call (for example a user might be allowed to request permission to publish audio, but not video).
          */
@@ -12490,6 +12590,14 @@ class Call {
             }
             return this.streamClient.get(`${endpoint}/recordings`);
         };
+        /**
+         * Retrieves the list of transcriptions for the current call.
+         *
+         * @returns the list of transcriptions.
+         */
+        this.queryTranscriptions = async () => {
+            return this.streamClient.get(`${this.streamClientBasePath}/transcriptions`);
+        };
         /**
          * Retrieve call statistics for a particular call session (historical).
          * Here `callSessionID` is mandatory.
@@ -13557,7 +13665,7 @@ function UserFromToken(token) {
  */
 function DevToken(userId) {
     return [
-        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9',
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9', //{"alg": "HS256", "typ": "JWT"}
         encodeBase64(JSON.stringify({ user_id: userId })),
         'devtoken', // hardcoded signature
     ].join('.');
@@ -14369,7 +14477,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "0.6.7" ;
+            const version = "0.6.8" ;
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };
@@ -14484,7 +14592,7 @@ class StreamClient {
         }
         this.options = {
             timeout: 5000,
-            withCredentials: false,
+            withCredentials: false, // making sure cookies are not sent
             warmUp: false,
             ...inputOptions,
         };