livekit-client 2.22.2 → 2.22.4

package/src/room/participant/publishUtils.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 import { ScreenSharePresets, VideoPreset, VideoPresets, VideoPresets43 } from '../track/options';
 import {
   computeDefaultScreenShareSimulcastPresets,
+  computeStartTargetBitrate,
   computeVideoEncodings,
   determineAppropriateEncoding,
   presets43,
@@ -116,6 +117,78 @@ describe('computeVideoEncodings', () => {
     expect(encodings![0].scaleResolutionDownBy).toBe(1);
   });
 
+  // svc carries the scalabilityMode on the first encoding only (whether it emits a
+  // single encoding or the legacy multi-encoding shape), simulcast carries it on all
+  const countScalabilityModes = (encodings?: RTCRtpEncodingParameters[]) =>
+    /* @ts-ignore */
+    encodings!.filter((encoding) => encoding.scalabilityMode !== undefined).length;
+
+  it('keeps svc for an svc codec without simulcast', () => {
+    const encodings = computeVideoEncodings(false, 960, 540, {
+      simulcast: false,
+      videoCodec: 'vp9',
+      scalabilityMode: 'L3T3_KEY',
+    });
+    /* @ts-ignore */
+    expect(encodings![0].scalabilityMode).toBe('L3T3_KEY');
+    expect(countScalabilityModes(encodings)).toBe(1);
+  });
+
+  it('keeps svc for an svc codec with a multi spatial layer mode even if simulcast is set', () => {
+    const encodings = computeVideoEncodings(false, 960, 540, {
+      simulcast: true,
+      videoCodec: 'vp9',
+      scalabilityMode: 'L3T3_KEY',
+    });
+    /* @ts-ignore */
+    expect(encodings![0].scalabilityMode).toBe('L3T3_KEY');
+    expect(countScalabilityModes(encodings)).toBe(1);
+  });
+
+  it('returns a simulcast ladder for an svc codec with simulcast and an L1Tx mode', () => {
+    for (const videoCodec of ['vp9', 'av1'] as const) {
+      const encodings = computeVideoEncodings(false, 960, 540, {
+        simulcast: true,
+        videoCodec,
+        scalabilityMode: 'L1T2',
+      });
+      expect(encodings).toHaveLength(3);
+      expect(encodings!.map((e) => e.rid)).toEqual(['q', 'h', 'f']);
+      // every encoding needs both scalabilityMode and scaleResolutionDownBy for chrome
+      // M113+ to treat them as real simulcast rather than legacy svc
+      encodings!.forEach((encoding) => {
+        /* @ts-ignore */
+        expect(encoding.scalabilityMode).toBe('L1T2');
+        expect(encoding.scaleResolutionDownBy).toBeGreaterThanOrEqual(1);
+      });
+    }
+  });
+
+  it('sets the scalability mode on a single encoding svc simulcast ladder', () => {
+    const encodings = computeVideoEncodings(false, 100, 120, {
+      simulcast: true,
+      videoCodec: 'vp9',
+      scalabilityMode: 'L1T3',
+    });
+    expect(encodings).toHaveLength(1);
+    expect(encodings![0].rid).toBe('q');
+    /* @ts-ignore */
+    expect(encodings![0].scalabilityMode).toBe('L1T3');
+  });
+
+  it('does not set a scalability mode for non-svc simulcast', () => {
+    const encodings = computeVideoEncodings(false, 960, 540, {
+      simulcast: true,
+      videoCodec: 'vp8',
+      scalabilityMode: 'L1T2',
+    });
+    expect(encodings).toHaveLength(3);
+    encodings!.forEach((encoding) => {
+      /* @ts-ignore */
+      expect(encoding.scalabilityMode).toBeUndefined();
+    });
+  });
+
   //   it('respects default backup codec encoding', () => {
   //     const vp8Encodings = computeTrackBackupEncodings(false, 100, 120, { simulcast: true });
   //     const h264Encodings = computeVideoEncodings(false, 100, 120, {
@@ -193,3 +266,63 @@ describe('screenShareSimulcastDefaults', () => {
     expect(defaultSimulcastLayers[0].encoding.maxBitrate).toBe(375000);
   });
 });
