tencent cloud

フィードバック

Demoクイックスタート(React Native)

最終更新日:2022-05-09 15:28:21

    ここでは、主にTencent CloudのTRTC Demo (React Native)を素早く実行する方法をご紹介します。

    環境要件

    • ReactNative 0.63以降
    • Node & Watchman。nodeのバージョンはv12以降
    • Android端末向け開発:
      • Android Studio 3.5以降
      • AppにはAndroid 4.1以降のデバイスが必要です
    • iOS & macOS端末向け開発:
      • Xcode 11.0以降
      • osxのOSは10.11以降であること
      • プロジェクトが有効な開発者による署名を設定済みであることを確認してください
    • 環境構築については、公式ドキュメントをご参照ください

    前提条件

    Tencent Cloudアカウントを登録します。

    操作手順

    ステップ1:アプリケーションの新規作成

    1. TRTCコンソールにログインし、開発支援>Demoクイックスタートを選択します。
      2.アプリケーションの作成をクリックし、TestTRTCなどのアプリケーション名を入力します。すでにアプリケーションを作成している場合、既存のアプリケーションを選択をクリックします。
    2. 実際の業務ニーズに応じてタグを追加または編集し、作成をクリックします。
    説明:

    • アプリケーション名には、数字、中国語と英語の文字、アンダーラインのみを含めることができ、15文字以内とします。
    • タグはTencent Cloudのさまざまなリソースを識別して管理するために使用されます。たとえば、企業に複数の事業部門があり、各部門に1つ以上のTRTCアプリケーションがある場合、企業はTRTCアプリケーションにタグを追加することで部門情報にマークを付けることができます。タグは入力必須ではありません。実際のビジネスニーズに応じてタグを追加または編集できます。

    ステップ2:SDKおよびDemoソースコードのダウンロード

    1. 実際の業務ニーズに応じて、SDKおよび付属のDemoソースコードをダウンロードします。
    2. ダウンロード完了後、ダウンロード完了。次へをクリックします。
    注意:

    現在、コンソールからはReactNative Demoをダウンロードできません。直接上記のリンクからDemoソースコードをダウンロードしてください

    ステップ3:Demo プログラムファイルの設定

    1. 設定変更画面に進み、ダウンロードしたソースコードパッケージに応じて、開発環境を選択します。
    2. /debug/config.jsファイルを見つけて開きます。
    3. SDKAPPIDSECRETKEYパラメータを設定します:
      • SDKAPPID:デフォルトはPLACEHOLDER、実際のSDKAppIDを設定してください。
      • SECRETKEY:デフォルトはPLACEHOLDER、実際のキー情報を設定してください。
    1. 貼り付け完了後、貼り付けました。次のステップをクリックすれば、作成が完了します。
    2. コンパイル完了後、 コンソール概要に戻る をクリックして終了します。
    説明:

    • ここで言及したUserSigの新規作成ソリューションでは、クライアントコードでSECRETKEYを設定します。この手法のうちSECRETKEYは逆コンパイルによって逆向きにクラッキングされやすく、キーがいったん漏洩すると、攻撃者はTencent Cloudトラフィックを盗用できるようになります。そのためこの手法は、ローカルのDemoクイックスタートおよび機能デバッグにのみ適合します
    • UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供します。UserSigが必要なときは、Appから業務サーバーにリクエストを発出し動的にUserSigを取得します。詳細はUserSigに関するご質問をご参照ください。

    ステップ4:権限の設定

    実行するにはAppの権限設定が必要です。

    1. AndroidManifest.xmlの中でAppの権限を設定します。TRTC SDKには以下の権限が必要です:
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
      <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.RECORD_AUDIO" />
      <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
      <uses-permission android:name="android.permission.BLUETOOTH" />
      <uses-permission android:name="android.permission.CAMERA" />
      <uses-permission android:name="android.permission.READ_PHONE_STATE" />
      <uses-feature android:name="android.hardware.camera" />
      <uses-feature android:name="android.hardware.camera.autofocus" />
      

    注意

    android:hardwareAccelerated="false"を設定しないでください。これは、ハードウェアアクセラレーションを無効にした場合、相手のビデオストリームがレンダリングできなくなるためです。


    2. Android端末のオーディオ/ビデオの権限は手動でリクエストしてください。
    if (Platform.OS === 'android') {
     await PermissionsAndroid.requestMultiple([
       PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, //オーディオが必要
       PermissionsAndroid.PERMISSIONS.CAMERA, //ビデオが必要
     ]);
    }
    

    ステップ5:コンパイル動作

    Metroを起動し、React Nativeプロジェクトディレクトリ下でnpx react-native startを実行します。

    新しいウィンドウが開き、開発/デバックが起動します:

    npx react-native run-android
    

    お問い合わせ

    カスタマーサービスをご提供できるため、ぜひお気軽にお問い合わせくださいませ。

    テクニカルサポート

    さらにサポートが必要な場合は、サポートチケットを送信して弊社サポートチームにお問い合わせください。24時間365日のサポートをご提供します。

    電話サポート(24 時間365日対応)