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

            + Raspberry Pi Zero W + カメラモジュールV2 (※1)
+ Raspberry Pi 3B+ (シグナリングサーバー)
+ Debian Linux パソコン (というかブラウザが動けばなんでもOK)
+ 家庭用の無線LANルータ (※2)
        

            const webSocketsServerPort = 41337;
const webSocketServer = require('websocket').server;
const http = require('http');
const server = http.createServer((request, response) => {});
const clients = [];

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} .`);
    const connection = request.accept(null, request.origin);
    console.log(`${(new Date()).toISOString()} | Connection accepted.`);

    //👇クライアントを番号で管理
    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('SDPの逆転送はキャンセルします');
            } else {
                console.log(message);
                //👇接続中のすべてのwsクライアントへメッセージ送信
                clients[i].sendUTF(message.utf8Data);
            }
        };
    });

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

//👇異常終了の際のイベント
process.on('unhandledRejection', (reason, promise) => {
    process.exit(1);
});
        

            $ node server.js
        

            1. クライアント(オーディエンス)から、自身の担当するWebSocketネットワーク(ws1)
    に対してシグナルを受け取ったら、ラズパイゼロ側のWebSocketネットワーク(ws2)へ転送する

2. ラズパイゼロ側(UV4L)から、ws2に対してシグナルを受け取ったら、
    ws1へそのシグナルを転送する
        

            {
    what: "call",
    options: {
        force_hw_vcodec: true,
        vformat: 30,
        trickle_ice: true
    }
}
        

            {
    what: "offer",
    data: "<uv4l-sdp>"
}
        

            {
    what: "answer",
    data: "<local-sdp>"
}
        

            {
    what: "iceCandidate",
    data: <single-uv4l-ice-candidate or empty string>
}
        

            {
    what: "iceCandidates",
    data: <array-of-uv4l-ice-candidates>
}
        

            {
    what: "addIceCandidate",
    data: "<local-ice-candidate>"
}
        

            {
    what: "message",
    data: "<error-message>"
}
        

            {
   what: "hangup"
}
        

            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 = [];

//👇シグナリングサーバーを跨ぐためのWebSocketクライアント
const webSocketClient = require('faye-websocket');
let uv4lClient = null;
let isUv4lClientOpen = false;
const uvl4ServerIp = process.env.UV4L_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.`);

    //👇UV4Lサーバーに接続開始
    createUv4lClient();

    //👇クライアントを番号で管理
    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] > [UV4L]');
                uv4lClient.send(message.utf8Data);
            }
        };
    });

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

function createUv4lClient() {
    if (uv4lClient) return;
    uv4lClient = new webSocketClient.Client(`ws://${uvl4ServerIp}:4300/stream/webrtc`);

    uv4lClient.on('open', (event) => {
        console.log(`UV4Lが開きました`);
        //👇初期化処理
        console.log('UV4Lサーバーに接続中...');
    });

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

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

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

            1. サーバーに接続を試みた際に、カメラ接続開始の「call」を送る
2. サーバー側からラズパイゼロから送られたオファーに対する「answer」を送る
3. コネクションが確立すると、自身の「ice」が送られる
        

            <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>UV4L-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) {
                            const candidate = {
                                sdpMLineIndex: event.candidate.sdpMLineIndex,
                                sdpMid: event.candidate.sdpMid,
                                candidate: event.candidate.candidate
                            };
                            const request = {
                                what: "addIceCandidate",
                                data: JSON.stringify(candidate)
                            };
                            ws.send(JSON.stringify(request));
                        } 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 = [];
            }

            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;
                        createPeerConnection();
                        const request = {
                            what: "call",
                            options: {
                                //👇外部ドライバではハードウェアコーディックが有効化できない
                                force_hw_vcodec: false,
                                vformat: 10,
                                trickle_ice: true
                            }
                        };
                        ws.send(JSON.stringify(request));
                        console.log("コールされたリクエスト: " + JSON.stringify(request));
                    };

                    ws.onmessage = (evt) => {
                        const msg = JSON.parse(evt.data);
                        const what = msg.what !== undefined ? msg.what : null;
                        const data = msg.what !== undefined ? msg.data : null;
                        switch (what) {
                            //👇⑤ピアコネクション確立(セッション)を確認したら、ICE情報の取得を試みる
                            case "offer":
                                pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(data)),
                                    () => {
                                        remoteDesc = true;
                                        addIceCandidates();
                                        console.log('SDP情報: onRemoteSdpSuccesイベント');
                                        pc.createAnswer(
                                            (sessionDescription) => {
                                                pc.setLocalDescription(sessionDescription);
                                                const request = {
                                                    what: "answer",
                                                    data: JSON.stringify(sessionDescription)
                                                };
                                                ws.send(JSON.stringify(request));
                                            },
                                            (error) => {
                                                alert("アンサーでエラーが発生: " + error);
                                            },
                                            mediaConstraints
                                        );
                                    },
                                    (event) => {
                                        alert('ピアコネクションエラー発生: ' + event);
                                        stop();
                                    }
                                );
                                break;
                            case "answer":
                                break;
                            case "message":
                                alert(msg.data);
                                break;
                            //👇⑥ICE candidateを受け取ったらICE情報の保存する
                            case "iceCandidate": //👈trickleICEの場合
                                if (!msg.data) {
                                    console.log("ICE情報取得完了");
                                    break;
                                }
                                const elt = JSON.parse(msg.data);
                                const candidate = new RTCIceCandidate({sdpMLineIndex: elt.sdpMLineIndex, candidate: elt.candidate});
                                iceCandidates.push(candidate);
                                if (remoteDesc) addIceCandidates();
                                document.documentElement.style.cursor = 'default';
                                break;
                            case "iceCandidates": //👈vanillaICEの場合
                                const candidates = JSON.parse(msg.data);
                                for (let i = 0; candidates && i < candidates.length; i++) {
                                    const elt = candidates[i];
                                    const candidate = new RTCIceCandidate({sdpMLineIndex: elt.sdpMLineIndex, candidate: elt.candidate});
                                    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.close();
                    pc = null;
                }
                if (ws) {
                    ws.close();
                    ws = null;
                }
                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>
        

            $ UV4L_IP=192.168.0.100 node server.js