【ラズパイDIY講座】ラズパイゼロで作る監視カメラ⑤ 〜 WebRTCクライアントMomoのシグナリングをハックする

構成

前回に引き続きラズパイゼロにカメラモジュールV2を接続したマシーンをMomoクライアントとして利用します。

また別のLinuxマシーン(手元ではラズパイ3B+)にnode.jsが利用できるようにしておいて、これをシグナリングサーバーとしてネットワーク上に接続させています。

Momoクライアントとシグナリングサーバーの内部構成は以下のようになります。

これはUV4LサーバーとWebRTC通信を確立させたときの内容と同様です。

【ラズパイDIY講座】ラズパイゼロで作る監視カメラ③ 〜 Node.jsでシグナリングサーバ構築

シグナリングサーバーを別のラズパイに立ててからWebRTC通信を確立する方法を検討し、さらに理解を深めていきます。

先にMomoクライアント側を立ち上げておきます。今回は動画配信専用ですので、

SDL設定

は不要です。

またローカルネットワークで試すので、Google STUNを利用しないオプションの

--no-google-stun

も追加しておきます。

開く/閉じる

            $ ./momo --log-level 0 --no-audio-device --no-google-stun test

起動後のMomoクライアントのWebSocketアクセスエンドポイントはデフォルトで

ws://[Momo 1のIPアドレス]:8080/ws

になります。

シグナリングサーバー実装

前回のUV4L版のシグナリングサーバーのコード

をMomo用に書き換えます。

開く/閉じる

            const webSocketsServerPort = 41337;
const webSocketServer = require('websocket').server;
const http = require('http');
const fs = require('fs');

const server = http.createServer((request, response) => {
    //👇ブラウザクライアント用のindex.htmlは後述
    fs.readFile('./index.html', 'utf-8', (error, data) => {
        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.write(data);
        response.end();
    });
});

const clients = [];

const webSocketClient = require('faye-websocket');
let momoClient = null;
const momoServerIp = process.env.MOMO_IP || '127.0.0.1';

server.listen(webSocketsServerPort, () => {
    console.log(`${(new Date()).toISOString()} | Server is listening on port# ${webSocketsServerPort} .`);
});

const wsServer = new webSocketServer({httpServer: server});

//👇登録されたクライアントから接続requestを受け取った
wsServer.on('request', (request) => {
    console.log(`${(new Date()).toISOString()} | Connection from Origin ${request.origin} .`);
    console.log(request);
    const connection = request.accept(null, request.origin);
    console.log(`${(new Date()).toISOString()} | Connection accepted.`);

    //👇Momoサーバーに接続開始
    createMomoClient();

    //👇クライアントを番号で管理
    const index = clients.push(connection) - 1;

    //👇クライアントからmessageを受信した
    connection.on('message', (message) => {
        for (let i=0; i < clients.length; i++) {
            if (connection === clients[i]) {
                console.log('[Listener] > [MOMO]');
                momoClient.send(message.utf8Data);
            }
        };
    });

    //👇クライアントが切断された
    connection.on('close', (connection) => {
        console.log(`${(new Date()).toISOString()} | Peer# ${connection} disconnected.`);
        //👇切断したクライアントを削除
        clients.splice(index, 1);
        if (momoClient) momoClient.close();
    });
});

function createMomoClient() {
    if (momoClient) return;
    //👇MomoのWebSocket用エンドポイント
    momoClient = new webSocketClient.Client(`ws://${momoServerIp}:8080/ws`);
    momoClient.on('open', (event) => {
        console.log(`MOMOが開きました`);
        //👇初期化処理
        console.log('MOMOサーバーに接続中...');
    });

    momoClient.on('message', (event) => {
        console.log(`MOMOからメッセージ`);
        for (let i=0; i < clients.length; i++) {
            console.log('[MOMO] > [WRTC]');
            console.log(event.data);
            //👇接続中のすべてのwsクライアントへメッセージ送信
            clients[i].sendUTF(event.data);
        };
    });

    momoClient.on('error', (event) => {
        console.log(`MOMOエラー発生`);
    });

    //👇切断時のイベント
    momoClient.on('close', () => {
        console.log('クライアントのコネクションを切断されました');
    });
}

前回のシグナリングサーバーのソースコードとほぼ変わりません。

なおポイントとなるwebsocketの使い方を詳しく知りたい方は

前回以前の記事

から良く読んでいただくことをおすすめします。

ブラウザWebRTCクライアント用のindex.html

