クイック スタート: 通話アプリにデータ チャネル メッセージングを追加する

データ チャネル機能 API を使用すると、音声通話中およびビデオ通話中のリアルタイム メッセージングが可能になります。 このクイックスタート ガイドでは、データ チャネル機能を統合して、グループ通話内の参加者間でテキスト メッセージを交換できるようにする方法を示します。 データ チャネル機能以外にもさまざまなメッセージング ソリューションがあり、特定の使用シナリオに適したソリューションを選択する必要があることに注意してください。

DataChannelSender オブジェクトを作成する

メッセージを送信するには、まず DataChannelSender オブジェクトを作成する必要があります。 このカスタム メッセージング アプリケーションでは、channelId に数値を割り当てることをお勧めします。この割り当ては、さまざまなアプリケーションのユース ケースを区別する役割を果たします。 たとえば、カスタム メッセージに相当する 1000 を channelId に割り当てることができます。

const dataChannel = call.feature(Features.DataChannel);
const messageSender = dataChannel.createDataChannelSender({
    channelId: 1000
});

信頼性、帯域幅、優先度など、他にもいくつかのオプションがあります。 ここではこれらを無視して、既定値を使用することができます。 sender オブジェクトが作成されている間でも、メッセージを受信するには receiver オブジェクトが必要です。

リスナーを登録して DataChannelReceiver オブジェクトを取得する

receiver オブジェクトを取得するには、dataChannelReceiverCreated イベントをキャプチャするリスナーを登録する必要があります。 receiver オブジェクトが作成されると、SDK は receiver オブジェクトと共にイベントを出力します。

dataChannel.on('dataChannelReceiverCreated', receiver => {
    // receiver.channelId
    // receiver.senderParticipantIdentifier, which shows the sender id
});

リスナー コールバック関数内で receiver オブジェクトにアクセスして、channelId や送信側参加者 ID senderParticipantIdentifier などの情報を取得することができます。 作成された receiver オブジェクトごとに SDK がイベントを 1 回出力するため、receiver オブジェクト参照を維持するのはユーザーの責任です。

DataChannelReceiver オブジェクトの messageReady イベントと close イベントを処理する

メッセージが到着すると、DataChannelReceiver オブジェクトはメッセージを受信し、内部バッファーに保存して、messageReady イベントを出力します。 いつでも readMessage API を呼び出すことができるため、メッセージを受信するために messageReady イベント リスナーを登録する必要はありません。 ただし、ベスト プラクティスとして、messageReady リスナー コールバック内でメッセージを読み取ることをお勧めします。メッセージ処理に時間がかかる場合は、Web Worker に作業をオフロードして、メッセージ受信をブロックしないようにすることができます。

dataChannel.on('dataChannelReceiverCreated', receiver => {
    if (receiver.channelId === 1000) {
        receiver.on('close', () => {
            console.log(`data channel id = ${receiver.channelId} from ${JSON.stringify(receiver.senderParticipantIdentifier)} is closed`);
        });
        receiver.on('messageReady', () => {
            const message = receiver.readMessage();
            // process the message
        });
    }
});

参加者を設定する

メッセージの受信者を指定するには、DataChannelSender.setParticipants API を使用できます。 sender オブジェクトは、指定した最新の参加者リストを管理します。 参加者の種類は CommunicationIdentifier です。これは remoteParticipant.identifier から取得できます。 詳細については、「リモート参加者のプロパティにアクセスする」を参照してください。

const user = call.remoteParticipants[0]; // assume the user wants to send a message to the first participant in the remoteParticipants list
messageSender.setParticipants([user.identifier]);

参加者リストは 64 人の参加者に制限されていることに注意してください。 参加者リストが空の配列の場合、SDK は通話内のすべての参加者にメッセージをブロードキャストします。

メッセージを送受信する

DataChannel 機能 API では、データを Uint8Array 型として渡す必要があります。 sendMessage API を使用して JavaScript 文字列を直接送信することはできません。 たとえば、文字列 abc を送信するために sender.sendMessage('abc') を使用することはできません。 代わりに、まず、データをバイト バッファーにシリアル化する必要があります。

const data = (new TextEncoder()).encode('abc');
sender.sendMessage(data);

JSON オブジェクトを送信する別の例を次に示します。

const obj = {...}; // some object
const data = (new TextEncoder()).encode(JSON.stringify(obj));
sender.sendMessage(data);

メッセージを受信してデコードする

dataChannel.on('dataChannelReceiverCreated', receiver => {
    if (receiver.channelId === 1000) {
        const textDecoder = new TextDecoder();
        receiver.on('close', () => {
            console.log(`data channel id = ${receiver.channelId} from ${JSON.stringify(receiver.senderParticipantIdentifier)} is closed`);
        });
        receiver.on('messageReady', () => {
            const message = receiver.readMessage();
            const text = textDecoder.decode(message.data);
            console.log(`from ${JSON.stringify(receiver.senderParticipantIdentifier)}:${text}`);
        });
    }
});

