メインコンテンツまでスキップ
バージョン: 1.2.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 +ToggleMute() 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);