ども、@kimihom です。
Twilio コミュニティの オンライン Meetup が開催された。
私の担当である Twilio 最新を追いかける係として、ブログにも記しておく。
Twilio Video, Flex アップデート
今変化の激しいプロダクトは Video と Flex に違いない。
今回のイベントでは、新しくリリースされた Video の 背景画像の適用がデモで見ることができた。
Zoom で当たり前となりつつある、ビデオのバックグラウンド背景画像の適用。これらを Web エンジニアが簡単に自社サービスに取り込めるのが、Twilio API の何よりの強みだ。Zoom は一般的なビデオ配信だけど、Twilio を通じて特定の用途に最適化されたビデオ配信は、今後 ますます発展していくと考えられる。
Flex では、第三者が開発した Flex 拡張アプリを、より簡単に管理できるようになっているようだ。電話をより便利にしたり、チャット、ビデオ通話など顧客とのあらゆるやりとりを一言管理できる Flex。日本により最適な Flex プラグイン を作ることもできるので、アプリのような感覚で顧客とのコミュニケーションをより便利に拡張できる。
Twilio Voice JS SDK 2.0
そして(私にとって) 直近での大きなリリースは、Twilio Voide JS 2.0 のリリースだ。
そこで、ある程度 日本語としてまとめたので、簡単に以下に記しておく。
変更点リンク https://www.twilio.com/docs/voice/sdks/javascript/changelog
執筆時点では、github で公開されている client サンプルアプリは バージョン１のまま。 https://github.com/TwilioDevEd/client-quickstart-node/blob/next/public/index.html
v2 でのサンプルコードが出てきたあと、比較しながら更新した方がいいか。
インストール
import を使った読み込みが基本。
もしくは Github から落として twilio.min.js を読み込ませることで Twilio.Device が利用できる。
https://github.com/twilio/twilio-voice.js/releases
呼び名前 変更
Twilio Client > Twilio Voice JavaScript メインはコードのリファクタリング。
Device singleton behavior removed
Device.setup() で Device 定義できなくなる。
1.0 の頃から new で初期化する方法が推奨されていた。
Connection renamed to Call
Connection の呼び名が Call へ変更。
Signaling connection now lazy loaded
シグナリングと呼ばれる WebRTC の接続 が遅延ロードに。
これに伴って、 ready イベントを実装する必要がなくなった。
発信時は connect イベントを作る。
着信が届くようにするには regsiter を呼ぶ。
トークン期限切れ対応
device.updateToken(newToken) を呼び出す。
Device 状態の変更
[Ready, Busy, Offline] の3つだった。 [Registered, Registering, Unregistered, Destroyed] に変更。 Busy ステータスがなくなる。
Device.isBusy で判別可能。
Device イベントの変更
Registering, Registered, Incoming, Error, Unregistered, Destroyed
今まで登録中のステータスが 曖昧だったのを修正。
offline -> unregistered
ready -> registering と registered
Device 実装の変更
async, promise でコーディングしていく。
const device = new Device(token, { edge: 'ashburn' }); // 着信 await device.register(); device.on(Device.EventName.Incoming, call => { /* use `call` here */ }); // 発信 const device = new Device(token, { edge: 'ashburn' }); const call = await device.connect({ To: 'alice' });
Device CallOptions and Call AcceptOptions standardized
発着信をするその時点で利用する デバイスを定義する。
device.connect({ To: 'client:alice' }, { deviceId: 'default' }); // or device.connect({ params: { To: 'client:alice' }, rtcConstraints: { audio: { deviceId: 'default' } }, });
Moved to new Error format
TwilioError がメインクラスとなる。
class TwilioError extends Error { // エラー原因 causes: string[]; // エラーコード code: number; // エラーの説明 description: string; // エラー内容の説明 explanation: string; // 詳細の説明 message: string; // エラー名 name: string; // 外部システムでのオリジナルエラー originalError?: Error; // 解決方法 solutions: string[]; }
Affected Error Codes
エラーコードの修正。 コードによってエラーメッセージ出してる場合は注意
Device Options
setup() で初期化する際にオプションを指定するしか方法がなかったが、updateOptions によって初期化後に設定を変更できるように。
LogLevel Module
ログレベルを 指定できる。 trace/debug/info/warn/error か？
Deprecations
TwiML で指定したカスタムパラメータの取得方法の変更。 Connection.message => Connection.customParameters
Connection.ignore() したときに on('cancel') イベントが呼ばれなくなった。
Twilio Device オプションの一部削除
2.0 でのオプション一覧
export interface Options { allowIncomingWhileBusy?: boolean; // busy ステータス時に着信 appName?: string; // アプリ名 appVersion?: string; // アプリバージョン audioConstraints?: MediaTrackConstraints | boolean; // WebRTC でのオーディオ制約 closeProtection?: boolean | string; // 通話中にページ閉じる前に確認 codecPreferences?: Connection.Codec[]; // 優先コーデック. デフォルト Opus disableAudioContextSounds?: boolean; // オーディオ制約の無効 dscp?: boolean; // 「Differentiated Services Code Point」の略。 // IP Precedence と同様にパケットに優先度を付ける場合に使用 edge?: string[] | string; // エッジロケーションの指定 forceAggressiveIceNomination?: boolean; // アグレッシブなICE候補者の指名を可能にするChromeブラウザの実験的な機能。 maxAverageBitrate?: number; // VoIPアプリケーションが使用する帯域幅をより適切に制御するための最大平均ビットレート。 rtcConfiguration?: RTCConfiguration; // Twilio デフォルトの RTCConfiguration の上書き sounds?: Partial<Record<Device.SoundName, string>>; // 独自 着信音や dtmf 音 }
終わりに
Twilio Voice JS SDK 2.0 のリリースがあったので、旧Twilio Client を利用している方はアップデートを進めていけたらと思う。
昨日として思いっきり大きなアップデートという形ではなさそうだ。新しい JavaScript 記法でより効率良く JavaScript コードを管理されているように見える。
さぁ次なる Twilio Voice へ進んでいこう！