Momo-WebRTCプロトコル(Ayame方式)のよるシグナリング

では

も手直しをする必要があります。

前回のUV4LをWebSocket越しに操作した要領で、momoでも同様の機能を実装していきます。

【ラズパイDIY講座】ラズパイゼロで作る監視カメラ③ 〜 Node.jsでシグナリングサーバ構築

シグナリングサーバーを別のラズパイに立ててからWebRTC通信を確立する方法を検討し、さらに理解を深めていきます。

Momo-WebRTCプロトコル

ここで改めて

Momo(Ayame)のシグナリング方式

をおさらいしておきましょう。

MomoのWebSocketメッセージフォーマットは以下の種類があります。

開く/閉じる

            - offer
- answer
- candidate
- bye
- register (※Ayameサーバーが必要)
- accept (※Ayameサーバーが必要)
- reject (※Ayameサーバーが必要)

まずは

register

ですが、Momoクライアントがサーバー側へ対して

roomId

と

clientId

を登録するためのリクエストです。

開く/閉じる

            {
    type: "register",
    roomId: "<string>",
    clientId: "<string>"
}

シグナリングサーバがAyameの場合、registerリクエストを受け取ったら、そのMomoクライアントが指定したroomIdに入室できるかチェックし、可能であれば

accept

、不可であれば

reject

で応答します。

accept

レスポンスは入室が可能であることをMomoクライアントに知らせます。

開く/閉じる

            {
    type: "accept",
    isExistClient: "<boolean>"
}

Momoクライアントは

accept

を受け取ると、

isExistClient

が

true

の場合に

offer

リクエストを送信します。また

isExsistClient

が

false

の場合は

answer

メッセージを待ちます。

何からの理由で入室できない場合はサーバーは

reject

をMomoクライアントに知らせます。

開く/閉じる

            {
    type: "reject",
    reason: "<string>"
}

これを受け取ったら、Momoクライアントは開いている

RTCPeerConnection

や

WebSocket

を閉じて初期化されます。

offer

リクエストはMomoクライアントが

accept

レスポンスの

isExistClient: true

であった場合に、シグナリングサーバーへ送信されます。

開く/閉じる

            {
    type: "offer",
    sdp: "v=0\r\no=- 4765067307885144980..."
}

これを受け取ったMomoクライアント側で、

remoteDescription

でこのSDPを受け取り保管します。

このSDPを受け取ると

answer

レスポンスを同時に生成し、

localDescription

にセットした後に自分のSDPで返答させることができます。

answer

レスポンスは、

accept

レスポンスで

isExistClient: false

を受け取ったクライアントに、他のクライアントからの

offer

リクエストが届くまで待機させ、

offer

を受け取ったら

answer

レスポンスを送信させることもできます。

開く/閉じる

            {
    type: "answer",
    sdp: "v=0\r\no=- 4765067307885144980..."
}

コネクションが確立したら、

candidate

レスポンスでICE情報を交換します。

開く/閉じる

            {
    type: "candidate",
    ice: {candidate: "...."}
}

このICEを受け取ったMomoクライアントは相手方のICE Candidateを保管します。

通信を終える場合には

bye

リクエストでWebSocket通信をを切断させます。

開く/閉じる

            {type: "bye"}

この

bye

を受け取ったクライアントは

RTCPeerConnection

を閉じ、WebRTC通信が終了します。

オーディエンス側のWebRTCクライアント(index.html)の実装

クライアントはブラウザ側からのシグナリングサーバーへのアクセスを試みます。

シグナリングサーバーAyameのようにroomIdやclientId、認証機能は付けていないので、実質

register

accept

reject

の3つは自作シグナリングサーバーには不要です。

開く/閉じる

            1. サーバーに接続を試みた際に、カメラ接続開始の「offer」を送る
2. サーバー側からラズパイゼロから送られた「answer」を処理する
3. コネクションが確立したときの、自身の「ice」を送りだす(Trickle-ICE方式)

Momoクライアントにこの3つの処理をする必要があります。

以下のようにソースコードを修正します。

