LoginSignup
8
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@massie_g(がねこ まさし)

WebRTC Native Client Momo から Amazon Echo Show 5 に配信してみよう

Last updated at Posted at 2019-09-06
1 / 26

はじめに

これは WebRTC Meetup Tokyo #22 の発表資料です
(2019.09.01現在の情報です）

自己紹介

  • がねこまさし @massie_g
  • WebRTC Meetup Tokyo スタッフ
  • インフォコム株式会社所属

やりたいこと

「○○、玄関の様子見せて」
↓
玄関外の様子が、画面付きスマートスピーカーに映し出される

先にオチ

  • 部分的に実現。声だけではできず
  • 何回かタッチ操作が必要

IMG_4307.jpg

今日の題材

  • OSSのWebRTC Native Client Momo
  • WebRTC シグナリングサーバー Ayame / Ayame Lite
  • Amazon Echo Show 5

※Momo, Ayame については非公認です。記述に誤りを発見した場合のクレームは私(@massie_g)まで

1. WebRTC Native Client Momo

  • 株式会社時雨堂を中心とし協力者の方々が開発、OSSとして公開(Apache License 2.0)
  • ブラウザなしで様々な環境で動作する WebRTC ネイティブクライアント
    • libwebrtcを利用（ビルド環境を含む）
    • 環境により、H.264 ハードウェアエンコーダーをサポート
    • makeで簡単にビルド可能、ただしディスクと時間と覚悟が必要
      • 手元のマシンで20GB、20分、ファンが回りっぱなし
    • macOSやUbuntu上で、Raspberry Pi 向けバイナリの生成が可能
      • Dockerを利用したクロスビルド
      • Dockerが利用するディスク容量を増やしておくと吉
docker_disk.png

（続）WebRTC Native Client Momo

  • 動作環境
    • Raspbian Buster ARMv7 / ARMv6
      • バイナリも配布
    • Ubuntu 18.04 x86_64 / ARMv8
    • Ubuntu 16.04 x86_64 ROS Kinetic / ARMv7 ROS Kinetic
    • macOS 10.14 x86_64
    • ※Windows版ビルドツールは有償提供とのこと
  • 実行モード
    • test ... 動作確認用のP2Pモード
      • momo自身が配信クライアントと、Webサーバー/シグナリングサーバーも兼ねる
    • ayame ... シグナリングサーバーAyameに対応したP2Pモード。momoは配信クライアントのみ
    • sora ... 商用SFU Soraの前提としたモード。momoは配信クライアントとして動作
  • ※ momo 自体は長時間の安定して稼働
    • 72時間動かしてみたが、大丈夫
    • ただし、USBカメラがめちゃくちゃ熱くなってしまった

デモ1

  • macOS momo を利用
    • testモードで起動
momoをtestモードで起動
$ ./momo --no-audio --port 8080 test
  • ブラウザで開く
    • http://momoを実行しているipアドレス:8080/html/test.html
    • ※getUserMedia()は使っていないので、http://～ でもOK

参考： momo をビルドしてみる

MacでRaspberry Pi 3用のmomoをビルド（要Docker）

$ git clone https://github.com/shiguredo/momo.git
$ cd momo
$ cd build
$ make raspbian-buster_armv7
// ... ここで 數十分〜数時間
make[1]: Leaving directory '/root/momo'
# ビルド後に ./momo p2p で動作確認できるようにしたいので、生成されたバイナリをルートディレクトリにコピーする
cp _build/raspbian-buster_armv7/momo momo
$ cd ..
$ ls momo
momo*
  • バイナリは momo/ 直下にコピーされる
  • _build/raspbian-buster_armv7/ に momo* と libwebrtc.a （ライブラリ）が生成

momo 利用事例

こちらで色々紹介されています
https://gist.github.com/voluntas/51c67d0d8ce7af9f24655cee4d7dd253#id12

2. シグナリングサーバー Ayame / Ayame Lite

デモ2

momoをayameモードで起動
$ ./momo --no-audio ayame wss://ayame-lite.shiguredo.jp/signaling your_room_id

受信側サンプルコード

https://github.com/OpenAyame/ayame-web-sdk-samples/blob/master/recvonly.html を拝借

recvonly.htmlの抜粋
<script src="./ayame.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.7.0/qs.min.js"></script>
<script src="./main.js"></script>
<script type="text/javascript">
  const options = Ayame.defaultOptions;
  options.video.direction = 'recvonly';  // 受信のみを指定
  options.audio.direction = 'recvonly';  // 受信のみを指定
  const conn = Ayame.connection(signalingUrl, roomId, options, true);
  const startConn = async () => {
    await conn.connect(null, { key: signalingKey });
    conn.on('open', ({ authzMetadata }) => console.log(authzMetadata));
    conn.on('disconnect', (e) => console.log(e));
    conn.on('addstream', (e) => {
      document.querySelector('#remote-video').srcObject = e.stream;
    });
  };
</script>

ayame-sdk-web を覗いてみる

src/connection/base.js

recvonly の指定 → addTransceiver()

const videoTransceiver = pc.addTransceiver('video', { direction: 'recvonly' });

videoコーデックの指定 → setCodecPreferences()

videoTransceiver.setCodecPreferences(videoCodecs); // 'VP8' | 'VP9' | 'H264'

※setCodecPreferences()が使えない場合は、SDPを直接いじっている様子

Ayame 利用事例

3. Amazon Echo Show 5

  • 画面付きスマートスピーカー （= スマートディスプレイ）
  • 2019年6月末販売開始の普及版。9980円
  • OS: Fire OS （Androidのフォーク）
  • 5インチスクリーン 960 x 480 (2:1)
  • マイク、スピーカー、カメラ付き
    • ミュートボダン、物理カメラシャッター
  • 「アレ〇〇」で始まる声で操作
    • タッチスクリーンでも一部操作可能

Iechoshow5.jpg

Echo Show 5 とブラウザ

2つのブラウザが内蔵

Firefox for Echo Show と WebRTC

  • mediaDevices.getUserMedia() → 使えない（ブラウザからマイク/カメラを認識できない）
    • http:// の場合 .. NotSupportedError: Only secure origins are allowed
    • https:// の場合 ... NotAllowedError: Permission denied
  • RTCPeerConnection
    • RTCPeerConnection はある。P2Pでの通信は可能
    • Videoコーデック
      • H.264 ... NG
      • VP8, VP9 .. OK
    • Audioコーデック
      • Opus ... OK
    • Multistream .. 動く（複数 videoTrack 可能）
      • RTCPeerConnection.ontrack()も動く
      • RTCPeerConnection.addTrack()も存在、動作は未確認
    • Unified-Plan
      • 明示的指定が必要 ... new RTCPeerConnection({sdpSemantics: 'unified-plan'});
      • RTCPeerConnection.addTranceiver() ... Unified-Planを明示的に指定した場合のみ利用可能
        • 指定しないと例外発生
      • RTCRtpTransceiver.setCodecPreferences()は無し

Firefox for Echo Show メディア関連

  • video.srcObject ... あり
  • video.play() ... ユーザージェスチャーが無いと再生できない
  • canvas.captureStream() ... あり。MediaStream が取得できる

デモ3

ayame-web-sdk の改造

sdpSemantics: 'unified-plan' を明示的に指定

 class ConnectionBase {
    // ... 省略 ...
    constructor(signalingUrl, roomId, options, debug = false) {
      // ... 省略 ...
      this._pcConfig = {
        iceServers: this.options.iceServers,
        sdpSemantics: 'unified-plan'  // <-- ここを追加
      };
      // ... 省略 ...
   }
   // ... 省略 ...
   _createPeerConnection() {
     const pc = new window.RTCPeerConnection(this._pcConfig);
     // ... 省略 ...
   }
   // ... 省略 ...
}

Alexa スキルを作れるか？

  • 画面つきスキルが作れる
    • 決まった部品が配置可能→JSONでエクスポート
    • 異なるデバイスで、それなりに表示されるように
  • 任意のHTML/JS/CSSが使えるわけでは無い
    • WebRTCをそのまま利用することはできない
  • 特定のURLを直接ブラウザで開くスキルも、今のところできない

→ 今は声だけでWebRTCを受信するスキルは作れない

alexa_screen.png

余談： Silkブラウザの場合

  • Silkブラウザの起動
    • 試した限り、音声コマンドで明示的にSilkブラウザを起動することできない
    • デフォルトブラウザにSilkを選択し、ブラウザが必要になる動作を間接的に指示する必要あり
      • YouTubeの再生など
  • Silk と getUserMedia()
    • http:// の場合 .. なにも起きない（例外も起きない）
    • https:// の場合 ... カメラ/マイクのアクセス許可のダイアログが表示されるが、操作できない
      • ボタンを押しても反応しない
      • ... 惜しい
  • Silk と RTCPeerConnection
    • P2P で映像の受信、表示は可能
    • Firefoxとは異なり）H264も利用可能
    • Multistream, Unifiled-Planは未確認

余談2： Google Nest Hub の場合

  • いわゆる「Webブラウザ」は搭載されていない
  • WebRTCは使えない
  • YouTube 再生機としては、とても優秀

nesthub.jpg

まとめ

  • momo を使うと、手軽にブラウザを使わずに配信ができる
  • Ayame Liteを使うと、1対1限定だけど、簡単にWebRTC通信ができる
  • Amazon Echo Show 5でも、WebRTCで受信ができる

ブラウザ以外でも、いろんなデバイスでWebRTCは使える！

参考

8
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?