モリノラボ

WebRTCやWebSocketやHTTP/2などのWebモダンテクノロジーをピセ株式会社のエンジニアが情報公開していきます。

WebRTC Conference Japan 2016 に参加してきた!

先週16日~17日に行われた

webrtcconference.jp

に参加してきました。

とても有意義な時間でした。

 

とてもすごい人たちの登壇に刺激的なセッションばかりでとても勉強になりました。

 

僕も気になっていたWebRTCという技術の動向についても語られていました。

ある大手企業の登壇者の方は...

2012年頃のリリースから約5年近くのあいだWebRTCの様々なユースケースが確認され着実にアーリーアダプターからアーリーマジョリティのステップへ向かっている。

と語った上で

私たちは、WebRTCを普及するためにはもっともっと多くのユースケースがつくり必要だ。

 

やはり社内外ではWebRTCと聞くとWeb会議/ライブチャットの技術でしょ?みたいなことよくありました。

実際にはロボティクスの世界などで使われていたり多肢にわたる使い道に驚きを隠せませんでした。

 

ここだけの話、社内の新規事業で本当はWeb会議を作ろうという企画は一切出してなかったんですよね。

 

あれ個人的にやっちゃおうかな...

 

 

接続環境が異なる相手のMediaStreamが正しく取得できない

WebRTCの実装にPeerJSというライブラリを使わせていただきました。

その際「映像・音声」、「音声のみ」、「視聴のみ」の3パターンの環境間でのP2Pに苦戦したのでメモとして残しておきます。

 

通常の「映像・音声」通話の呼び出し、応答は以下の方法で問題ないのですが、

「音声のみ」、「視聴のみ」が入ってくると別対応が必要なパターンがありました。

var peer = new Peer({key: 'APIKEY'});

// 呼び出し

var call = peer.call('相手のPeerId',  mediaStream);// 応答peer.on('call', function(call) { // 応答する際は自分のMediaStreamを返す  call.answer(mediaStream); 

// 相手のMediaStreamを受け取るcall.on('stream', function(stream) {

// streamを元にvideoタグなどに追加する

});

});

 

 

■上記で問題ないパターン

・「映像・音声」→「映像・音声」

・「映像・音声」→「音声のみ」

・「映像・音声」→「視聴のみ」

・「音声のみ」→「音声のみ」

・「音声のみ」→「視聴のみ」

 

■別対応が必要なパターン

・「音声のみ」→「映像・音声」

「音声のみ」は自分から呼び出しを行うと「映像・音声」の人のMediaStreamを正しく取得できないようなので、私はSignalRを使用して相手から呼び出してもらうように実装しました

・「視聴のみ」→「映像・音声」

・「視聴のみ」→「音声のみ」

「視聴のみ」の場合は自分のMediaStreamを持っていないため呼び出しはできないので、こちらもSignalRを使用して相手から呼び出してもらうように実装しました。

また、応答時にMediaStreamをセットせずanswerすると相手のMediaStreamを受け取れるようです。

call.answer();

 

Chromeでカメラ・音声入力メディア使用中赤いマークが消えない

以下のようにローカルメディア情報を取得して、自分を表示、同じ方法で取得した情報をもらって相手を表示していました。

// WebKitベースやMozillaベースのブラウザでもnavigator.getUserMediaが使えるようにする

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

 

// カメラやマイクにアクセスしてMediaStreamを取得する

