Help us understand the problem. What is going on with this article?

SkyWay Media Pipeline Factoryを試してみた

アドベントカレンダー初挑戦です!

SkyWay Media Pipeline Factoryが凄そうだったので試してみました。
チュートリアルを終えたら速攻で詰まったので、単なる紹介記事です! (開き直り)

基本用語

WebRTC: ブラウザ上でリアルタイム通信する技術 (ex. ビデオ通話)
SkyWay: WebRTCを簡単に使うためのプラットフォーム
(いらないのでは? と思いつつも分野外の人に向けて)

SkyWay Media Pipeline Factoryって何?

SkyWay Media Pipeline Factoryとは、NTTが2019年1月に試験提供した、SkyWayの実験的機能です。
SkyWayでやりとりするデータをクラウドに流して、あれこれ加工できるようになります。
2.png

音声をクラウドに流す→録音→AIで解析→ログやメトリクスを保存、なんて感じでWebRTCのデータをパイプライン的に加工。しかも、その設定やデプロイをGUIでできる!
1.png

...とめっちゃ夢が広がる機能なんですが、まだ試験段階(α版)ということもあり、何でも揃っているわけではありません。

以下、試した内容や感想などを書きます。

試した動機

  • WebRTCを使ったビデオ通話の録音・録画をしたかった
  • 会社の人に「こんなんあるよ」と教えてもらって、調べたら面白そうだった

試した内容

アカウント作成
→パイプライン(=クラウド上で動く一連の処理)の作成
→デプロイ
→ビデオ通話のサンプルコード(前に作ったやつ)を修正して、パイプラインにデータを送るようにする
→サンプルコードを動かして、パイプラインにデータが飛んでくることを確認
(→自前で音声合成する必要があり、ここで挫折)

パイプラインの作成~デプロイ

公式のGetting Startedに従いました。
ドキュメントに従ってぽちぽちGUIを触るだけで、簡単にデプロイができました。
(ホスティングにはnetlifyが使われているようです)
3.png

既存コードの修正

公式のコーディングガイドに従いました。

変更はごく少量。
具体的にはpeer.on("open")イベントの中にパイプラインと接続する処理を足すだけ。
単にデータを送るだけなら、簡単に既存アプリへ組み込めます。

以下は、ブラウザを2窓立ち上げて、両者間でビデオ通話するコード(の大枠)です。

/*
 * callする方、される方の共通処理
 */
// 自デバイスの音声、映像を取得
const localStream = await navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
});

// Peer(接続管理用オブジェクト)の作成
const peer = (window.peer = new Peer({
  key: "自分のSkyWayアプリのAPIキー"
});

// peerができたらパイプラインと接続する(唯一の変更箇所)
- peer.on("open", (id) => {localPeerId = id});
+ peer.on("open", async (id) => {
+   localPeerId = id;
+   
+   // デプロイしたパイプラインのAPIを叩いてpeerId(≒パイプラインへ繋ぐ電話番号)とtokenをもらう
+   const entrypoint = "https://userfront.m-pipe.net/↑のデプロイ画面に表示されるエントリポイントのURL/";
+   const body = JSON.stringify({eventParams: {clientId: id}});
+   const res = await fetch(`${entrypoint}/session`, {
+     method: "POST",
+     headers: {
+       "Accept":       "application/json",
+       "Content-Type": "application/json"
+     },
+     body
+   });
+   const {token, peerid} = await res.json();
+ 
+   // パイプラインへ音声・映像を送信
+   peer.call(peerid, localStream, {metadata: {token}});
+ });

/*
 * callする方の処理 (変更の必要なし)
 */
// callボタンを押したら、相手へ自分の音声・映像を送信
callButton.addEventListener("click", () => {
  if (!peer.open) {
    return;
  }
  // remotePeerIdには、相手のlocalPeerIdを指定
  // (パイプラインから帰ってきたpeerIdではない)
  const mediaConnection = peer.call(remotePeerId, localStream);
  mediaConnection.on("stream", async stream => {
    remoteVideoElement.srcObject = stream;
    await remoteVideoElement.play().catch(console.error);
  });
});

/*
 * callされる方の処理 (変更の必要なし)
 */
// callされたら、answerし、相手へ自分の音声・映像を送信
peer.on("call", mediaConnection => {
  mediaConnection.answer(localStream);
  mediaConnection.on("stream", async stream => {
    remoteVideoElement.srcObject = stream;
    await remoteVideoElement.play().catch(console.error);
  });
});

ポイントは、既存のWebRTC通信とは別にパイプラインへデータを送る用のコネクションを張ることです。 
 自分相手がそれぞれPeerを作成(localPeerIdを取得)
 →パイプラインと接続(パイプラインからpeerIdが返ってくる)
 →peerIdではなく、localPeerIdを指定してcall/answerする

p2pに組み込む方法は公式に明確な記述がなく、けっこう躓きました。
ビデオ通話に組み込まれた方の資料を見てようやく"別なんだ!"ということが分かった。
(改めて公式トップページの画像(本記事の最初に張った画像)を見ると、ちゃんと別コネクションになっている。。。)

パイプラインにデータが飛んでくることを確認

GUI操作でログを確認できます。

4.png

試してみた感想

  • さくっとデプロイできてログとかとれるの凄い
  • 既存アプリへ組み入れる際の影響も少なそう
  • 現状だとドキュメントやネット上の情報が少なく、チュートリアル以上のことをやろうとすると速攻で詰まる(かなりの腕力を要求される)
  • クラウドを使うのでAWS等の知識も必要(この辺弱いのも挫折した一因)
  • 作成中の機能とかもあって、まさにα-trial
  • 公式トップでは音声の合成やAI解析などのユースケースを挙げているが、現状その辺は自力で解決する必要がある(例えば音声の合成は自前で組む必要がある)
  • 実サービスへ組み込むには、公式とがっぷり四つに組む必要がありそう
  • ビデオ通話に組み込んだ事例、マジですごい

最後に

このまま発展して、β-trial、そして正式リリースへと至りますよう!
そして、音声合成とかAI解析とかをサクッと使えるようになりますよう。。。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした