SkyWayを使用して自分のwebサイトにオンライン対話が出来る仕組みを作成しました。
ルームIDでマッチングするので、ルームIDをWEB上に投稿できるように自分のサイトと組み合わせました。

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

友人とのテストの様子

※投稿することを了承いただいています。ありがとうございます。

出来たこと

①事前に伝えたルームIDを指定することでビデオ会話が出来る
②ルーム内でチャットが出来る
③ルームIDをWEB上に投稿する機能

出来なかったこと

①OSによって画面が反転することへの対応
②HTMLとCSSによる画面ビジュアル整え
③画面を両並びにサイズを調整すること

公開ページ

ルームIDを投稿

画面下の[LET'S TALK]アイコンをクリックすることでトークルームに画面遷移

ソースコード

index6.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>会話ルーム</title>
    <link rel="stylesheet" href="../_shared/style.css">
</head>

<body>
    <div class="container">
        <h1 class="heading">内緒バナシ</h1>
        <p class="note">
            Change Room mode (before join in a room):
            <a href="#">mesh</a> / <a href="#sfu">sfu</a>
        </p>
        <div class="room">
            <div>
                <video id="js-local-stream"></video>
                <span id="js-room-mode"></span>:
                <input type="text" placeholder="Room Name" id="js-room-id">
                <button id="js-join-trigger">Join</button>
                <button id="js-leave-trigger">Leave</button>
            </div>

            <div class="remote-streams" id="js-remote-streams"></div>

            <div>
                <pre class="messages" id="js-messages"></pre>
                <input type="text" id="js-local-text">
                <button id="js-send-trigger">Send</button>
            </div>
        </div>
        <p class="meta" id="js-meta"></p>
    </div>
    <script src="//cdn.webrtc.ecl.ntt.com/skyway-latest.js"></script>
    <script src="main6.js"></script>
</body>

</html>

main6.js

const Peer = window.Peer;

(async function main() {
    const localVideo = document.getElementById('js-local-stream');
    const joinTrigger = document.getElementById('js-join-trigger');
    const leaveTrigger = document.getElementById('js-leave-trigger');
    const remoteVideos = document.getElementById('js-remote-streams');
    const roomId = document.getElementById('js-room-id');
    const roomMode = document.getElementById('js-room-mode');
    const localText = document.getElementById('js-local-text');
    const sendTrigger = document.getElementById('js-send-trigger');
    const messages = document.getElementById('js-messages');
    const meta = document.getElementById('js-meta');
    const sdkSrc = document.querySelector('script[src*=skyway]');

    meta.innerText = `
    UA: ${navigator.userAgent}
    SDK: ${sdkSrc ? sdkSrc.src : 'unknown'}
  `.trim();

    const getRoomModeByHash = () => (location.hash === '#sfu' ? 'sfu' : 'mesh');

    roomMode.textContent = getRoomModeByHash();
    window.addEventListener(
        'hashchange',
        () => (roomMode.textContent = getRoomModeByHash())
    );

    const localStream = await navigator.mediaDevices
        .getUserMedia({
            audio: true,
            video: true,
        })
        .catch(console.error);

    // Render local stream
    localVideo.muted = true;
    localVideo.srcObject = localStream;
    localVideo.playsInline = true;
    await localVideo.play().catch(console.error);

    // eslint-disable-next-line require-atomic-updates
    const peer = (window.peer = new Peer({
        key: "hogehoge",
        debug: 3,
    }));

    // Register join handler
    joinTrigger.addEventListener('click', () => {
        // Note that you need to ensure the peer has connected to signaling server
        // before using methods of peer instance.
        if (!peer.open) {
            return;
        }

        const room = peer.joinRoom(roomId.value, {
            mode: getRoomModeByHash(),
            stream: localStream,
        });

        room.once('open', () => {
            messages.textContent += '=== You joined ===\n';
        });
        room.on('peerJoin', peerId => {
            messages.textContent += `=== ${peerId} joined ===\n`;
        });

        // Render remote stream for new peer join in the room
        room.on('stream', async stream => {
            const newVideo = document.createElement('video');
            newVideo.srcObject = stream;
            newVideo.playsInline = true;
            // mark peerId to find it later at peerLeave event
            newVideo.setAttribute('data-peer-id', stream.peerId);
            remoteVideos.append(newVideo);
            await newVideo.play().catch(console.error);
        });

        room.on('data', ({ data, src }) => {
            // Show a message sent to the room and who sent
            messages.textContent += `${src}: ${data}\n`;
        });

        // for closing room members
        room.on('peerLeave', peerId => {
            const remoteVideo = remoteVideos.querySelector(
                `[data-peer-id=${peerId}]`
            );
            remoteVideo.srcObject.getTracks().forEach(track => track.stop());
            remoteVideo.srcObject = null;
            remoteVideo.remove();

            messages.textContent += `=== ${peerId} left ===\n`;
        });

        // for closing myself
        room.once('close', () => {
            sendTrigger.removeEventListener('click', onClickSend);
            messages.textContent += '== You left ===\n';
            Array.from(remoteVideos.children).forEach(remoteVideo => {
                remoteVideo.srcObject.getTracks().forEach(track => track.stop());
                remoteVideo.srcObject = null;
                remoteVideo.remove();
            });
        });

        sendTrigger.addEventListener('click', onClickSend);
        leaveTrigger.addEventListener('click', () => room.close(), { once: true });

        function onClickSend() {
            // Send message to all of the peers in the room via websocket
            room.send(localText.value);

            messages.textContent += `${peer.id}: ${localText.value}\n`;
            localText.value = '';
        }
    });

    peer.on('error', console.error);
})();

解説

key: "hogehoge",の部分は、SkyWayにログイン後に確認できるご自身のAPIを指定します。

最後に

・時間が空いたらもう少しHTML/CSSでUI面の調整をしたいと思います。

SkyWayを使用して自分のwebサイトにオンライン対話が出来る仕組みを作成してみた