TencentCloudのTRTCを使ってVideoCallを試してみた

この記事は「テンセントクラウドのライブ配信・ビデオ音声通話SDKまたはGME SDKを触ってみた感想 by Tencent Advent Calendar 2022」の12/21の記事になります。

Tencent Cloudとは

日本でクラウドを考えるときは AWS, GCP, Azure がメインとなると考えている。
中国で思いつくのはアリババだろうか。

Tencentと言うと、WeChatを展開しているということもあり聞いたことがある企業ではあるが、恥ずかしながら今回の機会を得るまでクラウドを展開しているとは把握していなかった。

こちらのページを見る限りでは、Tencent Cloudは中国国内でのパブリッククラウドではAlibaba（シェア約4割）についで1割強のシェアを確保している。
1割と言っても、円換算では780億規模。スケールが違う。

リージョンに関しては、流石に中国国内のデータセンター量はすごい
https://www.tencentcloud.com/jp/document/product/213/6091
こちらを見ると中国国内に下記7つのリージョンが存在している。
・華南地区（広州）
・華東地区（上海）
・華東地区（南京）
・華北地区（北京）
・西南地区（成都）
・西南地区（重慶）
・香港・マカオ・台湾地区（中国香港）

中国以外にももちろん展開しており、東京リージョンもあるようだ。

Tencent Cloudの強みはWeChatなどで培った音声通信やゲーム関連のようで、今回の企画でもReal Time Communication技術を使ったものが題材として用意されている。

それでは触っていくことにする

アカウント登録

アカウント登録はこちらから
https://www.tencentcloud.com/jp/

基本情報の入力を行う

左側のChoose the account typeでは個人なので"Individual account"を選択。
それぞれ必要事項を入力していく。
Verification codeは 右側の Send code を押すことでメールアドレスにコードが届くのでそちらを入力する。
時間制限があるので注意が必要だ

「Free Trialではクレジットカード情報は不要だ！」ってどこかに書いてあったけど、TRTCなどを試す場合には必要な認識でいる。

このあたりを登録すると、しばし待ち時間が発生する。

クレジットカードを入れるだけでは全機能を開放はしてくれず、個人認証を行う必要がある。

Acccount CenterからVerificationを行う。
Verification には、パスポートや運転免許などを用いることになる。

ここまでで、アカウントのセットアップとしてはOK。
早速、公式で用意してくれているサンプルを用いてTRTCを触っていきたいと思う

TRTCの有効化

コンソールにログインして、Productから検索ボックスにTRTCと入力すれば「Tencent Real-Time Communication」が表示されるので選択する

TRTCのメイン画面から「Free Demo」を選択する。

「Get Started for Free」と「Free Demo」が並んでいて混乱する。。。

TRTCのOverviewが表示されると思うので、「Create an application now」を選択する

アプリケーション名は特になんでもイイと思う。今回は「DevDemoTRTC」とした

ソースコードのDL画面が出てくる。
試したいアプリ内容に応じて、対応したGithubへと誘導してくれる。
が、あまり気にせずに次へ進む

コンフィグの変更画面に来る。ここでは、アプリごとに割り当てられるIDと、SecretKeyが発行される。

更にアプリの形態を問われるので"Web"を選択する

この SDKAppIDとSecret Key を用いて実際にアプリケーションを動かしていくことになるので、控えておく。

Demoアプリの構築

TRTCのコンソールでアプリケーションソースコードのGithubへと誘導をされるわけなんだけど、私の手元では正直言ってうまく動かなかった。

単純に環境的な要因の可能性も捨てきれないけれど、そもそもREADMEに書かれている画面の見た目も違ったので色々と追いついていないのかもしれない。
もしくは、説明が足りない。

という訳で、探してきた下記のソースを用いる

私が試したのはこちらの"base-react-next"だ。

src/app/config.js 内の SDKAPPID、SECRETKEY変数にそれぞれ値を代入する。

さて、動かすぞ

>npm install -g yarn #yarnをインストール
>yarn # 各種依存パッケージをインストール
>yarn run dev #開発実行

と実行したらエラーが出た

    at c:\Dev\tencent\TRTC_Web\base-react-next\node_modules\next\dist\compiled\webpack\bundle4.js:41261:9
    at c:\Dev\tencent\TRTC_Web\base-react-next\node_modules\next\dist\compiled\webpack\bundle4.js:48730:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'

これ見たことあるやつだ。
という訳で、nodeが新しすぎるんですね。
私はローカルのnodeはfnmで管理しているのでnodeのバージョンをv16.15.1に落としてあげて再び実行（yarnのインストールからやり直し）

yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
info  - Using external babel configuration from c:\Dev\tencent\TRTC_Web\base-react-next\.babelrc
event - compiled successfully
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

エラーなく実行できているみたいなので、ブラウザでアクセスしてみるとこんな感じに。

初期表示が中国語になってしまう場合は右上の翻訳っぽいアイコンをクリックすることで英語表記に変えることができる

JOINをクリックすると、指定したRoomIDに入ることができる。
別タブで開き、同じRoomIDにJOINすることでVideoCallを試すことができる。

無理やり実行しているようなものなので、入ってくる動画を反転させているのは、デモとしては面白い工夫だ

ちゃんとコンソール上でも使われていることを確認することができる

所感

今回のWebにおけるTRTCを用いたVideo Callは非常に簡単に実行することができた。
これくらいのクオリティのものが手軽に作れるというのは良いですね。
APIのリファレンスを読み漁ってみたけど、本当にこの目的用に作られているので、この点であまり迷うことはなさそうだ。

実はこれ以外にGame向けに用意されているGame Multimedia Engineも触ってみた。
UnityやUnRealEngineに対しての知識が不足しているせいで、サンプルをうまく動かすことができずに挫折してしまった。。。
各サービス毎に、開発者向けにドキュメントやサンプルコードなどを数多く提供してくれていて、それはすごいありがたい。
一方で、おそらくサービスの開発スピードが早く、過去に提供されたサンプルとドキュメントが追いついていない感もなくはない。
このあたりは、技術の進化スピードが早いとしょうがない面もありそう。

なかなか触る機会がなかったTencent Cloud。面白い体験だった。