SkyBeje開発記

SkyWayを使ったブラウザ間通信アプリを開発しています

音声合成をボイスチャットで使う仕組みを作ってみました

グループ通話またはライブ配信する際に、チャット入力した文章を音声合成してマイクに流す仕組みを作ってみました。

基本的には、開発中のSkyBeje用に作ってみた仕組みですが、SkypeやDiscordの音声通話にも応用できると思います。


以下の3種類の音声合成を、ボイスチャットに使う仕組みを作ってみました。

・定番の音声合成ソフト「棒読みちゃん
株式会社エーアイAITalk
HOYA株式会社VoiceText

 

 (注意)AITalk / VoiceTextについては、無料で試せるWebAPIを使いましたが、この2つは、商用利用禁止・二次利用禁止のWebAPIです。基本的には開発や検証目的として公開されているAPIとのことですので注意してください。詳細については、それぞれのWebAPIの利用規約を参照してください。

 

棒読みちゃん」の音声をマイクに流す仕組み

棒読みちゃんの音声をマイク代わりに使う方法は、以下を参考にさせて頂きました。
棒読みちゃんをマイク代わりに使う : らいっちのPC奮闘記

 

棒読みちゃんのインストール方法や設定方法、仮想マイクデバイス(NETDUETTO)については、上記ページを参考にしてください。ちなみに上記ページはSkype用として説明されていますがDiscordにも適用できると思います。

SkyBejeとの連動については、棒読みちゃんの標準プラグインにある「クリップボード監視」機能を使ってみました。

f:id:iwatendo:20171105111042p:plain

 

SkyBeje側の設定

f:id:iwatendo:20171105111057p:plain


あとは、グループ通話のマイクデバイスに「NETDUETTO Driver」を選択します。

f:id:iwatendo:20171105162918p:plain

 

 ライブ配信する場合も同様で、マイクに「NETBUETTO Driver」を選択します。

f:id:iwatendo:20171105163039p:plain

 

これで自分のチャットの発言が、棒読みちゃんの音声でマイクに出力されるようになります。(ただし、他の人のメッセージの読上げはできません)


音声合成API(AITalk / VoiceText)を使ってボイスチャット

色々調べてたら、VoiceTextを再生できる棒読みちゃんプラグインを作られている人がいました。(Voiceroid Talk Plusというプラグインも作っている人です)

Voicetext Talk Ver1.5.0.0:Wangdora Eve. - ブロマガ


最初、このプラグインでいけるかなと思ったのですが、プラグイン側で音声を標準デバイスに出力しているとの事で、棒読みちゃん側で設定したデバイスには出力できない仕様のようでした。

 

バイス指定の他に、音声パラメータも指定したかったのでツールを自作しました。
github.com

 

詳細は上記のGitHubのページを見て貰いたいのですが、少しだけ補足です。

AITalk と VoiceTextには感情パラメータというのがあります。上記ツールではVoiceTextは感情パラメータを指定できるようにしたのですが、AITalkでの感情パラメータの指定方法が不明だった為、上記のアプリからは指定できません。(WebAPIからは指定できないのかもしれません)

他、SkyBejeは複数のアクターやアイコンを登録できて、切り替えながら発言することができます。アイコンごとに音声パラメータを設定できるようにしたので、喜んでいるアイコンに対しては喜んでいる音声パラメータを、怒ってるアイコンに対しては怒っている音声パラメータを設定するようなことができます。

 

現状の設定画面はこんな感じです。
f:id:iwatendo:20171105232630p:plain

 

チャット画面はこんな感じでアイコンを切替えながら発言できますが、同時に音声パラメータも切り替わって音声合成されます。 (右側はアイコン毎の音声パラメータです)

f:id:iwatendo:20171106090705p:plain

 

問題点や懸案事項

上記のプログラムを作る前から、AITalk / VoiceTextのWebAPIが「商用利用禁止」というは把握してたのですが、オープンソースとしてGitHubに公開するし、広告とかも入れないので、遊び用途なら問題ないと考えていました。

しかし、GitHubのReadMeを書くタイミングで、しっかりと利用規約を確認してみたところAITalk / VoiceText両方の利用規約に「無料でもウェブサイトに一般公開した場合は商用とみなす」的な記述があり、これは多分遊び用途で気軽に使っちゃダメなやつだ、と気が付きました(笑)

ただ、利用規約で曖昧部分もあって、判断に迷う部分があったので、そこは問合せてみようと思ってます。

 

