メインコンテンツまでスキップ
バージョン: 1.3.0

Chat using WebRTC

What for?​

コストをできるだけ抑えてコミュニケーションを取る手段としてP2P(Peer to Peer)があります。

このモジュールはNative(C#)とWebGL(JavaScript)向けのP2Pによるテキスト/ボイスチャットを提供します。

Specification​

  • P2Pによるテキストチャットができます。
  • P2Pによるボイスチャットができます。

Architecture​

Unity​

classDiagram TextChatClientProvider ..> TextChatClient TextChatClient <|-- NativeTextChatClient TextChatClient <|-- WebGLTextChatClient VoiceChatClientProvider ..> VoiceChatClient VoiceChatClientProvider ..> VoiceChatConfig VoiceChatClient <|-- NativeVoiceChatClient VoiceChatClient <|-- WebGLVoiceChatClient class TextChatClientProvider { +Provide(peerClient)$ TextChatClient } class TextChatClient { +OnMessageReceived IObservable +Send(message) void +Clear() void } class NativeTextChatClient { } class WebGLTextChatClient { } class VoiceChatClientProvider { +Provide(peerClient, config)$ VoiceChatClient } class VoiceChatConfig { } class VoiceChatClient { +OnMuted IObservable +OnAudioLevelChanged IObservable +HasMicrophone() bool +ToggleMute() void +SetInVolume(volume) void +SetOutVolume(volume) void +Clear() void } class NativeVoiceChatClient { } class WebGLVoiceChatClient { }

JavaScript​

classDiagram WebGLTextChatClient ..> WebGLHelper WebGLHelper ..> TextChatClient TextChatAdapter ..> TextChatClient WebGLVoiceChatClient ..> WebGLHelper WebGLHelper ..> VoiceChatClient VoiceChatAdapter ..> VoiceChatClient class WebGLHelper { <<C#>> } class WebGLTextChatClient { <<C#>> } class WebGLVoiceChatClient { <<C#>> } class TextChatAdapter { <<TypeScript>> } class TextChatClient { <<TypeScript>> } class VoiceChatAdapter { <<TypeScript>> } class VoiceChatClient { <<TypeScript>> }

Installation​

Package​

Unity​

https://github.com/extreal-dev/Extreal.Integration.Chat.WebRTC.git

npm​

@extreal-dev/extreal.integration.chat.webrtc

Dependencies​

このモジュールは次のパッケージを使います。

Unity​

npm​

モジュールバージョンと各パッケージバージョンの対応はReleaseを参照ください。

Settings​

このモジュールはP2P.WebRTCを使ってP2Pを実現しています。 そのためP2P.WebRTCのSettingsが必要になります。 P2P.WebRTCを設定した上で次の初期化を追加してください。

各Providerを使ってClientを作成します。

public class ClientControlScope : LifetimeScope
{
    protected override void Configure(IContainerBuilder builder)
    {
        var peerConfig = new PeerConfig("http://127.0.0.1:3010");
        var peerClient = PeerClientProvider.Provide(peerConfig);
        builder.RegisterComponent(peerClient);

        var textChatClient = TextChatClientProvider.Provide(peerClient);
        builder.RegisterComponent(textChatClient);

        var voiceChatClient = VoiceChatClientProvider.Provide(peerClient);
        builder.RegisterComponent(voiceChatClient);

        builder.RegisterEntryPoint<ClientControlPresenter>();
    }
}

WebGLで使う場合はさらにJavaScriptの初期化が必要になります。 各Adapterを作成してadapt関数を呼び出します。

import { PeerAdapter } from "@extreal-dev/extreal.integration.p2p.webrtc";
import { TextChatAdapter, VoiceChatAdapter } from "@extreal-dev/extreal.integration.chat.webrtc";

const peerAdapter = new PeerAdapter();
peerAdapter.adapt();

const textChatAdapter = new TextChatAdapter();
textChatAdapter.adapt(peerAdapter.getPeerClient);

const voiceChatAdapter = new VoiceChatAdapter();
voiceChatAdapter.adapt(peerAdapter.getPeerClient);

Usage​

P2Pによるテキストチャットを行う​

テキストチャットはP2P.WebRTCを使ってP2Pを実現しています。 P2Pの接続確立はP2P.WebRTCのAPIを使ってください。

テキストチャットの機能はTextChatClientが提供します。

メッセージ送信はSendメソッドを使います。

textChatClient.Send(message);

メッセージ受信はOnMessageReceivedイベントを使います。 パラメータとして文字列のメッセージが渡ってきます。

textChatClient.OnMessageReceived
    .Subscribe(message =>
    {
        // do something
    })
    .AddTo(disposables);

テキストチャットを終了する場合はClearメソッドを使います。

textChatClient.Clear();

P2Pによるボイスチャットを行う​

備考

マイクが使用できない場合はスピーカーのみ有効となります。

ボイスチャットはP2P.WebRTCを使ってP2Pを実現しています。 P2Pの接続確立はP2P.WebRTCのAPIを使ってください。

ボイスチャットの機能はVoiceChatClientが提供します。

ミュート切り替えはToggleMuteメソッドを使います。

voiceChatClient.ToggleMute();

ミュート切り替え後の値（bool）はOnMutedイベントで受け取れます。

voiceChatClient.OnMuted
    .Subscribe(muted =>
    {
        // do something
    })
    .AddTo(disposables);

ミュートの初期値を指定したい場合はVoiceChatConfigで指定します。

var voiceChatConfig = new VoiceChatConfig(initialMute: false);
var voiceChatClient = VoiceChatClientProvider.Provide(peerClient, voiceChatConfig);

入力音量調整にはSetInVolumeメソッドを使います。

voiceChatClient.SetInVolume(volume);

入力音量の初期値を指定したい場合はVoiceChatConfigで指定します。

var voiceChatConfig = new VoiceChatConfig(initialInVolume: 0.8f);
var voiceChatClient = VoiceChatClientProvider.Provide(peerClient, voiceChatConfig);

出力音量調整にはSetOutVolumeメソッドを使います。

voiceChatClient.SetOutVolume(volume);

出力音量の初期値を指定したい場合はVoiceChatConfigで指定します。

var voiceChatConfig = new VoiceChatConfig(initialOutVolume: 0.8f);
var voiceChatClient = VoiceChatClientProvider.Provide(peerClient, voiceChatConfig);

ボイスチャットのクライアントの状態をトリガーに処理を追加する​

VoiceChatClientは次のイベント通知を設けています。

  • OnAudioLevelChanged
    • タイミング：指定した頻度ごとに、発話音量の変化があったとき
    • タイプ：IObservable
    • パラメータ：IDと発話音量のペア

発話音量の取得頻度を指定したい場合はVoiceChatConfigで指定します。

var voiceChatConfig = new VoiceChatConfig(InitialAudioLevelCheckIntervalSeconds: 0.5f);
var voiceChatClient = VoiceChatClientProvider.Provide(peerClient, voiceChatConfig);