opentok-react-native - npm Package Compare versions

Comparing version 2.26.0 to 2.26.1

@types/index.d.ts

@@ -41,2 +41,3 @@ declare module "opentok-react-native" {
     hasAudio: boolean;
+    hasCaptions: boolean;
     hasVideo: boolean;
@@ -61,3 +62,3 @@ sessionId: string;
     oldValue: any;
-    changedProperty: "hasAudio" | "hasVideo" | "videoDimensions";
+    changedProperty: "hasAudio" | "hasCaptions" | "hasVideo" | "videoDimensions";
     stream: Stream;
@@ -77,2 +78,7 @@ }
 
+  interface SubscriberCaptionEvent {
+    text: string,
+    isFinal: boolean,
+  }
+
   interface SubscriberAudioStatsEvent {
@@ -363,2 +369,7 @@ audioBytesReceived: number,
     /**
+     * Whether to publish captions.
+     */
+    publishCaptions?: boolean;
+
+    /**
      * Whether to publish video.
@@ -427,2 +438,7 @@ */
     getRtcStatsReport?: () => void;
+
+    /**
+     * Sets video transformers for the publisher (or clears them if passed an empty array).
+     */
+    setVideoTransformers?: () => void;
   }
@@ -469,2 +485,7 @@
     /**
+     * Whether to subscribe to captions.
+     */
+    subscribeToCaptions?: boolean;
+
+    /**
      * Whether to subscribe video.
@@ -492,2 +513,7 @@ */
     /**
+     * Sent when the subscriber receives a caption for the stream.
+     */
+    captionReceived?: CallbackWithParam<SubscriberCaptionEvent, any>;
+
+    /**
      * Called when the subscriber’s stream has been interrupted.
@@ -494,0 +520,0 @@ */

CHANGELOG.md

@@ -1,3 +0,24 @@
-# 2.26.0  (September 2023)
+# 2.26.1  (October 2023)
 
