ビデオ画面の回転とズーム

最終更新日:2021-07-29 18:17:26

    内容紹介

    Tencent Real-Time Communication(TRTC)は、携帯電話のライブストリーミングのような縦画面による変化に乏しいユーザーエクスペリエンスとは異なり、横画面と縦画面という2つのユースケースを両立させることが必要です。このため、横画面と縦画面の処理ロジックを対応させる必要があります。ここでは主に、次の事項についてご説明します。

    • 縦画面モードを実装する方法。例:WeChatのビデオ通話は典型的な縦画面体験モードです。
    • 横画面モードを実装する方法。例えば、多人数ビデオミーティングアプリ(XYLink(小魚易連)など)は多くの場合、横画面モードを採用しています。
    • ローカル画面およびリモート画面の回転方向およびフィルモードをカスタマイズする方法。

    サポートプラットフォーム

    iOS Android Mac OS Windows Electron web
    ×

    縦画面モード

    WeChatのビデオ通話のような体験モードを実装したい場合は、2つの作業を行う必要があります。

    1. アプリのUIインターフェースを縦画面に設定する

    iOSプラットフォーム

    XCodeの【General】>【Deployment Info】>【Device Orientation】で直接設定することができます。

    Appdelegateの supportedInterfaceOrientationsForWindowメソッドを実装することにより、設定することもできます。

    - (UIInterfaceOrientationMask)application:(UIApplication *)application 
      supportedInterfaceOrientationsForWindow:(UIWindow *)window 
    {
       return  UIInterfaceOrientationMaskPortrait ;
    }
    
    説明:

    CSDNに掲載されている、iOSの縦横画面の回転およびその基本的な適用方法という記事に、iOSプラットフォームで画面の向きに関する開発工程の一部を詳細に説明しています。

    Androidプラットフォーム

    Androidプラットフォームでは、activityのscreenOrientation属性をportraitに指定することで、そのインターフェースを縦画面モードに指定することができます。

    <activity android:name=".trtc.TRTCMainActivity"  android:launchMode="singleTask" android:windowSoftInputMode="adjustPan"
             android:screenOrientation="portrait" />
    

    2. SDKで使用する縦画面解像度の設定

    TRTCCloudを使用したsetVideoEncoderParamインターフェースにビデオコーデックパラメータを設定する場合は、resModeをTRTCVideoResolutionModePortraitに指定します。

    サンプルコードは次のとおりです。

    iOSプラットフォーム

    TRTCVideoEncParam* encParam = [TRTCVideoEncParam new];
    encParam.videoResolution = TRTCVideoResolution_640_360;
    encParam.videoBitrate = 600;
    encParam.videoFps = 15;
    encParam.resMode = TRTCVideoResolutionModePortrait; //解像度モードを縦画面モードに設定
    [trtc setVideoEncoderParam: encParam];
    

    Androidプラットフォーム

    TRTCCloudDef.TRTCVideoEncParam encParam = new TRTCCloudDef.TRTCVideoEncParam();
    encParam.videoResolution = TRTCCloudDef.TRTC_VIDEO_RESOLUTION_640_360;
    encParam.videoBitrate = 600;
    encParam.videoFps = 15;
    encParam.videoResolutionMode = TRTCCloudDef.TRTC_VIDEO_RESOLUTION_MODE_PORTRAIT; //解像度モードを縦画面モードに設定
    trtc.setVideoEncoderParam(encParams);
    

    横画面モード

    アプリに横画面のユーザーエクスペリエンスを提供する場合、縦画面モードと同様の作業を行う必要がありますが、手順1と2のパラメータに対応する調整を行うだけでOKです。
    特に手順2では、TRTCVideoEncParamのresMode値は次のとおりとなります。

    • iOSプラットフォームではTRTCVideoResolutionModeLandscapeと指定する必要があります。
    • AndroidプラットフォームではTRTC_VIDEO_RESOLUTION_MODE_LANDSCAPEと指定する必要があります。

    カスタマイズ制御

    TRTC SDKにより提供された多数のインターフェース関数は、ローカルおよびリモートの画面の回転方向およびフィルモードをコントロールできます。

    インターフェース関数 機能の役割 備考説明
    setLocalViewRotation ローカルプレビュー画面での時計回りの回転角度 時計回りの回転を90度、180度、270度という3方向でサポート
    setLocalViewFillMode ローカルプレビュー画面のフィルモード トリミングか黒枠を残すか
    setRemoteViewRotation リモートビデオ画面での時計回りの回転角度 時計回りの回転を90度、180度、270度という3方向でサポート
    setRemoteViewFillMode リモートビデオ画面のフィルモード トリミングか黒枠を残すか
    setVideoEncoderRotation エンコーダーを設定して出力した画面の時計回りの回転角度 時計回りの回転を90度、180度、270度という3方向でサポート

    GSensorMode

    画面の回転はレコーディングやCDN Relayed live streamingの調節に関するさまざまな項目に影響することを考慮すると、TRTC SDKはシンプルな重力センサーの自動調節機能を提供するだけであるので、TRTCCloudのsetGSensorModeインターフェースを介してオンにすることができます。

    この機能は、現在180度の上下回転の自動調節のみをサポートしています。つまり、ユーザー自身の携帯電話が上下180度逆さまになっている場合、相手が見る画面の向きが変わらないように維持します(90度または270度回転への適応はまだサポートしていません)。この自動調節はエンコーダーの方向調整に基づいて実装されているため、レコーディングしたビデオやH5端末に表示されるビデオ画面も、元の向きを維持することができます。

    注意:

    重力センサーの自動調節のもう一つの実装ソリューションでは、各フレームのビデオ情報ごとに現在のビデオの重力方向を対応させた上で、リモートユーザー側でレンダリング方向を自動調節します。ただしこのソリューションでは、レコーディングしたビデオの向きと求めるビデオの向きの一致を維持させるために、追加でトランスコードリソースを導入する必要があるためお勧めできません。