完全なサンプルについては、次のリンクを参照してください: https://github.com/Azure-Samples/communication-services-web-calling-tutorial

概要

データ チャネル機能 API を使用すると、音声通話中およびビデオ通話中のリアルタイムでのデータ メッセージングが可能になります。 このクイックスタート ガイドでは、データ チャネル機能を通話に統合し、データ チャネル API を使用してデータ チャネルを使用してデータ メッセージを送受信する方法について説明します。

前提条件

音声通話を使用してサンプル アプリを設定するには、音声通話のクイック スタートを参照してください。

クラス

列挙型

エラー コード

メソッド

データ チャネル機能を有効にする

1. 前提条件の手順で確立された進行中の呼び出しオブジェクトを取得します。
2. データ チャネル機能オブジェクトを取得します。

DataChannelCallFeature dataChannelCallFeature = call.feature(Features.DATA_CHANNEL);

データ メッセージの受信

1. DataChannelReceiverCreatedListener を定義します。

DataChannelReceiverCreatedListener receiverCreatedListener = new DataChannelReceiverCreatedListener() {
    @Override
    public void onReceiverCreated(DataChannelReceiverCreatedEvent e) {
        DataChannelReceiver receiver = e.getReceiver(); // get the new data channel receiver
        int channelId = receiver.getChannelId(); // get the channel id
        CommunicationIdentifier senderId = receiver.getSenderIdentifier(); // get the message sender id
        // listen to the message received event and closed event from this receiver
        // receiver.addOnMessageReceivedListener(messageReceivedlistener);
        // receiver.addOnClosedListener(receiverClosedListener);
    }
};

2. receiverCreatedListener を登録します。

dataChannelCallFeature.addOnReceiverCreatedListener(receiverCreatedListener);

3. MessageReceivedListener を定義します。

MessageReceivedListener messageReceivedListener = new MessageReceivedListener() {
    @Override
    public void onMessageReceived(PropertyChangedEvent e) {
        DataChannelMessage message = e.getReceiver().receiveMessage(); // read the data message from the receiver
        int sequence = message.getSequenceNumber(); // get the message sequence number
        byte[] data = message.getData(); // get the data content
    }
};

4. ReceiverClosedListener を定義します。

ReceiverClosedListener receiverClosedListener = new ReceiverClosedListener() {
    @Override
    public void onReceiverClosed(PropertyChangedEvent e) {
        DataChannelReceiver receiver = e.getReceiver(); // get the data channel receiver to be closed
    }
};

5. messageReceivedListener と receiverClosedListener を登録します。

receiver.addOnMessageReceivedListener(messageReceivedlistener);
receiver.addOnClosedListener(receiverClosedListener);

データ メッセージの送信

1. DataChannelSenderOptions を構成します。

DataChannelSenderOptions options = new DataChannelSenderOptions();
options.setChannelId(1000);
options.setBitrateInKbps(32);
options.setPriority(DataChannelPriority.NORMAL);
options.setReliability(DataChannelReliability.LOSSY);

List<CommunicationIdentifier> participants = Arrays.asList( /* identifier1, identifier2, ... */ );
options.setParticipants(participants);

2. DataChannelSender を取得し、データ メッセージを送信します

DataChannelSender dataChannelSender = dataChannelCallFeature.getDataChannelSender(options);

// msgData contains the byte[] data to be sent
dataChannelSender.sendMessage(msgData);

// change participants in the channel if needed
dataChannelSender.setParticipants(new ArrayList<CommunicationIdentifier>()); 

概要

データ チャネル機能 API を使用すると、音声通話中およびビデオ通話中のリアルタイムでのデータ メッセージングが可能になります。 このクイックスタート ガイドでは、データ チャネル機能を通話に統合し、データ チャネル API を使用してデータ チャネルを使用してデータ メッセージを送受信する方法について説明します。

前提条件

音声通話を使用してサンプル アプリを設定するには、音声通話のクイック スタートを参照してください。

クラス

列挙型

エラー コード

メソッド

データ チャネル機能を有効にする

1. 前提条件の手順で確立された進行中の呼び出しオブジェクトを取得します。
2. データ チャネル機能オブジェクトを取得します。

var dataChannelCallFeature = self.call!.feature(Features.dataChannel)

データ メッセージの受信

let featureDelegate = new FeatureDelegate()
let receiverDelegate = new ReceiverDelegate()
dataChannelCallFeature!.delegate = featureDelegate

