JavaScriptでWebRTCやるための基礎知識 - console.lealog(); 春なので書きました。 言うなれば、これの2019年度版です。 はじめに 最低限のJavaScriptでWebRTCを扱うにあたり、どういうクラスがあって、どういうAPIを、どう使うのかについての記事です。 いわゆるフロントエンドのエンジニアがWebRTCを使ったサービスを作るなどの場合は、だいたい何かしらのSDKを使うと思います。 その場合はそのSDKのDocsを読めばそれで十分で、その先の仕組みを知る必要はないかなーと思います。 ただし、 SDKの中で何が行われてるか知っておきたい WebRTCのSDKを作る側である みたいな場合は、一読の価値ありかもです。 ようするに、弊社の新入社員のような人材のための記事です！ 基本的なWebRTCの仕組みみたいなパートはざっくり軽めにして、JavaScri

NTTコミュニケーションズ(以下 NTT Com)は、「Enterprise Cloud WebRTC Platform SkyWay(以下 SkyWay)」の音声・映像データを音声認識AIや機械翻訳AI、ライブ配信などのさまざまなクラウドサービスとリアルタイムで連携できるSkyWay簡単機能拡張キット「Media Pipeline Factory(以下 本キット)」を開発しました。2019年1月23日より、無料トライアルの提供を開始します。 1.背景 近年、特に音声認識、機械翻訳、画像認識などの分野において、クラウド上でAI機能を提供するサービスが登場しています。しかし、WebRTC※1により音声・映像データを、それらのクラウドサービスに送信してAI機能と連携させるためには、個別のシステム開発が必要になるなど、多大なコストが生じる課題がありました。 2.概要 今回、NTT ComはSky

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1. はじめに WebRTCは人類の英知の結集と言っても過言ではない、とても洗練されたプロトコルです。 NATやFirewallを超えてP2Pで通信できる 通信に失敗したらサーバリレーモデルにFallbackまでしてくれる 映像・音声・その他のデータを転送できる 辺りが主な特徴です。 これは非常に強力で、既に幅広く利用されており、 市場に関するレポートには以下のように記載されています。 2017年の10億4000万米ドルから、2022年までに64億9000万米ドルまで拡大すると見られています。 こうして広く活用が進むに連れ、元々考慮され

この記事は SkyWay Advent Calendar 2018 の18日目の記事です。 はじめに #####作った動機 自分が絡んでいるイベントの会場に、少しでもホスピタリティを高められる何かを作れないかと思い、SkyWayを利用したサイネージを企画・開発しました。とはいえ、たいしたモノではないです。 #####これを導入したイベントについて 山口県で行われている、Web・DTP・デザインなどのセッションが一堂に会する年1回レベルのセミナーイベント CREATIVE HUNT（クリエイティブハント） で導入しました。会場は山口大学で、セッションは4ライン（4部屋同時進行）制。今年は約160名の皆様に参加いただけました。 実際にイベントでの使用した時の様子 ####配信側 配信用のデバイスは、各教室の背面側の黒板に固定。今回はiPod touch（Wi-Fi接続）を4台使用しました。 音

はじめに この記事はSkyWay Advent Calendar 2018の19日目の記事です。 SkyWay(WebRTC)を使って作成した簡易Web会議システムに、リアルタイム会話翻訳機能（日本語と英語の翻訳と読み上げ機能）を実装できるか試してみました。 できたもの リアルタイム翻訳機能の付いたWeb会議を作ってみました。 pic.twitter.com/o1W3jqmpyw — 依藤充範 (@yorifuji) 2018年12月18日 映像ではわかりづらいですが、右側の端末で喋った日本語の声が、左側の端末では英語の声で読み上げられています。 映像では試していませんが英語から日本語への変換もできます。 翻訳機能の付いたWeb会議として使うことができるかもしれません。 デモサイト Windows or macOS の Google Chrome でのみ動作します。 右下の Room Na

この記事は NTTコミュニケーションズ Advent Calendar 2018 の11日目です。 普段はWebRTCプラットフォーム SkyWayの中の人をやっています。ですので、本日はWebRTCに関連したネタを投稿します。 WebRTCでは、コーデックの相性問題や端末・通信への影響が大きいため、映像（Video）がフォーカスされやすくネットにも情報が豊富です。反面、オーディオについてはそんなに情報がない気がします（特に日本語の情報は）。普段必要とされいないというのもあるかもしれませんが、WebRTCを使ってアプリ開発を行う上で、知っておいたほうが良いこともあるため、今回はまとめてみることにします。 お断り: この記事は以前私が勉強会で発表した資料をベースに、加筆しQiita記事として書き起こしたものです WebRTCで用いられるオーディオコーデック WebRTCで一般的に用いられてい