また、これも後で気がついたのですが、Windowsのネイティブアプリの場合だと、APIキーの扱いに困ります。GitHubにコミットするソースにはAPIキーは含めないとしても、ビルド時にAPIキーをバイナリの中に含めてしまえば、逆アセンブルすればAPIキーが拾われてしまう可能性がありそうですし。。

 

上記のような問題もあって、個別にAPIキーを設定するようにしてるのですがAITalk(DocomoDeveloper Support)の場合は、サービスやアプリの単位でAPIキーを発行する感じで、個別に発行するようものでも無いようなんですよね。(VoiceTextの場合は、個人に対してAPIキーを発行している感じなのですが)

 

さいごに

と、まぁ色々と問題はあるのですが、ASP.NET用とか、社内で使うツールとかに応用できなくはないかもしれないと思い、プログラムはGitHubに置いておく事にしました。

最後まで読んでいただき、ありがとうございました。
ご質問やご意見がありましたら、お気軽にコメントしていただければと思います。

開発中のサービスについて

何を作っているのか、3分で説明する為のメモです。

アカウント登録が不用で、URLの発行のみで利用できるチャットサービスです。グループ通話機能や、複数人での画面共有も可能です。サーバーレスのサービスであり、WebRTC(SkyWay)を利用してブラウザ間で通信しています。データは全てブラウザ上(IndexedDB)に保持しており、外部のDBは使用しません。GitHubに公開してます。サーバーサイドの処理が無くて、Webサーバーに配置するだけで動作します。


β版を公開してます。
https://skybeje.net/


実装済みの機能一覧

・チャット機能(文字/音声)
ライブ配信機能(Webカメラ/画面共有/Android端末)
・アイコン/アクターの複数登録機能
YouTube同期再生
・簡易BOT機能

 

スクリーンショット

f:id:iwatendo:20171010105525p:plain

LOL始めました

 

とりあえず開発中のSkyBejeについてですが、色々と改良しました。

・SkyWayの正式サービス対応( SkyWayJsを使用するように変更)
SFU対応(配信時の負荷が下がったはず)
・レイアウト修正(メニューをスライドにしたり、そのほか色々)
ライブ配信等は、4つまで表示できるようにしました。

 

以下は「League of Legends」というオンラインゲームのプレイ画面を、スクリーンシェア機能で配信している状態です。※右上はアンドロイド端末(Nexus9)からの配信で、右下はYouTube動画です。

f:id:iwatendo:20171010105525p:plain

 

以下は、2分割表示の場合です

f:id:iwatendo:20171010105547p:plain

 

SFU対応もしたので、そろそろどれくらいの人数への配信に耐えれるか、負荷テストをしてみようと思ってます。(負荷テストと言っても、大人数に向けて配信する為のサービスではないので、10人くらいに配信して問題なく動けば満足です。Discordに実装された画面共有機能も最大10人までみたいですね)


実装の都合で、シグナリング回数が多かったりする問題は残っているのですが、サービスを使ってる人は殆どいない状態なので、とりあえず富豪的プログラミングならぬ、富豪的シグナリングのままで放置してます。仮にユーザーが増えたとしても、どちらかというとSFUのギガ制限(500GB)の方が、先に引っ掛かるような気もしてますし。

 

ちょっと前まで、知り合いを集めて「人狼」で負荷テストしようと思ってました。結構いろんな人に「このサービスを使って、人狼やろうと思ってます!」と宣言してて、その方向で準備とかしてたのですが、いざ知り合いを誘おうと思った時、同年代の友人や知り合いは、子育てやら何やらで休日も忙しい様子。。

声掛けても集まるかどうか怪しいし、日時の調整も大変だし、月一回の開催とかじゃテストにならないし。。第一、私は人狼未経験で、絶対にグダグタになりそうだし。。とか色々考えたら、日和ってしまいました(笑)

 

というわけで、オンラインゲームを使って負荷テストする方向にしました。
オンラインゲームの配信なら、マストドンあたりにURLを流せば繋いでくれる人は多少いるんじゃないかな、と思ったので。

 

オンラインゲームは何でも良かったのですが、前から気になってた「League Of Legends」を数日前から始めてみました。調べてみると7年位前からあるゲームですが、日本サーバーの正式サービス開始は2017年3月と結構最近みたいですね。

 

ちょっとやってみた感じ、ゲーム自体は非常に面白いのですが、外人さんが多い様子。
しかも暴言も多いみたいで、初心者は良くわからないうちに色々文句言われて嫌になる人も多いみたいです。私もすでに何度か文句言われて、軽くヘコみました(笑)

 