class FeatureDelegate: NSObject, DataChannelCallFeatureDelegate {
    public func dataChannelCallFeature(_ dataChannelCallFeature: DataChannelCallFeature, didCreateReceiver args: DataChannelReceiverCreatedEventArgs) {
        let receiver = args.receiver // get the new data channel receiver
        let channelId = receiver.channelId // get the channel id
        let senderId = receiver.senderIdentifier // get the message sender id

        receiver.delegate = receiverDelegate
    }
}

class ReceiverDelegate: NSObject, DataChannelReceiverDelegate {
    public func dataChannelReceiver(_ dataChannelReceiver: DataChannelReceiver, didReceiveMessage args: PropertyChangedEventArgs) {
        let message = dataChannelReceiver.receiveMessage() // read the data message from the receiver
        let sequence = message?.sequenceNumber // get the message sequence number
        let data = message?.data // get the data content
    }
    
    public func dataChannelReceiver(_ dataChannelReceiver: DataChannelReceiver, didClose args: PropertyChangedEventArgs) {
       let channelId = dataChannelReceiver.channelId // get the data channel id to be closed
    }
}

データ メッセージの送信

1. DataChannelSenderOptions を構成します。

let options = new DataChannelSenderOptions()
options.channelId = 1000
options.bitrateInKbps = 32
options.priority = DataChannelPriority.normal
options.reliability = DataChannelReliability.lossy

let communicationIdentifiers: [CommunicationIdentifier] = [ /* identifier1, identifier2, ... */ ]
options.participants = communicationIdentifiers

2. DataChannelSender を定義し、データ メッセージを送信します

DataChannelSender sender = dataChannelCallFeature.getDataChannelSender(options)

// msgData contains the data to be sent
sender.sendMessage(msgData)

// change participants in the channel if needed
let participants: [CommunicationIdentifier] = []
dataChannelSender.setParticipants(participants: participants)

概要

データ チャネル機能 API を使用すると、音声通話中およびビデオ通話中のリアルタイムでのデータ メッセージングが可能になります。 このクイックスタート ガイドでは、データ チャネル機能を通話に統合し、データ チャネル API を使用してデータ チャネルを使用してデータ メッセージを送受信する方法について説明します。

前提条件

音声通話を使用してサンプル アプリを設定するには、音声通話のクイック スタートを参照してください。

クラス

列挙型

エラー コード

メソッド

データ チャネル機能を有効にする

1. 前提条件の手順で確立された進行中の呼び出しオブジェクトを取得します。
2. データ チャネル機能オブジェクトを取得します。

DataChannelCallFeature dataChannelCallFeature = call.Features.DataChannel;

データ メッセージの受信

1. DataChannelReceiverCreated イベント ハンドラーを定義します。

void DataChannelReceiverCreatedHandler(object sender, DataChannelReceiverCreatedEventArgs args) 
{
    DataChannelReceiver receiver = args.Receiver; // get the new data channel receiver
    int channelId = receiver.ChannelId; // get the channel id
    CallIdentifier senderId = receiver.SenderIdentifier; // get the message sender id
    
    // add event handlers for the message received event and closed event from this receiver
    // receiver.MessageReceived += MessageReceivedHandler;
    // receiver.Closed += ReceiverClosedHandler;
}

2. DataChannelReceiverCreatedHandler をアタッチします。

dataChannelCallFeature.ReceiverCreated += DataChannelReceiverCreatedHandler;

3. MessageReceived イベント ハンドラーを定義します。

void MessageReceivedHandler(object sender, PropertyChangedEventArgs args) 
{
    DataChannelMessage message = (sender as DataChannelReceiver).ReceiveMessage(); // read the data message from the receiver
    long sequence = message.SequenceNumber; // get the message sequence number
    byte[] data = message.Data; // get the data content
}

4. Closed イベント ハンドラーを定義します。

void ReceiverClosedHandler(object sender, PropertyChangedEventArgs args) 
{
    DataChannelReceiver receiver = sender as DataChannelReceiver; // get the data channel receiver to be closed
};

5. MessageReceivedHandler と ReceiverClosedHandler をアタッチします。

receiver.MessageReceived += MessageReceivedHandler;
receiver.Closed += ReceiverClosedHandler;

データ メッセージの送信

1. DataChannelSenderOptions を構成します。

DataChannelSenderOptions options = new DataChannelSenderOptions();
options.ChannelId = 1000;
options.BitrateInKbps = 32;
options.Priority = DataChannelPriority.Normal;
options.Reliability = DataChannelReliability.Lossy;
var participants = new List<CallIdentifier> { /* identifier1, identifier2, ... */ };
options.Participants = participants.AsReadOnly();

2. DataChannelSender を定義し、データ メッセージを送信します

DataChannelSender sender = dataChannelCallFeature.GetDataChannelSender(options);
// msgData contains the byte[] data to be sent
sender.SendMessage(msgData);
// change participants in the channel if needed
sender.SetParticipants(new List<CallIdentifier>().AsReadOnly());