はじめに この記事は Flutter #2 Advent Calendar 2018 11日目の記事です。Firebase について書こうかと思っていたのですが大したネタができなかったので Plugin packages について書きます。 Plugin packages Flutter の Package には、Dart のみで書かれたものと、OS 固有の実装を書いて連携するものの2種類があり、前者は Dart packages、後者は Plugin packages と呼ばれます。今回 OS と連携する部分について調べてみようと思い、何か Plugin packages を作ってみることにしました。あまり単純すぎてもつまらないので、SkyWay SDK を使って WebRTC をやってみたいと思います。 Developing packages & plugins SkyWay - En

この記事は SkyWay Advent Calendar 2018 の8日目の記事です。 はじめに 一昔前は、ビデオチャット構築に莫大なコストが掛かっていましたが、今は便利なSDKやAPIがたくさんあります。 今回はSkyWayさんのAPIを使うことで爆速でビデオチャットを構築してみます。 ビデオチャット構築 まずはSkyWayにアクセスしてください。 新規登録からCommunity Editionの無料で新規登録を選択します。 Community Editionは無料で利用出来ます。(2018/12/8時点) 名前、メールアドレス、パスワードを入力して登録します。 入力したメールアドレス宛に認証メールが届きますので、そちらをクリックして認証します。 メール認証したら、ログインをして開発者用ダッシュボードに進みます。 新しくアプリケーションを追加するを選択してください。 アプリケーション説

はじめに この記事はSkyWay Advent Calendar 2018の9日目の記事です。 8日目はkolifeさんの「【爆速！】5分でビデオチャットを構築する」でした。 作ったもの タイトルにある通り、Webカメラの映像を分割し、SkyWayを使ってP2Pで配信するWebアプリケーションを作りました。 イメージとしては「HTML5 JUMBOTRON」の逆のような感じです。 ソースコードはこちらで公開しています。 コミットログを見てわかるように、最初はVue.jsを使ってみようと思いましたが、よくわからずに挫折してしまいました。 SkyWay Advent Calendar 2018の4日目でn0bisukeさんが「Nuxt.jsとSkyWayで1時間でビデオチャットを作ってみる」という記事を書いてくださっているので、こちらを参考に再挑戦してみたいと思います。 仕組み 映像取得 皆さ

Nuxt.js+SkyWayを使うとビデオチャットがらくーに作れつつ、jQueryな実装と比べてコードが読みやすいと思います。 SkyWayのサンプル実装をNuxt.jsにリプレイスしてみた感じです。 開発環境など Node.js v11.0.0 Nuxt.js v2.3.4 SkyWay JS SDK v1.1.18 Nuxt.jsでWebページの雛形を作成 Create Nuxt Appで作成します。 $ npx create-nuxt-app nuxt-skyway npx: 402個のパッケージを28.845秒でインストールしました。 > Generating Nuxt.js project in /Users/n0bisuke/dotstudio/playground/nuxt-skyway/nuxt-skyway ? Project name nuxt-skyway ? Pro

はじめに 先日フォロを買いました。多脚でガシガシ歩いて可愛い子です。 この子はプラモデルのように組み立てられるようになっていて、足や胴を動かす部分は単三電池に直結してあげるだけで動くようになっていました。 これなら自分で自由に動かすプログラムが書けるんじゃないかと思い、SkyWay WebRTC GatewayのARM版とRaspberry Piを利用して実装してみます。 完成したやつ 基盤が重くて可哀想だったので大八車を作ってやりました pic.twitter.com/qTTniaAijV — るんばにゃん (@arukakan) 2018年9月10日 この記事では↑のロボットをどうやって動かしているのかを書いていきます。 基本的にはインターネット越しにラズパイを操作する話なので、大体のIoTデバイスにも応用できるはずです。 ラズパイカメラを付けたので、遠隔で映像を見ながら操縦できるよう

NTT Tech Conference #3(https://ntt-developers.github.io/ntt-tech-conference/03/) にて講演した資料です。 訂正: P.37-39 の見出しは、"DTLSの上"ではなく"SCTPの上"が正解です。