こういった対戦ゲームは、色々と覚えなければいけないセオリーみたいなのがあって、覚えてないと味方のメンバーに迷惑掛けちゃうんですよね。ゲームに慣れてる人だとWiki等を見て確認したりすると思うのですが、色々覚えるのも結構大変です。

 

SkyBejeでは、友人同士でゲームのプレイ画面を見せ合いながら、情報共有したり、ゲームに慣れてないメンバーに色々と教えたりするような使い方ができれば良いな、と思っています。

 

また、League of Legends は5人でチームを組むゲームなので、他の4人のメンバーの画面がみえるような使い方したら、楽しいんじゃないかと思いました。PCに負荷は掛かりそうですが、メンバーの状況だけ把握できれば良いので、フレームレート1でも良いのではないかと思ってます。

 

ただし、League of Legends はゲーム時にフルスクリーンになるため、プレイしながらメンバーの配信を見るにはデュアルモニタが必須になるのが難点です。

※追記:設定でウィンドウモードにもできるようです。

 

他、ゲーム画面を表示した状態からは、他のアプリケーションの操作ができない様子。
デュアルモニタだと、メイン画面以外はそのまま表示されていますが、他のアプリケーションを操作するには ALT+TABが必要で、さらに他のアプリケーションをクリックするとゲーム画面が隠れてしまうため、ちょっと使い勝手が悪いです。

 

そのため、スマホからSkyBejeのチャットに文字を飛ばせるような仕組みを実装してみようかなと思ってます。まぁボイスチャットの方が便利なのですが、気軽にボイスチャットできない生活環境の人も多いと思うので、多少ニーズはあるんじゃないかなと思ってます。

 

さて、とりあえず League of Legendsを一緒にできる仲間を探そうかな。

 

SkyWay Developer Meetup #1に参加してきました。

9月29日に上野で開催された、表題のイベントに参加してきました。
復習も兼ねて、各種資料やまとめのリンクを集めてみました。

以下、SkyWay Developers Meetup #1 で、発表時に使われたスライド資料です。

SkyWayの目指す世界

 SkyWayを使いこなすために

 LT : iOSでのSkyWay開発の勘所とTips

 LT : Skywayのビデオチャットを録画しよう。そう、ブラウザでね

 

 LT : SkyWay JS SDKの歩き方

以下のリンクから、LTの資料が見れます。
SkyWay JS SDKの歩き方


上記のLT発表者の leader22 さんのブログです。
Q&A大会のメモも残ってて、素晴らしいです。

 

LT:SkyWay × cognitive service

 

Togetterまとめ

 

雑感

こういったイベントに参加するのは初めてだったのですが、非常に勉強になりましたし、良い刺激を受けました。SkyWayの開発者の方と直接を話をする事もできましたし、SkyWayを使ったサービスの開発者同士の繋がりも作れるイベントでしたし、もっと早くこういったイベントに参加すれば良かったな・・と、しみじみ思いました。

ちなみに私は岩手県に住んでますが、行く前は「岩手から参加するのは、きっと私ぐらいだろ~」とか思ってたのですが、他にも岩手から参加してる学生さんがいて、しかも立派にLTしてて驚きました。(内容も面白くて興味が湧くものでした)

次回も参加できそうであれば、是非また参加したいと思えるイベントでした。
ただ、時期にもよりますが、岩手から毎回行くのは色々と厳しい(笑)

前回のWebRTC Meetup Osakaでは、appear.inを使って、東京と大阪を繋いでたみたいですが、あんな感じで地方からも、もっと勉強会やイベントに参加できるようなったら嬉しいですね。

その為にも、もっとSkyWayを色んな人に知ってもらいたいですね。
同業者の知り合いに、私が作っているサービスを見せながら、SkyWay(WebRTC)を使うとこんな事ができるぞ~と布教はしているのですが、なかなか仕事には繋がりません。まぁ私が説明ヘタっていうのもあるのですが(笑)

 


その他、会場で頂いたSkyWayのシールをノートPCに貼ってみました。

f:id:iwatendo:20171001194403j:plain

中央のシールがちょっと斜めになってるのは、りんごマークを隠すように貼った為。
シールを貼る時に気がついたのですが、このロゴは空に道が続いてるのを表してるんですね。

 


さて、Meetupで刺激を受けてやる気が沸いてきたので、作ってるサービスの開発頑張ります!

SkyWayを使ったYouTube同期再生処理を実装

開発中のチャットサービスに、YouTubeの同期再生機能を実装してみました。

 

f:id:iwatendo:20170913132349j:plain

YouTube同期再生のテスト動画。ちょっと暗くてわかりづらいですが、3台のPCをSkybejeで繋いでいます。左上の一番小さなYouTubeの画面の操作で、各PCのYouTube動画が連動して再生・停止・シークしています。