+- [Update]: The new `OTPublisher.setVideoTransformers()` method lets you set (and clear)
+  video transformers, such as a background blur for a publisher (issues #631 and #682).
+  For more info, see the docs: [OTPublisher](/docs/OTPublisher.md).
+
+- [Update]: Live Captions API enhancements (issue #643)
+
+  * The new OTPublisher.publishCaptions option lets you enable and disable captions for a published stream  (if captions are enabled for the session). For more info, see the docs:[OTPublisher](/docs/OTPublisher.md).
+
+  * The new OTSubscriber.subscribeToCaptions option lets you turn captions on and off for a subscriber (if captions are enabled for the session and the publisher is publishing captions). For more info, see the docs: [OTSubscriber](/docs/OTSubscriber.md).
+
+  * The new OTSubscriber captionReceived event is dispatched when a subscriber receives a caption. For more info, see the docs: [OTSubscriber](/docs/OTSubscriber.md).
+
+  * For more information, see the [Live Captions developer guide](https://tokbox.com/developer/guides/live-captions).
+
+- [Fix]: Fixes an issue in which applications could not connect to a session when
+  the `proxyUrl` option for OTSession was set. - issue #645
+
+- [Fix]: Fixes an issue a stream is not destroyed immediately after unmounting an OTSession component or when the `OTSession.disconnect()` method is called. - issues #685 and #686
+
+# 2.26.0  (October 2023)
+
 - [Update]: Update OpenTok Android SDK and OpenTok iOS SDK to version 2.26.1.
@@ -14,7 +35,2 @@
 
-- [Fix]: Fixes an issue in which applications could not connect to a session when
-  the `proxyUrl` option for OTSession was set. - issue #645
-
-- [Fix]: Fixes an issue a stream is not destroyed immediately after unmounting an OTSession component or when the `OTSession.disconnect()` method is called. - issues #685 and #686
-
 # 2.25.4 (October 2023)
@@ -46,2 +62,3 @@
 - [Fix]: Fix android app crash due to permission missing.
+- [Fix]: Fix OTSubscriber audioVolume and other properties not working -- issue #694
 
@@ -48,0 +65,0 @@ # 2.25.2 (July 5 2023)

docs/EventData.md

@@ -82,2 +82,14 @@ # Event data
 
+## SubscriberCaptionEvent
+
+To get captions for a subscriber, register an event listener for the `captionReceived` event.
+The event object has the following properties: 
+
+```javascript
+  event = {
+    text: string,
+    isFinal: boolean,
+  };
+```
+
 ## ConnectionCreatedEvent
@@ -84,0 +96,0 @@

docs/OTPublisher.md

@@ -17,3 +17,5 @@ # OTPublisher component
     this.publisherProperties = {
-      publishAudio: false,
+      publishAudio: true,
+      publishVideo: false,
+      publishCaptions: true,
       cameraPosition: 'front'
@@ -64,2 +66,4 @@ };
 
+  * publishCaptions -- Toggles captions on (`true`) or off `false` for the published stream.
+
 * `eventHandlers` (Object) -- An object containing key-value pairs of event names and
@@ -113,2 +117,4 @@ callback functions for event handlers. See [Events](#events).
 
+* **publishCaptions** (Boolean) — Whether to publish captions. Note that the session must have captions enabled (using the Video API REST method or server SDK) and the publisher must be publishing audio. For more information, see the [Live Captions developer guide](https://tokbox.com/developer/guides/live-captions).
+
 * **scalableScreenshare** (Boolean) -- Whether to allow use of
@@ -165,3 +171,50 @@ {scalable video}(https://tokbox.com/developer/guides/scalable-video/) for a screen-sharing publisher
 
+**setVideoTransformers()** -- Sets video transformers for the publisher. This method has one parameter -- and array of objects defining each transformer to apply to the publisher's stream. A transformer object has two properties:
+
+* `name` (String) -- Either 'BackgroundBlur' (for a background blur filter) or 'BackgroundImageReplacement' (for a background image replacement filter). Android only supports the 'BackgroundBlur' transformer (and it is a beta feature in Android).
+
+* `properties` (String) -- A JSON string with the properties of the Vonage video transformer.
+
+  For a background blur transformer, the format of the JSON is:
+  
+  ```
+  `{
+     "radius" :"None"
+   }`
+   ```
+   
+   Valid values for the radius property are "None", "High", and "Low".
+   
+  For a custom background blur transformer, the format of the JSON is:
+  
+  ```
+  `{
+    "radius": "Custom",
+    "custom_radius": "value"
+  }
+  ```
+  
+  `custom_radius` can be any positive integer.
+  
+  For a background replacement transformer (supported on iOS only), the format of the JSON is:
+  
+  ```
+  `{
+    "image_file_path": "path/to/image"
+  }`
+  ```
+  
+  Where `image_file_path` is the absolute file path of a local image to use as virtual background. Supported image formats are PNG and JPEG.
+
+*Important:* Media transformations, such as background blur and background replacement, are resource-intensive and require devices with high processing power. It is recommended to only use these transformations on supported devices. See the following documentation:
+
+* [For iOS](https://tokbox.com/developer/guides/vonage-media-processor/ios/#client-requirements)
+
+* [For Android](https://tokbox.com/developer/guides/vonage-media-processor/android/#client-requirements)
+
+For more information on transformers, see [Using the Vonage Media Processor library](https://tokbox.com/developer/guides/vonage-media-processor/)
+
 **videoNetworkStats** (Object) -- Sent periodically to report audio statistics for the publisher.
   A [PublisherVideoNetworkStatsEvent](./EventData.md#PublisherVideoNetworkStatsEvent) object is passed into the event handler.
+## Methods
+

docs/OTSubscriber.md

@@ -17,2 +17,4 @@ ### OTSubscriber Component
   * **subscribeToVideo** (Boolean) — Whether to subscribe video.
+ 
+  * **subscribeToCaptions** (Boolean) — Whether to subscribe to captions. Note that the session must have captions enabled (using the Video API REST method or server SDK) and the publisher must be publishing captions. For more information, see the [Live Captions developer guide](https://tokbox.com/developer/guides/live-captions).
 
@@ -41,2 +43,5 @@ * **preferredResolution** (String) — Sets the preferred resolution of the subscriber's video. The format of the string is "widthxheight", where the width and height are represented in pixels. Valid values are "1280x720", "640x480", and "352x288".
 
+  * **captionReceived** (Object) — Sent when a caption is received for the subscriber.
+  A [CaptionReceived](./EventData.md#SubscriberCaptionEvent) object is passed into the event handler.
+
   * **connected** () — Sent when the subscriber successfully connects to the stream. The event object
@@ -88,2 +93,3 @@ includes a `streamId` property, identifying the stream.
       subscribeToVideo: true,
+      subscribeToCaptions: false,
     };
@@ -90,0 +96,0 @@

package.json

 {
   "name": "opentok-react-native",
-  "version": "2.26.0",
+  "version": "2.26.1",
   "description": "React Native components for OpenTok iOS and Android SDKs",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/helpers/OTPublisherHelper.js

@@ -58,2 +58,3 @@ import { sanitizeBooleanProperty, reassignEvents } from './OTHelper';
       publishVideo: true,
+      publishCaptions: false,
       name: '',
@@ -76,2 +77,3 @@ cameraPosition: 'front',
     publishVideo: sanitizeBooleanProperty(properties.publishVideo),
+    publishCaptions: sanitizeBooleanProperty(properties.publishCaptions),
     name: properties.name ? properties.name : '',
@@ -78,0 +80,0 @@ cameraPosition: sanitizeCameraPosition(properties.cameraPosition),

src/helpers/OTSubscriberHelper.js

@@ -30,2 +30,3 @@ import { sanitizeBooleanProperty, reassignEvents } from './OTHelper';
       videoDataReceived: 'subscriberVideoDataReceived',
+      captionReceived: 'subscriberCaptionReceived:',
     },
@@ -46,2 +47,3 @@ android: {
       videoDataReceived: 'onVideoDataReceived',
+      captionReceived: 'onCaptionText',
     },
@@ -96,2 +98,4 @@ };
 
+const sanitizeAudioVolume = audioVolume => (typeof audioVolume === 'number') ? audioVolume : 100;
+
 const sanitizeProperties = (properties) => {
@@ -102,4 +106,6 @@ if (typeof properties !== 'object') {
       subscribeToVideo: true,
+      subscribeToCaptions: false,
       preferredResolution: sanitizeResolution(null),
-      preferredFrameRate: sanitizeFrameRate(null)
+      preferredFrameRate: sanitizeFrameRate(null),
+      audioVolume: 100,
     };
@@ -110,4 +116,6 @@ }
     subscribeToVideo: sanitizeBooleanProperty(properties.subscribeToVideo),
+    subscribeToCaptions: sanitizeBooleanProperty(properties.subscribeToCaptions),
     preferredResolution: sanitizeResolution(properties.preferredResolution),
     preferredFrameRate: sanitizeFrameRate(properties.preferredFrameRate),
+    audioVolume: sanitizeAudioVolume(properties.audioVolume),
   };
@@ -120,3 +128,4 @@ };
   sanitizeFrameRate,
-  sanitizeResolution
+  sanitizeResolution,
+  sanitizeAudioVolume
 };

src/OTPublisher.js

@@ -81,2 +81,3 @@ import React, { Component } from 'react';
     updatePublisherProperty('publishVideo', true);
+    updatePublisherProperty('publishCaptions', false);
     updatePublisherProperty('cameraPosition', 'front');
@@ -159,2 +160,7 @@ updatePublisherProperty('videoContentHint', '');
   }
+
+  setVideoTransformers(videoTransformers) {
+    OT.setVideoTransformers(this.state.publisherId, videoTransformers);
+  }
+
   render() {
@@ -181,2 +187,3 @@ const { publisher, publisherId } = this.state;
   getRtcStatsReport: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  setVideoTransformers: PropTypes.func, // eslint-disable-line react/forbid-prop-types
 };
@@ -183,0 +190,0 @@ OTPublisher.defaultProps = {

src/OTSubscriber.js

@@ -7,3 +7,3 @@ import React, { Component } from 'react';
 import OTSubscriberView from './views/OTSubscriberView';
-import { sanitizeSubscriberEvents, sanitizeProperties, sanitizeFrameRate, sanitizeResolution } from './helpers/OTSubscriberHelper';
+import { sanitizeSubscriberEvents, sanitizeProperties, sanitizeFrameRate, sanitizeResolution, sanitizeAudioVolume } from './helpers/OTSubscriberHelper';
 import { getOtrnErrorEventHandler, sanitizeBooleanProperty } from './helpers/OTHelper';
@@ -22,2 +22,3 @@ import OTContext from './contexts/OTContext';
       streamCreated: Platform.OS === 'android' ? 'session:onStreamReceived' : 'session:streamCreated',
+      captionReceived: Platform.OS === 'android' ? 'session:onCaptionText' : 'subscriber:subscriberCaptionReceived:',
     };
@@ -45,3 +46,3 @@ this.componentEventsArray = Object.values(this.componentEvents);
       each(streamProperties, (individualStreamProperties, streamId) => {
-        const { subscribeToAudio, subscribeToVideo, preferredResolution, preferredFrameRate } = individualStreamProperties;
+        const { subscribeToAudio, subscribeToVideo, subscribeToCaptions, preferredResolution, preferredFrameRate, audioVolume } = individualStreamProperties;
         if (subscribeToAudio !== undefined) {
@@ -53,2 +54,5 @@ OT.subscribeToAudio(streamId, sanitizeBooleanProperty(subscribeToAudio));
         }
+        if (subscribeToCaptions !== undefined) {
+          OT.subscribeToCaptions(streamId, sanitizeBooleanProperty(subscribeToCaptions));
+        }
         if (preferredResolution !== undefined) {
@@ -61,3 +65,3 @@ OT.setPreferredResolution(streamId, sanitizeResolution(preferredResolution));
         if (audioVolume !== undefined) {
-          OT.setAudioVolume(streamId, audioVolume);
+          OT.setAudioVolume(streamId, sanitizeAudioVolume(audioVolume));
         }
@@ -79,5 +83,6 @@ });
     const { sessionId, sessionInfo } = this.context;
-    const subscriberProperties = isNull(streamProperties[stream.streamId]) ?
-      sanitizeProperties(properties) : sanitizeProperties(streamProperties[stream.streamId]);
-    // Subscribe to streams. If subscribeToSelf is true, subscribe also to his own stream
+    const subscriberProperties = streamProperties[stream.streamId] ?
+      sanitizeProperties(streamProperties[stream.streamId]) :
+      sanitizeProperties(properties);
+      // Subscribe to streams. If subscribeToSelf is true, subscribe also to his own stream
     const sessionInfoConnectionId = sessionInfo && sessionInfo.connection ? sessionInfo.connection.connectionId : null;
@@ -146,4 +151,5 @@ if (subscribeToSelf || (sessionInfoConnectionId !== stream.connectionId)) {
   getRtcStatsReport: {},
+  subscribeToCaptions: false,
 };
 
 OTSubscriber.contextType = OTContext;

No alert changes

Improved metrics

Total package byte prevSize

1516284

increased by0.86%

Number of package files

135

increased by7.14%

Lines of code

1659

increased by2.6%

No dependency changes