@byteplus/react-native-rtc 1.0.7-rc.0 → 1.1.0

package/README.md

@@ -138,12 +138,6 @@ const Login = () => {
             extras: {
                 source_language: room.language,
             },
-            roomConfigs: {
-                profile: room.roomMode,
-                isAutoPublish: room.autoPublish,
-                isAutoSubscribeAudio: room.autoSubscribeAudio,
-                isAutoSubscribeVideo: room.autoSubscribeVideo,
-            },
         });
 
         /** Capture local streams */
@@ -171,316 +165,6 @@ const Login = () => {
 
 export default Login;
 ```
-
-## On-Demand Video with Real-Time Guest Interaction Example
-
-**We recommend using the latest RTC React Native SDK version in combination with react-native-vod-player SDK v1.2.4.**
-
-
-### RTC Core Definition
-`@/core/index.ts`
-
-Based on the rtc core definition in `Basic Example`, add some apis:
-```typescript
-...
-import type { TTVideoEngine } from '@byteplus/react-native-vod-player';
-
-class RTCClient {
-
-    ...
-
-    /**
-     * @brief Start to observe vod player, capture frames from vod player and set stream for external screen stream.
-     */
-    startVodPlayerCapture(player: TTVideoEngine) {
-        return this.engine?.startVodPlayerCapture(player);
-    }
-
-    /**
-     * @brief Stop all vod player observer in rtc.
-     * @note Once you invoke this api, you should invoke `startVodPlayerCapture` to observe vod player.
-     */
-    stopVodPlayerCapture(player: TTVideoEngine) {
-        return this.engine?.stopVodPlayerCapture(player);
-    }
-}
-```
-### Main logic page in react-native
-`@/page/vodRtc.ts`
-
-```typescript
-import React, {useEffect, useRef, useState} from 'react';
-import fs from 'react-native-fs';
-import {Platform, SafeAreaView, ScrollView} from 'react-native';
-import {Button, Input, Text, Toast, View} from '@ant-design/react-native';
-import {
-  NativeViewComponent,
-  StreamIndex,
-  RenderMode,
-  MediaStreamType,
-  LocalLogLevel,
-} from '@byteplus/react-native-rtc';
-import {
-  createDirectUrlSource,
-  type TTVideoEngine,
-} from '@byteplus/react-native-vod-player';
-import {
-  launchImageLibrary,
-  type ImagePickerResponse,
-} from 'react-native-image-picker';
-import RTCClient from '@/core';
-import { createVeplayer } from '@/core/veplayer';
-import RowItem from '@/components/RowItem';
-import {GlobalStyles} from '@/style';
-
-const viewId = 'my-view';
-
-const auth = {
-  appId: 'Your RTC AppID',
-  roomId: 'Your Room ID',
-  userId: 'Your User ID',
-  token: 'Your RTC Token',
-};
-
-const Page = () => {
-  const [isViewLoaded, setViewLoaded] = useState<boolean>(false);
-  const [filepath, setFilepath] = useState('');
-  const hasCaptureRef = useRef(false);
-  const playerRef = useRef<TTVideoEngine>();
-
-  const handleViewLoad = () => {
-    setViewLoaded(true);
-  };
-
-  const handleSelectVideoFile = async () => {
-    try {
-      const callback = (response: ImagePickerResponse) => {
-        if (!response.didCancel && !response.errorCode) {
-          const filePath = response.assets?.[0]?.uri;
-          if (filePath) {
-            setFilepath(filePath);
-          }
-        }
-      };
-      launchImageLibrary(
-        {
-          mediaType: 'video',
-        },
-        callback,
-      );
-    } catch {
-      Toast.fail('Select media file failed.');
-    }
-  };
-
-  const handlePublish = () => {
-    RTCClient.publishScreen(MediaStreamType.RTC_MEDIA_STREAM_TYPE_BOTH);
-  };
-
-  const setVideoSource = () => {
-    const source = filepath
-      ? createDirectUrlSource({
-          url: filepath,
-          cacheKey: filepath,
-        })
-      : createDirectUrlSource({
-          url: 'Your media url, like https://xxxx.mp4',
-          cacheKey: 'remote',
-          vid: 'remote',
-        });
-    playerRef.current!.setVideoSource(source);
-  };
-
-  const handlePlay = async () => {
-    if (hasCaptureRef.current) {
-      playerRef.current!.play();
-      return;
-    }
-    if (!playerRef.current) {
-      return;
-    }
-    setVideoSource();
-    await RTCClient.startVodPlayerCapture(playerRef.current);
-    await playerRef.current!.play();
-
-    RTCClient.publishScreen(MediaStreamType.RTC_MEDIA_STREAM_TYPE_BOTH);
-    
-    hasCaptureRef.current = true;
-  };
-
-  const handleStop = async () => {
-    if (hasCaptureRef.current) {
-      playerRef.current!.pause();
-    }
-  }
-
-  const handleDestroy = async () => {
-    if (!playerRef.current) {
-      return;
-    }
-    await RTCClient.stopVodPlayerCapture(playerRef.current);
-    hasCaptureRef.current = false;
-  }
-
-  const initializePlayer = async () => {
-    /**
-     * @brief It's not necessary to set viewId for vod player.
-     * @note You should realize veplayer for youself, refer to @byteplus/react-native-vod-player SDK.
-     */
-    playerRef.current = await createVeplayer({ viewId: '' });
-    playerRef.current.setListener({
-      onLoadStateChanged(engine, loadState) {
-        console.log('onLoadStateChanged: ', loadState);
-      },
-      onError(message, code) {
-        console.error('onError: ', message, code);
-      },
-      onPlaybackStateChanged(engine, playbackState) {
-        console.log('onPlaybackStateChanged: ', playbackState);
-      },
-    });
-  };
-
-  const initializeRTC = async () => {
-    /** Init your engine */
-    let DefaultPath = fs.ExternalDirectoryPath;
-    if (Platform.OS === 'ios') {
-      DefaultPath = fs.DocumentDirectoryPath;
-    }
-
-    /** Set log */
-    RTCClient.setLogConfig({
-      logLevel: LocalLogLevel.INFO,
-      logPath: DefaultPath,
-      logFileSize: 10,
-      logFilenamePrefix: '',
-    });
-
-    /** Create RTC Engine */
-    await RTCClient.createEngine({
-      appID: auth.appId,
-      parameters: {},
-    });
-
-    /** Set Local video canvas for player */
-    RTCClient.setLocalVideoCanvas(StreamIndex.STREAM_INDEX_SCREEN, {
-      viewId,
-      renderMode: RenderMode.ByteRTCRenderModeFit,
-    });
-
-    /** Join room */
-    RTCClient.createRoom(auth.roomId);
-    RTCClient.setRTCRoomEventHandler({
-      onUserJoined(userInfo, elapsed) {
-        console.log('onUserJoined: ', userInfo, elapsed);
-      },
-    });
-    RTCClient.joinRoom({
-      token: auth.token,
-      userId: auth.userId,
-      roomConfigs: {
-        profile: 0,
-        isAutoPublish: true,
-        isAutoSubscribeAudio: false,
-        isAutoSubscribeVideo: false,
-      },
-    });
-  };
-
-  useEffect(() => {
-    if (isViewLoaded) {
-      initializeRTC();
-      initializePlayer();
-      console.log('init success');
-    }
-  }, [isViewLoaded]);
-
-  useEffect(() => {
-    return () => {
-      RTCClient.engine?.stopVodPlayerCapture(playerRef.current);
-    }
-  }, []);
-
-  return (
-    <SafeAreaView>
-      <ScrollView
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          width: '100%',
-          height: '100%',
-          backgroundColor: 'gray',
-        }}>
-        <RowItem
-          theme="dark"
-          leftItem="File path"
-          leftItemStyle={{width: '25%'}}
-          rightItem={
-            <Input disabled placeholder="Select media file" value={filepath} />
-          }
-        />
-        <Button
-          style={{...GlobalStyles.rowBtn, marginBottom: 6}}
-          onPress={handleSelectVideoFile}>
-          <Text style={{color: 'gray'}}>Select media file</Text>
-        </Button>
-        <Button
-          style={{...GlobalStyles.rowBtn, marginBottom: 6}}
-          onPress={() => setFilepath('')}>
-          <Text style={{color: 'gray'}}>Clear media file</Text>
-        </Button>
-        <Button
-          style={{...GlobalStyles.rowBtn, marginBottom: 6}}
-          onPress={handlePublish}>
-          <Text style={{color: 'gray'}}>Push Stream</Text>
-        </Button>
-        <Button
-          style={{...GlobalStyles.rowBtn, marginBottom: 6}}
-          onPress={handlePlay}>
-          <Text style={{color: 'gray'}}>Play</Text>
-        </Button>
-        <Button
-          style={{...GlobalStyles.rowBtn, marginBottom: 6}}
-          onPress={handleStop}>
-          <Text style={{color: 'gray'}}>Pause</Text>
-        </Button>
-        <Button
-          style={{...GlobalStyles.rowBtn, marginBottom: 6}}
-          onPress={handleDestroy}>
-          <Text style={{color: 'gray'}}>Destroy</Text>
-        </Button>
-        <View
-          style={{
-            flex: 1,
-            width: '100%',
-            minHeight: 300,
-            backgroundColor: '#000',
-          }}>
-          <Text>{`${viewId}`}</Text>
-          <NativeViewComponent
-            viewId={viewId}
-            style={{
-              width: '100%',
-              height: '100%',
-            }}
-            onLoad={handleViewLoad}
-            kind={
-              Platform.select({
-                android: 'SurfaceView',
-                ios: 'UIView',
-              })!
-            }
-          />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-};
-
-export default Page;
-```
-
-
 ## Attention
 - In Android/iOS scenarios, the screen sharing method is slightly different. For details, please refer to [Android screen sharing](https://docs.byteplus.com/en/docs/byteplus-rtc/docs-124176) and [iOS screen sharing](https://docs.byteplus.com/en/docs/byteplus-rtc/docs-124177).
 - Not support debug in iOS simulator, using real device instead.

package/android/build.gradle

@@ -9,7 +9,34 @@ buildscript {
   }
 }
 
-def enableUnionForRTCWithLive = rootProject.ext.has('enableUnionForRTCWithLive') ? rootProject.ext.get('enableUnionForRTCWithLive') : false
+def getLicenseType() {
+  try {
+    def packageJson = file("../../../../package.json")
+    def parsedJson = new groovy.json.JsonSlurper().parseText(packageJson.text)
+    return parsedJson.TTVideoEngine.licenseType
+  } catch (e) {
+    return "premium"
+  }
+}
+
+def enableUnionForRTCWithLive = project.findProperty('enableUnionForRTCWithLive') == null ? false : project.findProperty('enableUnionForRTCWithLive').toString().toBoolean()
+def enableUnionForRTCWithVod = project.findProperty('enableUnionForRTCWithVod') == null ? false : project.findProperty('enableUnionForRTCWithVod').toString().toBoolean()
+
+def packageJson = file("../package.json")
+def parsedJson = new groovy.json.JsonSlurper().parseText(packageJson.text)
+def isBp = parsedJson.name.startsWith("@byteplus")
+
+def license_type = getLicenseType()
+
+def rtcVersionToUse
+if (isBp) {
+  rtcVersionToUse = enableUnionForRTCWithLive ? "3.58.1.20600" : "3.58.1.15100"
+  println "Using BytePlusRTC SDK version : $rtcVersionToUse (union live enabled: $enableUnionForRTCWithLive / union vod enabled: $enableUnionForRTCWithVod)"
+} else {
+  rtcVersionToUse = enableUnionForRTCWithLive ? "3.58.1.20700" : "3.58.1.2700"
+  println "Using VolcEngineRTC SDK version : $rtcVersionToUse (union build enabled: $enableUnionForRTCWithLive / union vod enabled: $enableUnionForRTCWithVod)"
+}
+
 
 def isNewArchitectureEnabled() {
   return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
@@ -38,42 +65,16 @@ def supportsNamespace() {
   return (major == 7 && minor >= 3) || major >= 8
 }
 
-def getLicenseType() {
-  try {
-    def packageJson = file("../../../../package.json")
-    def parsedJson = new groovy.json.JsonSlurper().parseText(packageJson.text)
-    return parsedJson.TTVideoEngine.licenseType
-  } catch (e) {
-    return "premium"
+android {
+  sourceSets {
+    main {
+      java.srcDirs = ['src/main/java']
+      manifest.srcFile "src/main/AndroidManifestNew.xml"
+    }
   }
-}
 
-def getNativeDep() {
-  def packageJson = file("../package.json")
-  def parsedJson = new groovy.json.JsonSlurper().parseText(packageJson.text)
-  def isBp = parsedJson.name.startsWith("@byteplus")
-
-  
-  def rtcVersionToUse
-  if (isBp) {
-    rtcVersionToUse = enableUnionForRTCWithLive ? "3.58.1.20600" : "3.58.1.15100"
-    println "Using BytePlusRTC SDK version : $rtcVersionToUse (union build enabled: $enableUnionForRTCWithLive)"
-    return "com.byteplus:BytePlusRTC:$rtcVersionToUse"
-  }
-  rtcVersionToUse = enableUnionForRTCWithLive ? "3.58.1.20700" : "3.58.1.2700"
-  println "Using VolcEngineRTC SDK version : $rtcVersionToUse (union build enabled: $enableUnionForRTCWithLive)"
-  return "com.volcengine:VolcEngineRTC:$rtcVersionToUse"
-}
-
-android {
   if (supportsNamespace()) {
     namespace "com.volcengine.reactnative.vertc"
-
-    sourceSets {
-      main {
-        manifest.srcFile "src/main/AndroidManifestNew.xml"
-      }
-    }
   }
 
   compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
@@ -101,28 +102,35 @@ android {
   }
 }
 
+def apiVolcEngineVersion = "1.6.2";
+
+if (enableUnionForRTCWithLive) {
+  android.sourceSets.main.java.srcDirs += 'src/live/java'
+  dependencies {
+    implementation project(':byteplus_react-native-live-push')
+    implementation "com.bytedanceapi:ttsdk-player_$license_type:1.46.300.2"
+  }
+}
+
+if (enableUnionForRTCWithVod) {
+  android.sourceSets.main.java.srcDirs += 'src/vod/java'
+  // 
+  // Might cause rtc api some error, just alpha version.
+  // 
+  apiVolcEngineVersion = '1.5.0'
+  dependencies {
+    implementation "com.bytedanceapi:ttsdk-player_$license_type:1.46.300.2"
+  }
+}
+
 dependencies {
   // For < 0.71, this will be from the local maven repo
   // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
   // noinspection GradleDynamicVersion
   implementation "com.facebook.react:react-native:+"
 
-  implementation "com.volcengine:VolcApiEngine:1.6.2"
-  implementation project(':byteplus_react-native-live-push')
-//   implementation project(":hybrid-runtime");
+  implementation "com.volcengine:VolcApiEngine:$apiVolcEngineVersion"
 
   // Use the RTC SDK dependency determined by getNativeDep() which can be overridden by customer's app build.gradle.
-  def rtcDep = getNativeDep()
-  implementation rtcDep
-
-  // TTVideoEngine
-  // byteplus and volcengine use different name, different version
-  // volcengine     com.bytedanceapi:ttsdk-player_premium:1.43.1.5      com.bytedanceapi:ttsdk-player_standard:1.43.1.5
-  // byteplus       com.bytedanceapi:ttsdk-player_premium:1.42.300.101  com.bytedanceapi:ttsdk-player_standard:1.42.300.101
-  def license_type = getLicenseType()
-  implementation "com.bytedanceapi:ttsdk-player_$license_type:1.+"
-
-  if (enableUnionForRTCWithLive) {
-    api 'com.bytedanceapi:ttsdk-ttlivepush_rtc:1.46.300.2'
-  }
+  implementation isBp ? "com.byteplus:BytePlusRTC:$rtcVersionToUse" : "com.volcengine:VolcEngineRTC:$rtcVersionToUse"
 }

package/android/src/{main → vod}/java/com/volcengine/reactnative/vertc/vod/VertcVod.java

@@ -136,6 +136,11 @@ public class VertcVod {
     if (arg instanceof TTVideoEngine) {
       return (TTVideoEngine)arg;
     }
+
+    Object decoded = VolcApiEnginePool.getInstance().decodeArg(arg, null);
+    if (decoded instanceof TTVideoEngine) {
+      return (TTVideoEngine)arg;
+    }
     
     return null;
   }

package/ios/{VertcHelper.m → core/VertcHelper.m}

@@ -7,7 +7,6 @@
 
 #import <Foundation/Foundation.h>
 #import "RTCHeader.h"
-#import <TTSDKFramework/TTSDKFramework.h>
 #import <VertcHelper.h>
 
 
@@ -30,7 +29,11 @@
 }
 
 - (int)invokeStartPushSingleStreamToCDN:(ByteRTCVideo *)rtc taskId:(NSString *_Nonnull)taskID singleStream:(ByteRTCPushSingleStreamParam *_Nonnull)singleStream {
-    singleStream.pushType = ByteRTCSingleStreamPushToCDN;
+    // Compatible live rtc version.
+    if ([singleStream respondsToSelector:NSSelectorFromString(@"setPushType:")]) {
+        // Can only use 1 magic number.
+        [singleStream setValue:@(1) forKey:@"pushType"];
+    }
     singleStream.isScreen = singleStream.isScreen || false;
     int res = [rtc startPushSingleStreamToCDN:taskID singleStream:singleStream observer:self];
     return res;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@byteplus/react-native-rtc",
-  "version": "1.0.7-rc.0",
+  "version": "1.1.0",
   "peerDependencies": {
     "react": "*",
     "react-native": "*"

package/react-native-rtc.podspec

@@ -30,10 +30,29 @@ Pod::Spec.new do |s|
   end
 
   s.pod_target_xcconfig = {
-    'ENABLE_UNION_FOR_RTC_WITH_LIVE' => '$(ENABLE_UNION_FOR_RTC_WITH_LIVE)'
+    'ENABLE_UNION_FOR_RTC_WITH_LIVE' => '$(ENABLE_UNION_FOR_RTC_WITH_LIVE)',
+    'ENABLE_UNION_FOR_RTC_WITH_VOD' => '$(ENABLE_UNION_FOR_RTC_WITH_VOD)'
   }
 
-  s.source_files = "ios/**/*.{h,m,mm}"
+  s.default_subspec = 'Core'
+
+  s.subspec 'Core' do |core|
+    core.source_files = 'ios/core/*.{h,m,mm,swift}'
+  end
+
+  s.subspec 'Live' do |sub|
+    sub.source_files = [
+      'ios/core/*.{h,m,mm,swift}',
+      'ios/live/*.{h,m,mm,swift}'
+    ]
+  end
+
+  s.subspec 'Vod' do |sub|
+    sub.source_files = [
+      'ios/core/*.{h,m,mm,swift}',
+      'ios/vod/*.{h,m,mm,swift}'
+    ]
+  end
 
   # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
   # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
@@ -60,35 +79,30 @@ Pod::Spec.new do |s|
 
   s.dependency 'VolcApiEngine', '1.6.2'
   
-  enable_union = (ENV['ENABLE_UNION_FOR_RTC_WITH_LIVE'] == 'YES')
+  enable_union_live = (ENV['ENABLE_UNION_FOR_RTC_WITH_LIVE'] == 'YES')
+  enable_union_vod = (ENV['ENABLE_UNION_FOR_RTC_WITH_VOD'] == 'YES')
 
-  if is_bp
-    rtc_version_byteplus_union = '3.58.1.45300'
-    rtc_version_byteplus_non_union = '3.58.1.14800'
-    rtc_version = enable_union ? rtc_version_byteplus_union : rtc_version_byteplus_non_union
-    if enable_union
-      s.dependency 'TTSDKFramework/RTCSDK', '1.46.300.3-premium'
-      s.dependency 'TTSDKFramework/Player-SR', '1.46.300.3-premium'
-      s.dependency 'TTSDKFramework/Core', '1.46.300.3-premium'
-      s.dependency 'TTSDKFramework/LivePush-RTS', '1.46.300.3-premium'
-      s.dependency 'react-native-velive-push'
-    else
-      s.dependency 'BytePlusRTC', rtc_version
-      s.dependency 'TTSDKFramework/Player-SR', '1.45.300.3-premium'
-    end
-    puts "React-Native-RTC Pod: Using BytePlusRTC SDK version: #{rtc_version} (union build enabled: #{enable_union})"
+  rtc_sdk_name = is_bp ? 'BytePlusRTC' : 'VolcEngineRTC'
+
+  rtc_live_unique_version = is_bp ? '1.46.300.3-premium' : '1.46.3.9-premium'
+  rtc_default_version = is_bp ? '3.58.1.14800' : '3.58.1.100'
+
+  vod_player_sr_version = is_bp ? '1.45.300.3-premium' : '1.46.2.8-premium'
+  live_player_sr_version = is_bp ? '1.46.300.3-premium' : '1.46.3.9-premium'
+
+  if enable_union_live
+    # Live mode using unique RTC version.
+    s.dependency 'TTSDKFramework/RTCSDK', rtc_live_unique_version
+    # While using live mode, pusher RN sdk is require for getting pusher instance.
+    s.dependency 'react-native-velive-push'
+    s.dependency 'TTSDKFramework/Player-SR', live_player_sr_version
   else
-    rtc_version_volc_union = '3.58.1.100'
-    rtc_version_volc_non_union = '3.58.1.100'
-    rtc_version = enable_union ? rtc_version_volc_union : rtc_version_volc_non_union
-    if enable_union
-      s.dependency 'TTSDKFramework/RTCSDK', '1.46.3.9-premium'
-      s.dependency 'TTSDKFramework/Player-SR', '1.46.3.9-premium'
-    else
-      s.dependency 'VolcEngineRTC', rtc_version
-      s.dependency 'TTSDKFramework/Player-SR', '1.46.2.8-premium'
-    end
-
-    puts "React-Native-RTC Pod: Using VolcEngineRTC SDK version: #{rtc_version} (union build enabled: #{enable_union})"
+    # Vod mode or default mode using default rtc version.
+    s.dependency rtc_sdk_name, rtc_default_version
+  end
+
+  if enable_union_vod
+    # 1.45.300.3 for vod.
+    s.dependency 'TTSDKFramework/Player-SR', vod_player_sr_version
   end
 end