※テストに使わせて頂いた動画は、日食なつこさんの「水流のロック」です。YouTube動画の音は消してます。 

 

チャット時のBGMとして利用したり、オンライン家庭教師等やオンラインサポートのようなサービスでYouTube動画を使って説明したり、友人が接続したときにMステの入場曲を流したりする用途に使用できればと思っています。

追記:YouTube Frame API は、基本的には商用利用禁止なようですね。
参考(
YouTube商業利用のルール

 

SkyWay + YouTube Player Api を使って実現してます。SkyWay(WebRTC)を使用するという事で、YouTube動画を再ストリーミングしている誤解する方もいるかもしれませんが、それぞれのクライアントが、YouTube動画サイトにアクセスしてます。再生する動画のURLや再生・停止情報をSkyWayのデータ通信で送り、疑似的に同期再生させています。

 

ざっくりとした処理の流れ

 ・親ダイアログで、YouTube Player APIを使ってYouTube動画のイベントを拾う。
 ・SkyWayのDataConnectionを使って上記のイベントデータをJSONデータで送る
 ・各クライアントで、YouTube Player APIを使って同じ動作をさせる 

以下のようなYouTube動画の操作が同期できます。
 ・再生開始/停止
 ・再生位置の変更
 ・再生速度の変更
 ・ボリュームの変更(現状、Skybejeでは音量調整は未実装です) 

 

まだまだ問題点も多く、うまく同期しない場合があります。現状、親フレームのイベントを拾って処理してますが、きっちりと実装する前に、どういった動作仕様にするか悩んでて保留にしています。動作仕様は3パターンくらい考えていて 

 

(1)親のYouTubeフレームのでのみ操作可能、クライアント側は操作不可
 ・現状はこの実装です。  

(2)親と全クライアントで操作可能にする。全ての操作を同期させる。
 誰か一人が停止ボタン押した場合、全クライアントの再生が停止するイメージ
 実装は面倒なのですが一応可能と考えています。エラー発生時の対応が難しそうですが・・。 

(3)表示開始のみ行い、動画の操作は各クライアント側で独立させる。
  クライアント側は、動画が勝手に再生されるけど、後は通常通り

使うシーンによっても違うと思うので、親ダイアログ側のオプションで指定する方向でも考えてますが、シンプルにもしたいんですよね。。

 

他、簡易BOT的な機能も実装していて、特的のキーワードに反応してYouTube動画の再生が開始するような機能も実装中です。最終的には音声認識と組合せて「昇竜拳」「波動拳」とか叫ぶと、必殺技の動画が流れるような、某爆裂魔法の詠唱を噛まずに言えたら爆裂魔法が炸裂する動画が流れるような感じで、YouTube動画を遊びに使えるようにしたいですね。

 

以下のサイトから個人で開発中のサービスを試せるので良かったら試してみてください。

https://skybeje.net/ (PCのGoogle Chrome専用サービスです)


YouTube Player APIスマホだと自動再生できないらしいので、スマホ向けには同じような実装は多分できないと思います。

SkyWayの正式サービス化

9月7日にSkyWayが正式サービスになりましたね。

webrtc.ecl.ntt.com

 

私自身、2年近くトライアルで使わせて頂いてて、遂に来たかという想いです。
正式サービスといっても、個人での開発やOSSで展開するよう場合は、実質今まで通り無料で使わせて頂けるようです。

 

まずは NTT Communications さんに感謝です。


Community Editionの無料枠も大きくて、個人開発している分には困らないようなのですが、さらに接続/通信量制限がAPIキーごとのようです。これ、どういう事かと言うと、TK氏の「ユドナリウム」のようなOSSで公開されるWebサービスは、個人で別のWebサーバーに別のSkyWayのAPIキーを取得して構築する事ができます。事実上、無制限に使える感じではないでしょうか。

 

個人で別サーバーを建てるのは、面倒でコストが掛かるイメージがあると思いますが、TK氏のユドナリウムや私が開発中のサービスは、サーバー側の処理がありません。
正確には、通常は Webサーバー/Apサーバー/DBサーバーを使用すると思いますが、Webサーバーだけしか使用しません。作業的には、Webサーバーにプログラム(html/css/javascript等)をアップロードして、SkyWayのAPIキーを取得して設定するだけです。料金的には、Webサーバーだけあれば良いので、無料のサーバーを使えばタダです。

 

私の開発しているサービスのテスト環境も、無料のWebサーバーをかりてます。公開サーバーは独自ドメインを取得している為、多少掛かってますが、年間数千円程度です。さらに言えば、使用ユーザーが増えたとしても AP/DBサーバーが無いので、スケールアウトが必要になる可能性も低いんじゃないでしょうか。


また Enterprise Edition ができた事で、SkyWayを使ったビジネス提案がしやすくなったように思いました。料金は掛かりますが、NTT Communicationsさんのサポートが付くというのは話を進める上でかなり大きいです。

 

料金についても、高いように見えて良心的と思いました。自社でWebRTCサーバーを立てるより圧倒的にローコストで運用可能ですし。

 

ただ、使用料金の予測は難しいですね。
私も完全に理解できている訳ではないのですが、シグナリングはともかく、TRUNサーバーは必ず使うわけでは無くて、複数人の同時利用は単純な掛け算では無いですし。
シグナリングやTRUNについて理解してないと料金表が読めない部分もあるので、会社で偉い人に説明するのが難しい感じはします。


ともあれ、SkyWayが大きなプラットホームになる可能性を感じています。あとはSkyWayを使ったキラーアプリ(キラーサービス?)が登場すれば、一気に盛り上がるんじゃないかと思ってます。


私も、多くの人に使われるサービスを作りたいと頑張ってますので宜しくお願いします。(笑)

スクリーンシェア機能を実装しました。

先日公開したSkyBejeに、スクリーンシェア機能を実装しました。

iwatendo.hateblo.jp

スクリーンシェア機能を実装するにあたって、参考にさせて頂いたサイトです。
解説通りにやってみて、スムーズに実装できました。 

html5experts.jp

ウェブストアへの登録は、以下を参考にやってみました。

qiita.com

 こちらもスムーズに登録できました。デベロッパー登録の5ドルってどうやって払うのだろうか?と思ったのですが、クレジットカードで簡単に支払いできました。


登録したExtensionです。

chrome.google.com

 

f:id:iwatendo:20170817224830p:plain

 

Extensionを追加していない状態で、Skybejeの「スクリーンシェア」を選択すると、上記へのリンクが表示されるので、そこからExtensionを追加できます。

 

f:id:iwatendo:20170818055917p:plain

 

Extensionを追加した後は、以下のようなダイアログが表示され、スクリーンシェアが可能になります。

 

f:id:iwatendo:20170817225209p:plain

 

スクリーンシェアの解像度やフレームレートは、指定できるようにしました。色々と試してみた所、高解像度・高フレームレートは送信側/受信側、双方に高負荷がかかるようなので注意が必要です。

 

試しに「選択画面の解像度」「フレームレート=60」で、YouTube動画を再生している画面をスクリーンシェアしてみたところ・・

 

※検証に使わせて頂いたYouTube動画*1

www.youtube.com

 

スクリーンシェアをしているPCは第4世代のCore i7 ですが、接続者がいない状態でCPUの使用率が47%にもなりました。(もちろん他のプロセスも動いているので、全部がスクリーンシェアの処理では無いですが)

f:id:iwatendo:20170818144103p:plain

 

上記の状態で、2台のPCを接続してみたところ、8コア全てのCPUの使用率が100%になってしまいました。(1台だけだと70%程度でした)

 

f:id:iwatendo:20170818144433p:plain

 

受信している方のPCは、流石に高解像度/高フレームレート配信なので、画面は綺麗に表示されるのですが、接続した2台のPCのうち1台はそれほど性能が高くないPCでは、再生が追いつかずに表示が遅れていき、最後は止まってしまいました。(特にエラーが発生するわけでもなく、スクリーンシェアの画面の動きだけが止まります。チャット等は可能です)

 

せめて問題が発生した事を検知したいのですが、再生の遅れや停止を検出する手段が現状わからず・・・ちょっと悩んでます。


高フレームレートでの利用をできなくする事も考えたのですが、繋いでいるPCの数によっても負荷が増加するようなので、最大値をどれくらいにすれば良いか判断が難しいです。また、高スペックのPC同士の利用では、高フレームレートが使用できると嬉しいケースもあると思ったので、とりあえず注意の文言をいれて、後は自己責任で使ってねという方針にしました。(問題が発生するようであれば、調整を考えます)

 

他、これは画面の共有するだけで、音は配信されません。Chrome Extensionで対応する方法があれば実装したいのですが、方法は見つけれてません。

 

ちなみにYouTubeについては、同期再生させる実装を考えてます。
オンライン家庭教師的な用途にて、YouTube動画を使って説明しながら要所要所で再生を止めて説明する、、みたいな使い方ができればと考えてます。

*1:日食なつこ氏の「水流のロック」。この曲で私はファンになりました。