2019.12.12 追記  本日より正式提供を開始しました。 --- WebRTC Gatewayの試験提供を開始しました。 WebRTC Gatewayは、SkyWayをブラウザ以外からも利用できるようにしたWebRTC通信エンジンです。 WebRTC Gatewayを使えば、既存の監視カメラや様々なデバイスの映像・音声・データを、WebRTCを使って、送受信することができます。 WebRTC Gatewayを利用すると以下のようなユースケースを実現することができます。 様々なデバイスをブラウザからコントロール WebRTC上の映像や音声データを取り出せる（録音録画や音声認識、配信などで活用） カメラやセンサの情報をインターネット経由で取得 Linux / Windowsで動作するx86_64用のバイナリファイルと、ARM用のバイナリファイルを提供しています。詳細・利用方法等については

Amazon SumerianでWebRTC(SkyWay)を使って簡単な全天球カメラビデオチャットを作ってみたので作成手順をメモしておく。 実行すると自分のpeer idが表示されるので相手に知らせて入力欄に入れてもらいconnectボタンを押すとビデオチャットが行える。 お互い全天球カメラをWebカメラとして接続していれば相手に球面に貼り付けた状態で表示される（通常のWebカメラだと球面に貼り付けられて歪む）。 作成手順 Amazon Sumerianで簡単な全天球画像ビューワーを作ってみる - Qiita と同じ手順を実施して以下のようにHTMLとスクリプトを変更する。 HTML 'use strict'; function makeVideo(stream) { let video = document.createElement('video'); video.crossOrig

これは何？ SkyWay に WebRTC GW が labs リリースされ（わーい）、WebRTC 使ってほんと色んなことができるようになったので、OpenCVなんかと組み合わせて顔検出やってみたよという記事 SkyWay WebRTC GWって？ WebRTCのプロトコルゲートウェイ。例えば、WebRTC で暗号化送信されてきたメディアデータを RTP の生データとして取り出すことができる。解析処理とか加工処理とか自由自在。AIとかMLと組み合わせれば音声認識やら映像解析やら好き放題できちゃう。たまらん。 頑張れば、オレオレ Amazon Echo や Google Home だって作れちゃうぞ！きっと 1 2 この記事を読めば作れるもの 論より証拠。デモサイトをチェック https://34.221.167.183:9001/ connect ボタンを押すと、クラウドに deploy

記事の概要 UnityでWebRTCの映像が出せたよーと無邪気に書いたところ、思ったより大きな反響を頂いたので急ぎ解説記事を書きました。 あんな内部動作の説明もほぼない記事をいっぱいLikeしていただいてすいません。 SkyWay WebRTC GW使ってブラウザからUnityに動画流し込み成功した。 リファクタしたらライブラリ化しよう。 pic.twitter.com/rFORJ55Dlc — るんばにゃん (@arukakan) 2018年7月10日 ゆれるごーふぁー 「ライブラリ化して公開する」と書きましたが、異常系の実装がめんどう興味を持って頂けたようなので取り急ぎ内部構造をお見せしたほうがいいかなと思い、慌てて中身の解説をします。 ライブラリ化は時間をかけてじっくりやることにしますので、試してみたい方はGitHubにリポジトリ全体を公開していますのでこちらをご覧ください。 以下リ

やったこと 最近公開されたSkyWayのWebRTC Gatewayを利用して、WebRTCの映像をUnityでレンダリングしてみました。 具体的な実装方法についてざっくり記載します => 2018/7/13追記: ソースコード公開して解説記事を書きました。　https://qiita.com/nakakura/items/a99c468c56db2a92b32f SkyWay WebRTC GW使ってブラウザからUnityに動画流し込み成功した。 リファクタしたらライブラリ化しよう。 pic.twitter.com/rFORJ55Dlc — るんばにゃん (@arukakan) 2018年7月10日 実装 Unityへのテクスチャ取り出しについては、MHD Yamen Saraiji氏のmrayGStreamerUnityを利用しました。Thanks Yamen! mrayGstream

WebRTCも誕生から5年以上経っており、Web上の記事も多く増えてきた。WebRTCには、大きくMedia ChannelとData Channelがあるが、後者のData Channelの日本語記事は非常に少ない。 日本語の記事の中では、@udonchan氏の記事が最も正確に書かれているが、2014年から時間が経ったこともあり、やや変更が加わっている部分(e.g. SCTPのPPIDは57まで定義されている点など)もある。その他の日本語記事は、やや記述が不正確なところもあるので、あまりオススメしない。 本記事では、WebRTC Data Channelについて知っておいた方が良いこと、および一次情報への参照をまとめておこうと思う。(本記事自体は、主観がそれなりに含まれるので、参考程度にしつつあとは一次情報や実機で確かめてもらえれば) W3C APIについて 仕様は以下の2つが役立つ。