開く/閉じる

            <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MOMO-WebRTC</title>
        <script type="text/javascript">
            let ws = null, pc, trickle_ice = true, remoteDesc = false, iceCandidates = [];
            //👇シグナリングサーバーのIPアドレス(192.168.0.10)とポートを設定
            const signalling_server_address = "localhost:41337";
            //👇Webサーバーを利用しない場合(ローカルファイルを開く等)ではサーバーIPを指定してもよい
            //const signalling_server_address = "192.168.0.10:41337";
            const pcConfig = { iceServers: [] };
            const pcOptions = { optional: [] };
            const mediaConstraints = {
                optional: [],
                mandatory: {
                    OfferToReceiveAudio: false,
                    OfferToReceiveVideo: true
                }
            };

            //👇ブラウザ組込のWebRCT APIを呼び出し
            RTCPeerConnection = window.RTCPeerConnection;
            RTCSessionDescription = window.RTCSessionDescription;
            RTCIceCandidate = window.RTCIceCandidate;

            function createPeerConnection() {
                try {
                    pc = new RTCPeerConnection(pcConfig, pcOptions);
                    pc.onicecandidate = (event) => {
                        if (event.candidate && event.candidate.candidate) {
                            ws.send(JSON.stringify({ type: 'candidate', ice: event.candidate }));
                        } else {
                            console.log("ICE candidateの情報取得完了");
                        }
                    }
                    if ('ontrack' in pc) {
                        pc.ontrack = (event) => {
                            console.log("トラックを追加");
                            document.getElementById('remote-video').srcObject = event.streams[0];
                        }
                    } else {
                        pc.onaddstream = (event) => {
                            console.log("リモートストリームを追加: ", event.stream);
                            document.getElementById('remote-video').srcObect = event.stream;
                        }
                    }
                    pc.onremovestream = (event) => {
                        document.getElementById('remote-video').srcObject = null;
                        document.getElementById('remote-video').src = '';
                    }
                    console.log("ピアのコネクションか確立しました！");
                } catch (e) {
                    console.error("ピアのコネクションが失敗...");
                }
            }

            function addIceCandidates() {
                iceCandidates.forEach((candidate) => {
                    pc.addIceCandidate(candidate, () => {
                            console.log("ICE candidateが追加されました: " + JSON.stringify(candidate));
                        }, (error) => {
                            console.error("ICE追加中にエラーが発生: " + error);
                        }
                    );
                });
                iceCandidates = [];
            }

            async function makeOffer() {
                createPeerConnection();
                try {
                    const sessionDescription = await pc.createOffer({
                        'offerToReceiveAudio': false,
                        'offerToReceiveVideo': true
                    })
                    //👇ビデオコーデックをH264に固定
                    sessionDescription.sdp = removeCodec(sessionDescription.sdp, 'VP8');
                    sessionDescription.sdp = removeCodec(sessionDescription.sdp, 'VP9');

                    await pc.setLocalDescription(sessionDescription);
                    ws.send(JSON.stringify(pc.localDescription));
                } catch (error) {
                    console.error('オファー送信中にエラー発生:', error);
                }
            }

            //👇オファー内のSDPから不要なビデオコーデックを除外
            function removeCodec(orgsdp, codec) {
                const internalFunc = (sdp) => {
                    const codecre = new RegExp('(a=rtpmap:(\\d*) ' + codec + '\/90000\\r\\n)');
                    const rtpmaps = sdp.match(codecre);
                    if (rtpmaps == null || rtpmaps.length <= 2) { return sdp; }
                    const rtpmap = rtpmaps[2];
                    let modsdp = sdp.replace(codecre, "");
                    const rtcpre = new RegExp('(a=rtcp-fb:' + rtpmap + '.*\r\n)', 'g');
                    modsdp = modsdp.replace(rtcpre, "");
                    const fmtpre = new RegExp('(a=fmtp:' + rtpmap + '.*\r\n)', 'g');
                    modsdp = modsdp.replace(fmtpre, "");
                    const aptpre = new RegExp('(a=fmtp:(\\d*) apt=' + rtpmap + '\\r\\n)');
                    const aptmaps = modsdp.match(aptpre);
                    let fmtpmap = "";
                    if (aptmaps != null && aptmaps.length >= 3) {
                        fmtpmap = aptmaps[2];
                        modsdp = modsdp.replace(aptpre, "");
                        const rtppre = new RegExp('(a=rtpmap:' + fmtpmap + '.*\r\n)', 'g');
                        modsdp = modsdp.replace(rtppre, "");
                    }
                    let videore = /(m=video.*\r\n)/;
                    const videolines = modsdp.match(videore);
                    if (videolines != null) {
                        let videoline = videolines[0].substring(0, videolines[0].length - 2);
                        const videoelems = videoline.split(" ");
                        let modvideoline = videoelems[0];
                        videoelems.forEach((videoelem, index) => {
                            if (index === 0) return;
                            if (videoelem == rtpmap || videoelem == fmtpmap) { return; }
                            modvideoline += " " + videoelem;
                        })
                        modvideoline += "\r\n";
                        modsdp = modsdp.replace(videore, modvideoline);
                    }
                    return internalFunc(modsdp);
                }
                return internalFunc(orgsdp);
            }

            function start() {
                if ("WebSocket" in window) {
                    document.getElementById("stop").disabled = false;
                    document.getElementById("start").disabled = true;
                    document.documentElement.style.cursor = 'wait';

                    //👇シグナリングを担当するWebSocketオブジェクトを生成
                    ws = new WebSocket('ws://' + signalling_server_address);

                    //👇WebSocket開始と同時にピアコネクションも作成する
                    ws.onopen = (stream) => {
                        console.log("WebSocket: onopenイベント発生");
                        iceCandidates = [];
                        remoteDesc = false;
                        makeOffer();
                    };

                    ws.onmessage = (evt) => {
                        const msg = JSON.parse(evt.data);
                        const what = msg.type !== undefined ? msg.type : null;
                        switch (what) {
                            //👇ピアコネクション確立(セッション)を確認したら、ICE情報の取得を試みる
                            case "offer":
                                pc.setRemoteDescription(new RTCSessionDescription(msg),
                                    () => {
                                        remoteDesc = true;
                                        addIceCandidates();
                                        console.log('SDP情報: onRemoteSdpSuccesイベント');
                                        pc.createAnswer(
                                            (sessionDescription) => {
                                                pc.setLocalDescription(sessionDescription);
                                                const request = {
                                                    type: "answer",
                                                    sdp: JSON.stringify(sessionDescription)
                                                };
                                                ws.send(JSON.stringify(request));
                                            },
                                            (error) => {
                                                alert("アンサーでエラーが発生: " + error);
                                            },
                                            mediaConstraints
                                        );
                                    },
                                    (event) => {
                                        alert('ピアコネクションエラー発生: ' + event);
                                        stop();
                                    }
                                );
                                break;
                            case "answer":
                                const answer = new RTCSessionDescription(msg);
                                pc.setRemoteDescription(answer);
                                addIceCandidates();
                                break;
                            //👇ICE candidateを受け取ったらICE情報の保存する
                            case "candidate":
                                if (!msg.ice) {
                                    console.log("ICE情報取得完了");
                                    break;
                                }
                                const candidate = new RTCIceCandidate(msg.ice);
                                iceCandidates.push(candidate);
                                if (remoteDesc) addIceCandidates();
                                document.documentElement.style.cursor = 'default';
                                break;
                        }
                    };

                    ws.onclose = (evt) => {
                        if (pc) {
                            pc.close();
                            pc = null;
                        }
                        document.getElementById("stop").disabled = true;
                        document.getElementById("start").disabled = false;
                        document.documentElement.style.cursor = 'default';
                        console.log("WebSocket切断完了");
                    };

                    ws.onerror = (evt) => {
                        alert("WebSocketエラー発生中！");
                        ws.close();
                    };
                } else {
                    alert("このブラウザはWebSocketに対応していません");
                }
            }

            function stop() {
                document.getElementById('remote-video').srcObject = null;
                document.getElementById('remote-video').src = '';
                if (pc && pc.iceConnectionState !== 'closed') {
                    pc.close();
                    pc = null;
                    if (ws && ws.readyState === 1) {
                        const message = JSON.stringify({ type: 'close' });
                        ws.send(message);
                    }
                }
                document.getElementById("stop").disabled = true;
                document.getElementById("start").disabled = false;
                document.documentElement.style.cursor = 'default';
            }

            window.onbeforeunload = () => {
                if (ws) {
                    ws.onclose = () => {};
                    stop();
                }
            };
        </script>
        <style>
            #container {
                display: flex;
                flex-flow: row nowrap;
                align-items: flex-end;
            }
            video {
                background: #eee none repeat scroll 0 0;
                border: 1px solid #aaa;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="overlayWrapper">
                <video id="remote-video" autoplay="" width="640" height="480"></video>
            </div>
        </div>
        <div id="commands">
            <button id="start" style="background-color: green; color: white" onclick="start();">Call</button>
            <button disabled id="stop" style="background-color: red; color: white" onclick="stop();">Hang up</button>
        </div>
    </body>
</html>

実装では

offer

、

answer

、

candidate

を適切なタイミングで送受信するように仕込んで使う必要があります。

実装のポイントを細かく解説すると切がないのですのでソースコード内のコメント程度でご容赦ください...。