Sky WayでPeerアプリをReactで実装

ホーム
BLOG
技術ブログ
Sky WayでPeerアプリをReactで実装

技術ブログ
2021.09.15

Sky WayでPeerアプリをReactで実装

SkyWayは、ビデオ・音声通話の機能をアプリケーションに簡単に実装できる、マルチプラットフォームなSDK & フルマネージドなAPIサービスです。

2013年12月からトライアルサービスとして提供されてきたWebRTC Platform SkyWayが、2017年9月7日に商用サービスとしてリリースされ現在でも数多くのユーザーに利用されています。

https://webrtc.ecl.ntt.com/

有料での枠もありますが、無料でもかなりのことができ、開発段階では十分な検証ができるでしょう。

SkyWayの大きな特徴としてはドキュメントの充実と実装の手軽さにあります。

AWSでもChimeなどReactのSDKなど出てきておりますが、バージョンの変更も早くいまいち実装の勘所を掴むのが難しくなっております。

その点、サポートな充実しているSkyWayではコア部分の実装が非常に簡単にできますので、アプリに必要な外部連携やデザインなどを組み合わせることで手軽にWebRTCのサービスを提供することができます。

今回はチュートリアルの機能をReactで作成してみました。

Peer通信を行うアプリ

環境はReactの環境で作成していますがReactとしての必要な項目はここではあまりありません。

App.jsから呼び出したContent.jsの１ファイルだけになります。


'use strict';
import React, { Component } from 'react';

import Peer from 'skyway-js';
const peer = new Peer({
  key: "Set your key",
  debug: 3,
});


export default function Content(props) {
    let localStream;
    console.log(navigator.userAgent);

    // カメラ映像取得
    navigator.mediaDevices.getUserMedia({video: true, audio: true})
        .then( stream => {
        // 成功時にvideo要素にカメラ映像をセットし、再生
        const videoElm = document.getElementById('my-video');
        videoElm.srcObject = stream;
        videoElm.play();
        // 着信時に相手にカメラ映像を返せるように、グローバル変数に保存しておく
        localStream = stream;
    }).catch( error => {
        // 失敗時にはエラーログを出力
        console.error('mediaDevice.getUserMedia() error:', error);
        return;
    });

    peer.on('open', () => {
        document.getElementById('my-id').textContent = peer.id;
    });

    peer.on('error', err => {
        alert(err.message);
    });

    peer.on('close', () => {
        alert('通信が切断しました。');
    });

    peer.on('call', mediaConnection => {
        mediaConnection.answer(localStream);
        setEventListener(mediaConnection);
    });

    const handleCall = () => {
        const theirID = document.getElementById('their-id').value;
        const mediaConnection = peer.call(theirID, localStream);
        setEventListener(mediaConnection);
    };


    // イベントリスナを設置する関数
    const setEventListener = mediaConnection => {
        mediaConnection.on('stream', stream => {
            // video要素にカメラ映像をセットして再生
            const videoElm = document.getElementById('their-video')
            videoElm.srcObject = stream;
            videoElm.play();
        });
    }

    return (
        <div>
            <video id="my-video" width="400px" autoPlay muted playsInline></video>
            <input id="their-id"></input>
            <button id="make-call" onClick={handleCall}>発信</button>
            <video id="their-video" width="400px" autoPlay muted playsInline></video>
        </div>
    );

}