@livekit/react-native 2.8.0 → 2.9.0

package/lib/typescript/src/index.d.ts

@@ -1,5 +1,7 @@
 import 'well-known-symbols/Symbol.asyncIterator/auto';
 import 'well-known-symbols/Symbol.iterator/auto';
+import './polyfills/MediaRecorderShim';
+import 'react-native-quick-base64';
 import './polyfills/EncoderDecoderTogether.min.js';
 import AudioSession, { AndroidAudioTypePresets, type AndroidAudioTypeOptions, type AppleAudioCategory, type AppleAudioCategoryOption, type AppleAudioConfiguration, type AppleAudioMode, type AudioTrackState, getDefaultAppleAudioConfigurationForMode } from './audio/AudioSession';
 import type { AudioConfiguration } from './audio/AudioSession';

package/lib/typescript/src/polyfills/MediaRecorderShim.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livekit/react-native",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "LiveKit for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -44,9 +44,11 @@
   "dependencies": {
     "@livekit/components-react": "^2.8.1",
     "array.prototype.at": "^1.1.1",
+    "event-target-shim": "6.0.2",
     "events": "^3.3.0",
     "loglevel": "^1.8.0",
     "promise.allsettled": "^1.0.5",
+    "react-native-quick-base64": "2.1.1",
     "react-native-url-polyfill": "^1.3.0",
     "typed-emitter": "^2.1.0",
     "web-streams-polyfill": "^4.1.0",
@@ -57,7 +59,7 @@
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@commitlint/config-conventional": "^16.2.1",
-    "@livekit/react-native-webrtc": "^125.0.12",
+    "@livekit/react-native-webrtc": "^137.0.0",
     "@react-native/babel-preset": "0.74.84",
     "@react-native/eslint-config": "0.74.84",
     "@react-native/metro-config": "0.74.84",
@@ -73,7 +75,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^7.0.4",
     "jest": "^29.6.3",
-    "livekit-client": "^2.9.8",
+    "livekit-client": "^2.15.4",
     "pod-install": "^0.2.2",
     "prettier": "2.8.8",
     "react": "18.2.0",
@@ -84,8 +86,8 @@
     "typescript": "5.0.4"
   },
   "peerDependencies": {
-    "@livekit/react-native-webrtc": "^125.0.12",
-    "livekit-client": "^2.9.0",
+    "@livekit/react-native-webrtc": "^137.0.0",
+    "livekit-client": "^2.15.4",
     "react": "*",
     "react-native": "*"
   },

package/src/audio/MediaRecorder.ts

@@ -0,0 +1,158 @@
+import type { MediaStream } from '@livekit/react-native-webrtc';
+import { addListener } from '../events/EventEmitter';
+import {
+  EventTarget,
+  Event,
+  defineEventAttribute,
+} from 'event-target-shim/index';
+import { toByteArray } from 'react-native-quick-base64';
+import LiveKitModule from '../LKNativeModule';
+import { log } from '../logger';
+
+// typeof MediaRecorder
+// const Tester = (stream: MediaStream) => {
+//   return new AudioRecorder(stream) satisfies MediaRecorder;
+// };
+
+type MediaRecorderState = 'inactive' | 'recording' | 'paused';
+type MediaRecorderEventMap = {
+  dataavailable: BlobEvent<'dataavailable'>;
+  error: Event<'error'>;
+  pause: Event<'pause'>;
+  resume: Event<'resume'>;
+  start: Event<'start'>;
+  stop: Event<'stop'>;
+};
+
+/**
+ * A MediaRecord implementation only meant for recording audio streams.
+ *
+ * @private
+ */
+export class MediaRecorder extends EventTarget<MediaRecorderEventMap> {
+  mimeType: String = 'audio/pcm';
+  audioBitsPerSecond: number = 0; // TODO?
+  state: MediaRecorderState = 'inactive';
+  stream: MediaStream;
+  videoBitsPerSecond: number = 0; // TODO?
+  audioBitrateMode = 'constant';
+
+  _reactTag: string | undefined = undefined;
+  _parts: string[] = [];
+  constructor(stream: MediaStream) {
+    super();
+    this.stream = stream;
+  }
+
+  registerListener() {
+    let audioTracks = this.stream.getAudioTracks();
+    if (audioTracks.length !== 1) {
+      return;
+    }
+    const mediaStreamTrack = audioTracks[0];
+    const peerConnectionId = mediaStreamTrack._peerConnectionId ?? -1;
+    const mediaStreamTrackId = mediaStreamTrack?.id;
+    this._reactTag = LiveKitModule.createAudioSinkListener(
+      peerConnectionId,
+      mediaStreamTrackId
+    );
+    addListener(this, 'LK_AUDIO_DATA', (event: any) => {
+      if (
+        this._reactTag &&
+        event.id === this._reactTag &&
+        this.state === 'recording'
+      ) {
+        let str = event.data as string;
+        this._parts.push(str);
+      }
+    });
+  }
+
+  unregisterListener() {
+    if (this._reactTag) {
+      let audioTracks = this.stream.getAudioTracks();
+      if (audioTracks.length !== 1) {
+        log.error("couldn't find any audio tracks to record from!");
+        return;
+      }
+      const mediaStreamTrack = audioTracks[0];
+      const peerConnectionId = mediaStreamTrack._peerConnectionId ?? -1;
+      const mediaStreamTrackId = mediaStreamTrack?.id;
+
+      LiveKitModule.deleteAudioSinkListener(
+        this._reactTag,
+        peerConnectionId,
+        mediaStreamTrackId
+      );
+    }
+  }
+
+  pause() {
+    this.state = 'paused';
+    this.dispatchEvent(new Event('pause'));
+  }
+
+  resume() {
+    this.state = 'recording';
+    this.dispatchEvent(new Event('resume'));
+  }
+
+  start() {
+    this.registerListener();
+    this.state = 'recording';
+    this.dispatchEvent(new Event('start'));
+  }
+
+  stop() {
+    // dispatch data must come before stopping.
+    this.dispatchData();
+
+    this.unregisterListener();
+    this.state = 'inactive';
+    this.dispatchEvent(new Event('stop'));
+  }
+
+  requestData() {
+    this.dispatchData();
+  }
+  dispatchData() {
+    let combinedStr = this._parts.reduce((sum, cur) => sum + cur, '');
+    let data = toByteArray(combinedStr);
+    this._parts = [];
+    this.dispatchEvent(
+      new BlobEvent('dataavailable', { data: { byteArray: data } })
+    );
+  }
+}
+
+/**
+ * @eventClass
+ * This event is fired whenever the Track is changed in PeerConnection.
+ * @param {TRACK_EVENTS} type - The type of event.
+ * @param {IRTCTrackEventInitDict} eventInitDict - The event init properties.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/track_event MDN} for details.
+ */
+class BlobEvent<TEventType extends string> extends Event<TEventType> {
+  /** @eventProperty */
+  readonly data: { byteArray: Uint8Array };
+
+  constructor(
+    type: TEventType,
+    eventInitDict: { data: { byteArray: Uint8Array } } & Event.EventInit
+  ) {
+    super(type, eventInitDict);
+    this.data = eventInitDict.data;
+  }
+}
+
+/**
+ * Define the `onxxx` event handlers.
+ */
+const proto = MediaRecorder.prototype;
+
+defineEventAttribute(proto, 'dataavailable');
+defineEventAttribute(proto, 'error');
+defineEventAttribute(proto, 'pause');
+defineEventAttribute(proto, 'resume');
+defineEventAttribute(proto, 'start');
+defineEventAttribute(proto, 'stop');