+
+describe('computeStartTargetBitrate', () => {
+  // ordered q..f, as encodingsFromPresets builds them
+  const simulcastLadder: RTCRtpEncodingParameters[] = [
+    { rid: 'q', maxBitrate: 160_000 },
+    { rid: 'h', maxBitrate: 450_000 },
+    { rid: 'f', maxBitrate: 680_000 },
+  ];
+
+  it('sums the ladder for plain simulcast', () => {
+    expect(computeStartTargetBitrate('vp8', { simulcast: true }, simulcastLadder)).toBe(1_290_000);
+  });
+
+  it('sums the ladder for vp9/av1 published as rid simulcast', () => {
+    // encodings[0] is the *smallest* layer here, so taking it would under-hint BWE
+    for (const codec of ['vp9', 'av1'] as const) {
+      expect(
+        computeStartTargetBitrate(
+          codec,
+          { simulcast: true, videoCodec: codec, scalabilityMode: 'L1T2' },
+          simulcastLadder,
+        ),
+      ).toBe(1_290_000);
+    }
+  });
+
+  it('uses the single encoding for vp9/av1 svc', () => {
+    for (const codec of ['vp9', 'av1'] as const) {
+      expect(
+        computeStartTargetBitrate(
+          codec,
+          { simulcast: false, videoCodec: codec, scalabilityMode: 'L3T3_KEY' },
+          [{ maxBitrate: 680_000 }],
+        ),
+      ).toBe(680_000);
+    }
+  });
+
+  it('uses the first encoding for the legacy svc shape, which is ordered f..q', () => {
+    // legacy SVC pushes videoRids[2 - i], so encodings[0] carries the full bitrate
+    const legacySvc: RTCRtpEncodingParameters[] = [
+      { rid: 'f', maxBitrate: 680_000 },
+      { rid: 'h', maxBitrate: 226_667 },
+      { rid: 'q', maxBitrate: 75_556 },
+    ];
+    expect(
+      computeStartTargetBitrate(
+        'vp9',
+        { simulcast: false, videoCodec: 'vp9', scalabilityMode: 'L3T3_KEY' },
+        legacySvc,
+      ),
+    ).toBe(680_000);
+  });
+
+  it('handles missing bitrates and empty encodings', () => {
+    expect(computeStartTargetBitrate('vp8', { simulcast: true }, [])).toBe(0);
+    expect(computeStartTargetBitrate('vp9', undefined, [])).toBe(0);
+    expect(computeStartTargetBitrate('vp8', { simulcast: true }, [{ rid: 'q' }])).toBe(0);
+  });
+});

package/src/room/participant/publishUtils.ts

@@ -13,12 +13,12 @@ import type {
 import { ScreenSharePresets, VideoPreset, VideoPresets, VideoPresets43 } from '../track/options';
 import type { LoggerOptions } from '../types';
 import {
-  compareVersions,
   getReactNativeOs,
   isReactNative,
   isSVCCodec,
-  isSafariBased,
+  isSVCSimulcast,
   isSafariSvcApi,
+  usesLegacySVCEncodings,
 } from '../utils';
 
 /** @internal */
@@ -74,25 +74,6 @@ export const computeDefaultScreenShareSimulcastPresets = (fromPreset: VideoPrese
   );
 };
 
-// /**
-//  *
-//  * @internal
-//  * @experimental
-//  */
-// const computeDefaultMultiCodecSimulcastEncodings = (width: number, height: number) => {
-//   // use vp8 as a default
-//   const vp8 = determineAppropriateEncoding(false, width, height);
-//   const vp9 = { ...vp8, maxBitrate: vp8.maxBitrate * 0.9 };
-//   const h264 = { ...vp8, maxBitrate: vp8.maxBitrate * 1.1 };
-//   const av1 = { ...vp8, maxBitrate: vp8.maxBitrate * 0.7 };
-//   return {
-//     vp8,
-//     vp9,
-//     h264,
-//     av1,
-//   };
-// };
-
 const videoRids = ['q', 'h', 'f'];
 
 /* @internal */