navigator.getUserMedia({ video: true, audio: true }, function (stream) {

         localStream = stream;

         var url = URL.createObjectURL(stream);

         // videoタグのsrc属性に、生成したurlを設定する

}, function (err) {

         // エラー処理

 

通話を切断したら、相手のMediaStreamを停止します。

// 相手のMediaStreamを停止する

stream.getVideoTracks()[0].stop();

stream.getAudioTracks()[0].stop();

 ちなみに、色々なサイトで以下のような停止方法を見かけますが、私が試した時はエラーで出て使用できませんでした。情報求ム!

stream.stop();

 

これでメディアの開始と停止はOKかな。と、思っていたら何か違和感が…。

ブラウザの赤いマークが消えてない...。

f:id:pise:20151228161338p:plain

何故???と思い、pauseで停止させてみたり、

var v = document.getElementById("videoid");

v.pause();

 

 

開発者ツールでvideoタグを全て削除してみたり、

色々やってみましたが、消えませんでした。

 

しばらく放置していたのですが、答えは簡単なことでした。

自分自身のメディアを停止させていませんでした...。

上記の方法で自分自身のメディアを停止させたところ、無事に赤いマークが消えてくれました。

 

同じ状況で悩んでいる方がいらっしゃいましたら、参考にしてみてください。

双方向通信を実現するWebSocket、SiganlRとは?

WebSocket(ウェブ・ソケット)を簡単にいうとウェブで双方向通信を実現するための通信プロトコルです。

これを利用してよりインタラクティブなアプリケーションを実現することができます。WebSocketでは今までではウェブで実現し難かったリアルタイムな通信を可能にしています。

 

このプロトコルを使いこなせば遷移しないウェブアプリケーションができちゃうわけです。

 

昨年、お仕事でSNSサービスを立ち上げるプロジェクトでこのプロトコルを利用し開発に没頭したことを思い出します。

 

開発を通してわかったことは、プロトコル自体は実用レベルではあるものの世の中がついてきていないというところでしょうか。

 

例えば、IEの古いバージョンがブラウザシェアを占めているという都市伝説やキャリア回線の速度規制などの課題からあえなく一機能を断念するようなこともあったんです。

 

そんな調査/検証の段階で見つけたのが「SiganlR」です。

SignalRを簡単に説明するとクロスブラウザに対応したリアルタイム通信ライブラリです。

SignalRは、下記の4つの通信手段を持っています。

  • ウェブソケット - WebSocket
  • APIイベントソース - Server-Sent Events
  • ロングポーリング - Long Poling
  • 永久フレーム - Forever Frame

クライアントの接続環境によって最適な通信手段を選択し双方向通信を確立してくれます。

ソース入手方法

Microsoft USA ASP.NETチームのDamianEdwards氏のGitHubから「SignalR」のソースを入手することができます。

ライセンス:ApacheLicense2.0

+GitHub

DamianEdwards (Damian Edwards) · GitHub

+NuGet

VisualStudioのPackageManagerConsoleから

Install-Package Microsoft.AspNet.SignalR

サンプルのアプリケーションを確認したいなら

Install-Package Microsoft.AspNet.SignalR.Sample

 

簡単に始めてみるなら過去のハンズオンをやってみてはいかがでしょうか。

 

https://blogs.msdn.microsoft.com/tsmatsuz/2012/04/26/websocket-asp-net-signalr/

このブログについて

初めまして!ITベンチャー、ピセのSUKEです。

 

ブログ開設の経緯 ー

社内で新しく発足された新規事業ワーキンググループに参画しウェブベースの技術関連のSNSサービスの開発やASPサービスの開発をプランニングからキックオフやローンチを行ってきました。

そのような中で多くのトレンドなモダンテクノロジーに触れ合う機会が多く日々アンテナを張り巡らせてプランニングを行うだけでは飽き足らず、これらを通じて得た成果などのお話しを書いていきます。

 

自己紹介 ー

元々は学歴も職歴もエンジニアではなく、不動産営業や建設業施工管理の異業種を経て現在に至ります。

主に生業としている開発言語はC#JavaScriptです。最近は特にAzureやAWSなどのクラウドを利用したアプリケーション開発することも多いです。

 

次回は、WebSocketやWebRTC関連の技術を複数回に分け取り上げますのでお楽しみに!

 

#これは初めての投稿, #ブログは初心者, #まだよくわかっていない, #実は平成生まれ