package/src/components/BarVisualizer.tsx

@@ -149,7 +149,7 @@ export const BarVisualizer = ({
   let bars: React.ReactNode[] = [];
   magnitudes.forEach((value, index) => {
     let coerced = Math.min(opts.maxHeight, Math.max(opts.minHeight, value));
-    let coercedPercent = Math.min(100, Math.max(0, coerced * 100 + 5));
+    let coercedPercent = Math.min(100, Math.max(0, coerced * 100));
     let opacity = opacityAnimations[index] ?? new Animated.Value(0.3);
     let barStyle = {
       opacity: opacity,
@@ -160,11 +160,7 @@ export const BarVisualizer = ({
     bars.push(
       <Animated.View
         key={index}
-        style={[
-          { height: `${coercedPercent}%` },
-          barStyle,
-          styles.volumeIndicator,
-        ]}
+        style={[{ height: `${coercedPercent}%` }, barStyle]}
       />
     );
   });
@@ -177,9 +173,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-evenly',
   },
-  volumeIndicator: {
-    borderRadius: 12,
-  },
 });
 
 export const useBarAnimator = (

package/src/components/LiveKitRoom.tsx

@@ -50,7 +50,7 @@ export interface LiveKitRoomProps {
   screen?: ScreenShareCaptureOptions | boolean;
   /**
    * If set to true a connection to LiveKit room is initiated.
-   * @defaultValue `false`
+   * @defaultValue `true`
    */
   connect?: boolean;
   /**

package/src/events/EventEmitter.ts

@@ -7,7 +7,11 @@ import LiveKitModule from '../LKNativeModule';
 // re-emit them on a JS-only emitter.
 const nativeEmitter = new NativeEventEmitter(LiveKitModule);
 
-const NATIVE_EVENTS = ['LK_VOLUME_PROCESSED', 'LK_MULTIBAND_PROCESSED'];
+const NATIVE_EVENTS = [
+  'LK_VOLUME_PROCESSED',
+  'LK_MULTIBAND_PROCESSED',
+  'LK_AUDIO_DATA',
+];
 
 const eventEmitter = new EventEmitter();
 

package/src/index.tsx

@@ -1,5 +1,7 @@
 import 'well-known-symbols/Symbol.asyncIterator/auto';
 import 'well-known-symbols/Symbol.iterator/auto';
+import './polyfills/MediaRecorderShim';
+import 'react-native-quick-base64';
 import { registerGlobals as webrtcRegisterGlobals } from '@livekit/react-native-webrtc';
 import { setupURLPolyfill } from 'react-native-url-polyfill';
 import './polyfills/EncoderDecoderTogether.min.js';

package/src/polyfills/MediaRecorderShim.ts

@@ -0,0 +1,12 @@
+import { MediaRecorder } from "../audio/MediaRecorder";
+
+function shimMediaRecorder() {
+  // @ts-expect-error
+  if(!global.MediaRecorder) {
+    // @ts-expect-error
+    global.MediaRecorder = MediaRecorder
+  }
+  MediaRecorder
+}
+
+shimMediaRecorder();