Raspberry Pi + Node.js에서 SkyWay를 실행해보십시오.

Raspberry Pi에서 SkyWay가 작동하는 skyway-webrtc-gateway 이라는 SDK(?)를 Node.js에서 사용해 보겠습니다.

핸즈온으로 루비에서 한 내용



요전날, 핸즈온이 행해졌습니다만, 라즈파이에 연결한 LED를 Web으로부터 제어하면서, 그 모습을 접속한 카메라로 Web으로부터 감시하는 구조를 만들었습니다.

리모트 L치카 감시군요.
  • 이벤트 페이지: WebRTC 초보자 환영! WebRTC 게이트웨이 핸즈온 @NIFcLounge
  • 핸즈온 자료: SkyWay WebRTC Gateway 핸즈온

  • 이런 느낌입니다.

    당일은 Ruby로 구현을 시도했지만, 개인적으로는 Node.js로 하고 싶기 때문에 Node.js로 움직여 보았습니다.

    Raspberry Pi 준비



    Raspberry Pi의 OS 설치 등은 각자 해 둡시다.
    그건 그렇고, 하드웨어는 Raspberry Pi 3 B +를 사용합니다. 제로라면 움직이지 않았다.

    또, Node.js의 인스톨도 해 둡시다.
    이번에는 Node.js v11.0을 사용하고 있습니다.

    관련 소프트웨어 준비



    skyway-webrtc-gateway를 이용할 때 라즈파이에 관련 소프트웨어를 설치해 둡시다.
    $ sudo apt install autoconf automake libtool
    $ sudo apt install gstreamer1.0-tools gstreamer1.0-plugins-good gstreamer1.0-plugins-ugly libgstreamer1.0-dev libgstreamer-plugins-base1.0-dev
    
    $ git clone [email protected]:thaytan/gst-rpicamsrc.git
    $ cd gst-rpicamsrc
    $ ./autogen.sh --prefix=/usr --libdir=/usr/lib/arm-linux-gnueabihf/
    $ make
    $ sudo make install
    

    npm 패키지의 skyway-gateway을 사용해보십시오.
    $ npm i skyway-gateway
    

    헤일로 월드



    Raspberry Pi 쪽


  • app.js 만들기

  • app.js
    'use strict';
    const SkyWay = require('skyway-gateway');
    
    const options = {
        apikey: `My SkyWay API Key`,
        peerid: process.argv[2]
    }
    
    const skyway = new SkyWay(options);
    (async () => {
        await skyway.init()
        await skyway.start()
    })();
    
  • 실행
  • $ node app.js hogehoge
    

    peerid라는 연결을 식별하는 ID를 지정하여 실행합니다. 이 샘플 코드와 실행 예제라면 hogehoge가 peerid가 됩니다.

    접속을 확인하는 모함측



    이번에는 모함은 Mac이 됩니다.

    Mac 브라우저에서 ↓ 웹사이트를 열고 Raspberry Pi의 카메라 영상을 받습니다.
    <!DOCTYPE html>
    <html>
        <head lang="ja">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <title>SkyWay JS SDK Tutorial</title>
        </head>
    
        <body>
            <input type="text" id="target_id_box" />
            <button id="call_button">call</button>
            <br />
            <input type="text" id="chat_box" />
            <button id="chat_button">send message</button>
            <br />
            <video id="remote_video" muted="true" autoplay playsinline="true"></video>
    
            <script src="https://cdn.webrtc.ecl.ntt.com/skyway-latest.js"></script> 
            <script>
                'use strict';
                // Get Parametersを取得するやつ
                function getQueryParams() {
                    if (1 < document.location.search.length) {
                        const query = document.location.search.substring(1);
                        const params = query.split('&');
    
                        const result = {};
                        for(var param of params) {
                            const element = param.split('=');
                            const key = decodeURIComponent(element[0]);
                            const value = decodeURIComponent(element[1]);
                            result[key] = value;
                        }
                        return result;
                    }
                    return null;
                }
    
                window.onload = ()=> {
                    const query = getQueryParams();
                    // api keyはGet Parameterから取る
                    // これは演習で簡単に設定するための雑な処理で推奨ではない
                    const key = query["key"];
                    //peer idもGet Parameterから取る
                    const peer_id = query["peer_id"]
                    const peer = new Peer(peer_id, {
                        key: key,
                        debug: 3
                    });
    
                    peer.on('open', function (a) {
                        console.log(a);
                        // SkyWay Serverに自分のapi keyで繋いでいるユーザ一覧を取得
                        let peers = peer.listAllPeers(peers => {
                            //JavaScript側で入れたやつとRuby側で入れたやつが出てくればよい
                            console.log(peers);
                        });
                    });
                    peer.on('error', (err) => alert(err.message));
    
                    document.getElementById("call_button").onclick = ()=>{
                        const target_id = document.getElementById("target_id_box").value;
    
                        const call = peer.call(target_id, null, {videoReceiveEnabled: true });
                        call.on('stream', (stream) => {
                            document.getElementById("remote_video").srcObject = stream;
                            console.log(call)
                            setTimeout(() => {
    
                            },1000 * 10);
                        });
    
                        const connection = peer.connect(target_id, {serialization: "none"});
                        connection.on('data', (data) => console.log(data));
    
                        document.getElementById("chat_button").onclick = ()=> {
                            const message = document.getElementById("chat_box").value;
                            console.log(message);
                            connection.send(message);
                        };
                    };
                };
            </script> 
        </body>
    </html>
    
  • 로컬 서버 시작
  • $ python -m SimpleHTTPServer 8080
    

    GPIO 사용



    GPIO 이용의 경우는 onoff 라는 모듈을 사용하는 것이 개인적으로는 추천입니다.
    다른 모듈은 sudo 실행이 필요하거나 권한 주위에서 깨졌습니다.
    $ npm i onoff
    
    'use strict';
    const SkyWay = require('skyway-gateway');
    
    const options = {
        apikey: `My SkyWay API Key`,
        peerid: process.argv[2]
    }
    
    const skyway = new SkyWay(options);
    (async () => {
        await skyway.init()
        await skyway.start()
    })();
    
    const Gpio = require('onoff').Gpio;
    const led = new Gpio(21, 'out');
    
    skyway.dataListen((msg, rinfo) => {
      const mes = msg.toString('ascii', 0, rinfo.size);
      console.log(`data len: ${rinfo.size} data: ${mes}`);
    
      if(mes === 'on'){
        led.writeSync(1)
      }else{
        led.writeSync(0)
      }
    });
    
  • 배선

  • 아래와 같이 21번 핀에 배선합니다.

    참고: SkyWay WebRTC Gateway 핸즈온 Chapter0

    이제 실행하면 첫 GIF처럼 폼에서 on으로 보내면 LED가 켜지고 off로 보내면 LED가 사라집니다.



    소감



    조금 아직 거동이 불안정한 생각이 들지만 우선은 움직였습니다.
    불안정한 곳 해소하면서 Node.js 프로세스의 영속화 등도 시도해 지견 공개해 가고 싶습니다.

    npm 페이지의 README도 확인하세요~

    htps //w w. 음 pmjs. 코 m / Pac 카게 / 스키 와 y-가와 y

    좋은 웹페이지 즐겨찾기