webRTCっていいよね
みなさんビデオ会議してますか？リモートワークが普及した影響でその頻度は益々増加していることと思います。そんな身近なweb技術、フロント的に知っておいたほうがいいだろう！ってことで今回の勉強会ではその根幹たるwebRTCに関して色々学んでいこうと思います
目次
webRTCってなに？
SkyWayを使ってビデオチャットシステムつくってみた
TwilioとSkyWay
webRTCってなに？
概要
WebRTCとは、Webブラウザなどを介して高速なデータ通信を実現する規格のこと。HTMLのAPIの１つ。特に映像や音声などの容量が大きいデータをリアルタイムに送受信できること、P2P（ピアツーピア）の仕組みを持っていることから、ビデオチャットやWeb会議などに応用されています。WebRTCはオープン規格であり、WindowsやMac、iOS、Androidなどがサポートすることを発表している。
仕組み
SkyWayを使ってビデオチャットシステムつくってみた
サンプル
SkyWayの説明
環境：Nuxt / TypeScript
SDKのインストール
Nuxt.jsのプロジェクトにJavaScriptのSDKをインストールします。
yarn add skyway-js
ビデオチャットシステムの開発
型定義ファイル作成
skyway.tsexport interface SkywayMediaStream extends MediaStream {
peerId: string
}
インポート
Skyway.tsimport { Component, Vue } from 'nuxt-property-decorator';
import Peer, { SfuRoom } from 'skyway-js';
import { SkywayMediaStream } from '@/interfaces/skyway.ts';
import { ChatMessage } from '@/interfaces/chatMessage.ts';
interface IData {
peer: Peer | null;
room: SfuRoom | null;
localStream: MediaStream | undefined;
isMute: boolean;
remoteStreams: SkywayMediaStream[];
chatMessage: string;
messageList: ChatMessage[];
}
@Component({
props: {
userName: {
type: String,
default: null,
},
roomName: {
type: String,
default: null,
},
},
data(): IData {
return {
peer: null,
room: null,
localStream: undefined,
isMute: false,
remoteStreams: [],
chatMessage: '',
messageList: [],
};
},
})
Peerを作成し、シグナリングサーバに接続
Skyway.ts async mounted() {
...↑ 自身のメディアストリームを取得
// PeerIdは設定可能。しない場合はランダムな16桁の文字列が返ってくる
this.$data.peer = await new Peer(this.$props.userName, {
key: process.env.SKYWAY_API_KEY || '',
debug: 3,
});
this.$data.peer.on('open', this.connect);
}
ルームに接続し、イベントを監視
Skyway.ts connect() {
if (!this.$data.peer || !this.$data.peer.open) {
return;
}
// ルームに接続する
this.$data.room = this.$data.peer.joinRoom(this.$props.roomName, {
mode: 'sfu',
stream: this.$data.localStream,
}) as SfuRoom;
if (this.$data.room) {
// 他Peerからメディアストリームを受信した場合
this.$data.room.on('stream', (stream: SkywayMediaStream): void => {
this.$data.remoteStreams.push(stream);
});
// 他Peerがルームから去った場合
this.$data.room.on('peerLeave', (peerId: string): void => {
const audio = document.getElementById(peerId);
if (audio) {
audio.remove();
}
const newRemoteStreams = this.$data.remoteStreams.filter((item: SkywayMediaStream) => item.peerId !== peerId);
this.$data.remoteStreams = newRemoteStreams;
});
// 他Peerからデータ（今回はチャットメッセージ）を受信した場合
this.$data.room.on('data', ({ src, data }: any): void => {
const msg = {
id: src,
text: data.text,
};
this.$data.messageList.push(msg);
});
// 他Peerがルームに入室した場合
this.$data.room.on('peerJoin', (peerId: string): void => {
console.log('新規入室者です', peerId);
});
}
}
メソッド
skyway.ts // 配信しているメディアストリームをミュート
mute() {
if (this.$data.localStream) {
const audioTrack = this.$data.localStream.getAudioTracks()[0];
this.$data.isMute = !this.$data.isMute;
audioTrack.enabled = !this.$data.isMute;
}
}
// ルームから退出
disconnect() {
if (this.$data.room) {
this.$data.room.close();
}
}
// メッセージ送信
sendMessage() {
const msg = {
id: this.$props.userName,
text: this.$data.chatMessage,
};
this.$data.room.send(msg);
this.$data.messageList.push(msg);
}
TwilioとSkyWay
twilioはアメリカの企業が提供するAPI。日本ではKDDIウェブコミュニケーションズが代理店。HTTPと公衆交換電話網を接続できるのがウリ
電話の開発用SDKが存在する（自動返信、転送など可能）。
公式ドキュメントがちょっと分かりづらい（多分KDDIが和訳してるはずなんですが、翻訳されてないページが混ざっていたり、日本語がおかしい場合あり）
twilioは初期費用無し 従量課金制、skywayは初期費用あり 従量課金制
個人で試す分には無料版があるskywayでいいと思います