@@ -111,6 +92,8 @@ export function computeVideoEncodings(
   const useSimulcast = options?.simulcast;
   const scalabilityMode = options?.scalabilityMode;
   const videoCodec = options?.videoCodec;
+  // VP9/AV1 published as rid based simulcast rather than SVC, see isSVCSimulcast
+  const useSVCSimulcast = isSVCSimulcast(videoCodec, options);
 
   if ((!videoEncoding && !useSimulcast && !scalabilityMode) || !width || !height) {
     // when we aren't simulcasting or svc, will need to return a single encoding without
@@ -134,7 +117,7 @@ export function computeVideoEncodings(
     videoEncoding.priority,
   );
 
-  if (scalabilityMode && isSVCCodec(videoCodec)) {
+  if (scalabilityMode && isSVCCodec(videoCodec) && !useSVCSimulcast) {
     const sm = new ScalabilityMode(scalabilityMode);
 
     const encodings: RTCRtpEncodingParameters[] = [];
@@ -142,20 +125,10 @@ export function computeVideoEncodings(
     if (sm.spatial > 3) {
       throw new Error(`unsupported scalabilityMode: ${scalabilityMode}`);
     }
-    // Before M113 in Chrome, defining multiple encodings with an SVC codec indicated
-    // that SVC mode should be used. Safari still works this way.
-    // This is a bit confusing but is due to how libwebrtc interpreted the encodings field
-    // before M113.
-    // Announced here: https://groups.google.com/g/discuss-webrtc/c/-QQ3pxrl-fw?pli=1
+    // Browsers that read multiple encodings on an SVC codec as SVC rather than as
+    // simulcast, see usesLegacySVCEncodings
     const browser = getBrowser();
-    if (
-      isSafariBased() ||
-      // Even tho RN runs M114, it does not produce SVC layers when a single encoding
-      // is provided. So we'll use the legacy SVC specification for now.
-      // TODO: when we upstream libwebrtc, this will need additional verification
-      isReactNative() ||
-      (browser?.name === 'Chrome' && compareVersions(browser?.version, '113') < 0)
-    ) {
+    if (usesLegacySVCEncodings()) {
       const bitratesRatio = sm.suffix == 'h' ? 2 : 3;
       // safari 18.4 uses a different svc API that requires scaleResolutionDownBy to be set.
       const requireScale = isSafariSvcApi(browser);
@@ -193,6 +166,19 @@ export function computeVideoEncodings(
     return [videoEncoding];
   }
 
+  // Chrome M113+ only treats multiple encodings on an SVC capable codec as real
+  // simulcast when every encoding carries an explicit scalabilityMode next to its
+  // scaleResolutionDownBy. Without it the encodings are interpreted as legacy SVC.
+  const applySVCSimulcastMode = (encodings: RTCRtpEncodingParameters[]) => {
+    if (useSVCSimulcast) {
+      encodings.forEach((encoding) => {
+        /* @ts-ignore */
+        encoding.scalabilityMode = scalabilityMode;
+      });
+    }
+    return encodings;
+  };
+
   let presets: Array<VideoPreset>;
   if (isScreenShare) {
     presets =
@@ -220,13 +206,43 @@ export function computeVideoEncodings(
     //      based on other conditions.
     const size = Math.max(width, height);
     if (size >= 960 && midPreset) {
-      return encodingsFromPresets(width, height, [lowPreset, midPreset, original], sourceFramerate);
+      return applySVCSimulcastMode(
+        encodingsFromPresets(width, height, [lowPreset, midPreset, original], sourceFramerate),
+      );
     }
     if (size >= 480) {
-      return encodingsFromPresets(width, height, [lowPreset, original], sourceFramerate);
+      return applySVCSimulcastMode(
+        encodingsFromPresets(width, height, [lowPreset, original], sourceFramerate),
+      );
     }
   }
-  return encodingsFromPresets(width, height, [original]);
+  return applySVCSimulcastMode(encodingsFromPresets(width, height, [original]));
+}
+
+/**
+ * Bitrate to hint to the bandwidth estimator through `x-google-start-bitrate`, so that
+ * a publish does not spend its first seconds ramping up from a very low rate.
+ *
+ * It has to be the total the encoder will put on the wire, which means picking the
+ * encoding that carries the inclusive bitrate:
+ *  - SVC publishes a single stream with the layers built in. `encodings[0]` holds the
+ *    full bitrate — the legacy SVC shape orders its encodings `f`..`q`, so that holds
+ *    for both SVC shapes.
+ *  - Simulcast publishes independent streams ordered `q`..`f`, so the total is the sum.
+ *    This includes VP9/AV1 published as rid based simulcast, where `encodings[0]` is
+ *    the *smallest* layer even though the codec is SVC capable.
+ *
+ * @internal
+ */
+export function computeStartTargetBitrate(
+  codec: string,
+  options: TrackPublishOptions | undefined,
+  encodings: RTCRtpEncodingParameters[],
+): number {
+  if (isSVCCodec(codec) && !isSVCSimulcast(codec, options)) {
+    return encodings[0]?.maxBitrate ?? 0;
+  }
+  return encodings.reduce((sum, enc) => sum + (enc.maxBitrate ?? 0), 0);
 }
 
 export function computeTrackBackupEncodings(

package/src/room/rpc/client/RpcClientManager.test.ts

@@ -255,6 +255,57 @@ describe('RpcClientManager', () => {
       }
     });
 
+    it('cleans up a failed v2 publish without a later ack timeout', async () => {
+      vi.useFakeTimers();
+
+      try {
+        sendTextMock.mockRejectedValue(new Error('engine closed'));
+        await expect(
+          rpcClientManager.performRpc({
+            destinationIdentity: 'remote-identity',
+            method: 'test-method',
+            payload: 'test-payload',
+          }),
+        ).rejects.toThrow('engine closed');
+
+        expect(vi.getTimerCount()).toBe(0);
+        expect((rpcClientManager as any).pendingAcks.size).toBe(0);
+        expect((rpcClientManager as any).pendingResponses.size).toBe(0);
+        await vi.advanceTimersByTimeAsync(7001);
+        // An unhandled rejection from completionFuture would also fail Vitest.
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+
+    it('handles an ack timeout while a v2 publish is still pending', async () => {
+      vi.useFakeTimers();
+
+      try {
+        let resolveSend!: () => void;
+        sendTextMock.mockReturnValue(
+          new Promise<void>((resolve) => {
+            resolveSend = resolve;
+          }),
+        );
+        const performRpcPromise = rpcClientManager.performRpc({
+          destinationIdentity: 'remote-identity',
+          method: 'test-method',
+          payload: 'test-payload',
+        });
+
+        await vi.advanceTimersByTimeAsync(7001);
+        resolveSend();
+        const [, completionPromise] = await performRpcPromise;
+        await expect(completionPromise).rejects.toThrow(/Connection timeout/i);
+        expect(vi.getTimerCount()).toBe(0);
+        expect((rpcClientManager as any).pendingAcks.size).toBe(0);
+        expect((rpcClientManager as any).pendingResponses.size).toBe(0);
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+
     it('should handle a v2 RPC error response', async () => {
       const errorCode = 101;
       const errorMessage = 'Test error message';

package/src/room/rpc/client/RpcClientManager.ts

@@ -108,22 +108,13 @@ export default class RpcClientManager extends (EventEmitter as new () => TypedEm
       participantIdentity: destinationIdentity,
     });
 
-    await this.publishRpcRequest(
-      destinationIdentity,
-      id,
-      method,
-      payload,
-      effectiveTimeoutMs,
-      remoteClientProtocol,
-    );
-
-    responseTimeoutId = setTimeout(() => {
-      this.pendingResponses.delete(id);
-      completionFuture.reject?.(RpcError.builtIn('RESPONSE_TIMEOUT'));
-    }, responseTimeoutMs);
-
+    // Observe the future before publishing: a slow send can outlast the ack timer.
+    // Keep the returned promise rejected for callers, while marking its rejection
+    // handled until performRpc has finished publishing and can return it.
     const completionPromise = completionFuture.promise.finally(() => {
-      clearTimeout(responseTimeoutId);
+      if (responseTimeoutId !== null) {
+        clearTimeout(responseTimeoutId);
+      }
 
       if (this.pendingAcks.has(id)) {
         this.log.warn('RPC response received before ack', id);
@@ -131,6 +122,32 @@ export default class RpcClientManager extends (EventEmitter as new () => TypedEm
         clearTimeout(ackTimeoutId);
       }
     });
+    completionPromise.catch(() => {});
+
+    try {
+      await this.publishRpcRequest(
+        destinationIdentity,
+        id,
+        method,
+        payload,
+        effectiveTimeoutMs,
+        remoteClientProtocol,
+      );
+    } catch (e) {
+      // The caller receives the publish error. Do not leave an ack timer that
+      // later rejects a future the caller never received.
+      clearTimeout(ackTimeoutId);
+      this.pendingAcks.delete(id);
+      this.pendingResponses.delete(id);
+      throw e;
+    }
+
+    if (this.pendingResponses.has(id)) {
+      responseTimeoutId = setTimeout(() => {
+        this.pendingResponses.delete(id);
+        completionFuture.reject?.(RpcError.builtIn('RESPONSE_TIMEOUT'));
+      }, responseTimeoutMs);
+    }
 
     return [id, completionPromise];
   }

package/src/room/track/LocalTrack.ts

@@ -5,12 +5,13 @@ import { debounce } from '../debounce';
 import { DeviceUnsupportedError, TrackInvalidError } from '../errors';
 import { TrackEvent } from '../events';
 import type { LoggerOptions } from '../types';
-import { compareVersions, isMobile, sleep, unwrapConstraint } from '../utils';
+import { compareVersions, isAppleMobile, isMobile, sleep, unwrapConstraint } from '../utils';
 import { Track, attachToElement, detachTrack } from './Track';
 import type { VideoCodec } from './options';
 import type { TrackProcessor } from './processor/types';
 import { LocalTrackRecorder, isRecordingSupported } from './record';
 import type { ReplaceTrackOptions } from './types';
+import { waitForFirstVideoFrame } from './utils';
 
 const DEFAULT_DIMENSIONS_TIMEOUT = 1000;
 const PRE_CONNECT_BUFFER_TIMEOUT = 10_000;
@@ -224,18 +225,28 @@ export default abstract class LocalTrack<
       throw new Error('cannot get dimensions for audio tracks');
     }
 
-    if (getBrowser()?.os === 'iOS') {
-      // browsers report wrong initial resolution on iOS.
-      // when slightly delaying the call to .getSettings(), the correct resolution is being reported
-      await sleep(10);
+    const started = Date.now();
+
+    if (isAppleMobile()) {
+      // iOS and iPadOS keep reporting the camera's sensor frame from getSettings() until the
+      // camera has delivered its first picture, so a portrait capture initially reads as
+      // landscape. Wait for that first frame instead of guessing at a delay.
+      // Gated to the Apple capture pipeline rather than run everywhere: elsewhere getSettings() is
+      // already right and the first frame can be hundreds of milliseconds out (measured ~500ms on
+      // macOS Safari), which would be pure added publish latency.
+      // https://github.com/livekit/client-sdk-js/issues/2099
+      // https://github.com/livekit/client-sdk-js/issues/2107
+      await waitForFirstVideoFrame(this._mediaStreamTrack, timeout, this.attachedElements);
     }
 
-    const started = Date.now();
-    while (Date.now() - started < timeout) {
+    while (true) {
       const dims = this.dimensions;
       if (dims) {
         return dims;
       }
+      if (Date.now() - started >= timeout) {
+        break;
+      }
       await sleep(50);
     }
     throw new TrackInvalidError('unable to get track dimensions after timeout');

package/src/room/track/LocalVideoTrack.ts

@@ -16,7 +16,7 @@ import {
 import type { VideoSenderStats } from '../stats';
 import { computeBitrate, monitorFrequency } from '../stats';
 import type { LoggerOptions } from '../types';
-import { isFireFox, isMobile, isSVCCodec, isWeb } from '../utils';
+import { isFireFox, isMobile, isSVCCodec, isSVCSimulcast, isWeb } from '../utils';
 import LocalTrack from './LocalTrack';
 import { Track, VideoQuality } from './Track';
 import type { TrackPublishOptions, VideoCaptureOptions, VideoCodec } from './options';
@@ -243,6 +243,16 @@ export default class LocalVideoTrack extends LocalTrack<Track.Kind.Video> {
     return items;
   }
 
+  /**
+   * Whether `codec` is being published as SVC (a single stream carrying all spatial
+   * layers) as opposed to rid based simulcast. VP9/AV1 are SVC unless the publisher
+   * opted into simulcast, in which case each rid is an independent stream and the
+   * layers can be enabled/disabled individually.
+   */
+  private isSvcPublish(codec?: string): boolean {
+    return isSVCCodec(codec) && !isSVCSimulcast(codec, this.publishOptions);
+  }
+
   setPublishingQuality(maxQuality: VideoQuality) {
     const qualities: SubscribedQuality[] = [];
     for (let q = VideoQuality.LOW; q <= VideoQuality.HIGH; q += 1) {
@@ -254,7 +264,7 @@ export default class LocalVideoTrack extends LocalTrack<Track.Kind.Video> {
       );
     }
     this.log.debug(`setting publishing quality. max quality ${maxQuality}`, this.logContext);
-    this.setPublishingLayers(isSVCCodec(this.codec), qualities);
+    this.setPublishingLayers(this.isSvcPublish(this.codec), qualities);
   }
 
   async restartTrack(options?: VideoCaptureOptions) {
@@ -472,12 +482,19 @@ export default class LocalVideoTrack extends LocalTrack<Track.Kind.Video> {
     // browser will reenable disabled codec/layers after new codec has been published,
     // so refresh subscribedCodecs after publish a new codec
     setTimeout(() => {
-      if (this.subscribedCodecs) {
-        this.setPublishingCodecs(this.subscribedCodecs);
-      }
+      this.refreshSubscribedCodecs();
     }, refreshSubscribedCodecAfterNewCodec);
   }
 
+  /** @interal */
+  async refreshSubscribedCodecs() {
+    if (this.subscribedCodecs) {
+      return this.setPublishingCodecs(this.subscribedCodecs).catch((e) =>
+        this.log.warn(`failed to refresh codec for track`, { ...this.logContext, error: e }),
+      );
+    }
+  }
+
   /**
    * @internal
    * Sets codecs that should be publishing, returns new codecs that have not yet
@@ -491,7 +508,7 @@ export default class LocalVideoTrack extends LocalTrack<Track.Kind.Video> {
     });
     // only enable simulcast codec for preference codec setted
     if (!this.codec && codecs.length > 0) {
-      await this.setPublishingLayers(isSVCCodec(codecs[0].codec), codecs[0].qualities);
+      await this.setPublishingLayers(this.isSvcPublish(codecs[0].codec), codecs[0].qualities);
 
       return [];
     }
@@ -501,7 +518,7 @@ export default class LocalVideoTrack extends LocalTrack<Track.Kind.Video> {
     const newCodecs: VideoCodec[] = [];
     for await (const codec of codecs) {
       if (!this.codec || this.codec === codec.codec) {
-        await this.setPublishingLayers(isSVCCodec(codec.codec), codec.qualities);
+        await this.setPublishingLayers(this.isSvcPublish(codec.codec), codec.qualities);
       } else {
         const simulcastCodecInfo = this.simulcastCodecs.get(codec.codec as VideoCodec);
         this.log.debug(`try setPublishingCodec for ${codec.codec}`, {
@@ -522,7 +539,7 @@ export default class LocalVideoTrack extends LocalTrack<Track.Kind.Video> {
             simulcastCodecInfo.encodings!,
             codec.qualities,
             this.senderLock,
-            isSVCCodec(codec.codec),
+            this.isSvcPublish(codec.codec),
             this.log,
             this.logContext,
           );

package/src/room/track/RemoteAudioTrack.ts

@@ -60,7 +60,7 @@ export default class RemoteAudioTrack extends RemoteTrack<Track.Kind.Audio> {
    * gets the volume of attached audio elements (loudest)
    */
   getVolume(): number {
-    if (this.elementVolume) {
+    if (this.elementVolume !== undefined) {
       return this.elementVolume;
     }
     if (isReactNative()) {
@@ -115,7 +115,7 @@ export default class RemoteAudioTrack extends RemoteTrack<Track.Kind.Audio> {
       element.muted = true;
     }
 
-    if (this.elementVolume) {
+    if (this.elementVolume !== undefined) {
       // make sure volume setting is being applied to the newly attached element
       this.setVolume(this.elementVolume);
     }
@@ -191,7 +191,7 @@ export default class RemoteAudioTrack extends RemoteTrack<Track.Kind.Audio> {
     lastNode.connect(this.gainNode);
     this.gainNode.connect(context.destination);
 
-    if (this.elementVolume) {
+    if (this.elementVolume !== undefined) {
       this.gainNode.gain.setTargetAtTime(this.elementVolume, 0, 0.1);
     }