Uncategorized

Skype Web SDK の Audio / Video プログラミング (Spring 2015 版)

By on • ( 1 Comment )

2016/04 追記 : ORTC を使った新しい Skype Web SDK がリリースされました。この最新版の詳細は「Skype Web SDK の Audio / Video プログラミング (最新版)」を参照してください。(ここでの投稿内容は、古い情報です。)

こんにちは。

Lync 時代の UCWA (初期) では Presence や IM (Chat) といった基本機能のみでしたが、Skype for Business (UCWA 2.0, Skype Web SDK) では Audio, Video, Desktop sharing などの高度な機能も実装できます。
今回は、前回の「Skype Web SDK による JavaScript プログラミング」の続きとして、Skype Web SDK を使った Audio / Video の処理について紹介します。

補足 (2016/04 追記) : ここでは、Skype for Business Server を用いて設定しますが、Skype for Business Online (Office 365) でも使用可能になりました。詳細は、新しく掲載した「Skype Web SDK の Audio / Video プログラミング (最新版)」を参照してください。

 

事前準備 (Preparation)

Skype Blog「Bringing Interoperable Real-Time Communications to the Web」でも紹介されているように、Skype / Skype for Business では、高品質な Audio / Video を Web 環境で実現するため ORTC への投資をおこなっています。そして当面は、WebRTC と軽量な Plug-in をベースに API 実装をおこなう予定で、Skyep for Business における Skype Web SDK においても同様の実装を予定しています。(ご存じの通り、Skype では、既に Skype for Web が提供されています。)

しかし、現時点で試せる Skype Web SDK Preview 版では、あくまでも Preview における暫定的な対応として、Skype for Business (旧 Lync) の Web 会議で使用されている Skype for Business Web App の Plug-in を使用して Audio / Video を処理します。このため、現 Preview 段階では、あらかじめ Skype for Business Web App Plug-in を Client にインストール (ダウンロード) する必要があります。(Preview では Plug-in を必要とするため、Audio / Video を扱う場合、Desktop 利用に限定されます。Supported Browser については「Skype for Business Web App supported platforms」を参照してください。)

また、「UCWA 開発入門」でも記載したように、現 Preview 段階では Office 365 には対応しておらず Skype for Business Server が必要ですが (間もなく対応予定です)、今回紹介する Audio / Video の機能を使用する場合は、外部へのアクセスに関係なく、Skype for Business Edge Server を構成しておく必要があります。(Plug-in が使用するためだと思われます。)
Edge Server を完璧にインストールする場合、本来は、外部に接続する Access Edge, Conference Edge, Audio Video Edge の各サーバーを立てますが、今回は Edge Server と共にインストールされる Audio Video Authentication Service (音声ビデオ認証サービス) が動いていれば充分です。(Edge Server は 1 台で充分です。)

なお、ご存じの方も多いかと思いますが、Edge Server と Skype for Business Server は同一マシンに立てられません (通常、Edge は Domain の外に置きます)。また、Skype for Business Server は Active Directory が必須で、Active Directory と Skype for Business Server も同一マシン構成は不可です。さらに Exchange Server と Skype for Business Server の同一マシン構成も不可です。つまり、現 Prewview 段階では、最低でも Server 3 台、さらに Audio / Video が扱える複数の Client PC が必要です。
ということで、私の場合は仕事なので何台ものマシンをセットアップしましたが (しかも、その Audio / Video のデモに失敗するという始末でしたけど。。。)、皆さんは Office 365 の対応を待ってから触ったほうが無難かもしれませんね。。。(構成も特別なので Azure VM を使うのもかなりハードルが高くなります。)

まとめると、以下の事前準備 (prerequisites) が必要です。

  • 「UCWA 開発入門」で紹介した事前準備
    • DNS の設定 (lyncdiscoverinternal の追加)
    • Cross-Domain 接続のための Authorization List (Allowed list) の設定
  • Client 環境への Skype for Business Web App Plug-in のインストール
  • Edge Server のセットアップ (Audio Video Authentication Service の実行)

 

Skype Web SDK による Audio / Video プログラミング

Audio / Video の処理というと、Media に関する難解な知識が必要と思われるかもしれませんが、Skype Web SDK では、直観的な API を呼び出すだけです。
実際、こうした Media の送受信をどのように処理するか、簡単なサンプル コードで見てみましょう。

前回の「Skype SDK による JavaScript プログラミング」 では、Chat (IM) をおこなうサンプル コードとして chatService.start() という関数を使いましたが、Audio Conversation を開始するには、同様に audioService.start() を呼び出すだけです。(Video の場合には、同様に、videoService.start() です。)
上述の Skype for Business Web App Plug-in が音声の送受信をおこなってくれますので、この一行で Browser と Skype for Business 間での音声通話やビデオ通話がおこなえます。(例えば、通信が劣化した場合の音声優先の帯域確保など、高度な処理も Plug-in がすべてやってくれます。)

. . .<body>  <script src="https://swx.cdn.skype.com/shared/v/1.1.23.0/SkypeBootstrap.min.js"></script>  <p><button id="btnSignIn">Sign In</button><button id="btnGetPerson">Get Person</button>  </p>  . . .  <p><button id="btnStartAudio">Start Audio Conversation</button>  </p>  <script>(function () {  var Application;  var app;  var person;  // Initialize skepe sdk  Skype.initialize({apiKey: 'SWX-BUILD-SDK',  }, function (api) {Application = api.application;app = new Application();alert('initialize succeed');  }, function (err) {alert('initialize error: ' + err);  });  document.getElementById('btnSignIn').onclick = function () {app.signInManager.signIn({  username: 'demouser04@example.com',  password: 'P@ssw0rd'}).then(function () {  alert('Signin as ' +app.personsAndGroupsManager.mePerson.displayName());}).then(null, function (err) {  alert('signin error: ' + err);});  }  document.getElementById('btnGetPerson').onclick = function () {var personSearchQuery =  app.personsAndGroupsManager.createPersonSearchQuery();personSearchQuery.text('Demo Taro');personSearchQuery.limit(50);personSearchQuery.getMore().then(function (results) {  person = results[0].result;  person.status.get().then(function (status) {alert('Status is: ' + status);  });}).then(null, function (err) {  alert('Search error: ' + err);});  }  . . .  document.getElementById('btnStartAudio').onclick = function () {var conv = app.conversationsManager.createConversation();app.conversationsManager.conversations.add(conv);var part = conv.createParticipant(person);conv.participants.add(part).then(function () {  conv.selfParticipant.audio.state.changed(function (state) {alert('state:' + state);  });  conv.audioService.start();});  }}());  </script></body>. . .

上記に成功すると、state は、Disconnected -> Connecting -> Connected と遷移するはずです。

Skype for Business Web App Plug-in は上記の audioService.start() によって Load されます。(この際、ファイアウォールで通信を有効にするため許可を求めるポップアップ ウィンドウが表示されるので、[Allow] ボタンを押してください。)
上記の呼び出しの後でブラウザーのアドインを確認すると、下図の通り Skype for Business Web App Plug-in がロードされているのが確認できます。

Audio / Video に対する簡単な操作 (Operation) も可能です。
例えば、下記は、Audio が UnMute の場合は Mute (音声の送信停止) に設定し、Mute されている場合には UnMute に切り替えます。

<body>  . . .  <button id="btnMuteAudio">Mute/Unmute Audio</button>  . . .  <script>(function () {  . . .  document.getElementById('btnMuteAudio').onclick = function () {var conv = app.conversations(0);var audio = conv.selfParticipant.audio;audio.isMuted.set(!audio.isMuted());  }  . . .}());  </script></body>

de:code のセッションでも紹介したように、Video の映像の受信は以下の通り実装します。
DOM の Element に対して Video の stream を設定すると、そこに映像をリアルタイムに表示してくれます。(これも、簡単で直観的なプログラミングですね。)

<body>  . . .  <p><button id="btnStartVideo">Start Video Conversation</button>  </p>  <p><div id="render-window" style="position:absolute;top:170px;left:0px;width:200px;height:200px;"></div>  </p>  <script>(function () {  . . .  document.getElementById('btnStartVideo').onclick = function () {var conv = app.conversationsManager.createConversation();app.conversationsManager.conversations.add(conv);var part = conv.createParticipant(person);conv.participants.added(function (p) {  p.video.channels(0).stream.source.sink.container(document.getElementById("render-window"));});conv.participants.add(part).then(function () {  conv.selfParticipant.video.state.changed(function (state) {alert('state:' + state);  });  conv.videoService.start();});  }  . . .}());  </script></body>

実行結果は下図の通りです。(関係ありませんが、床屋に行きました。。。)

なお、Audio / Video の送受信では HTTP が使用されているわけではありません。(Negotiation までは HTTP で確認できますが。)
現在は上述の Plug-in がこうした Media の通信を処理していますが、将来的には (正式版では) 専用の UX Control が提供され、このコントロールによって処理される予定です。

 

de:code で紹介した Skype Developer Platform の SDK Sample では、こうした動きを完成度の高いサンプル アプリを使って確認できます。

 

Categories: Uncategorized

Tagged as:

1 reply»

  1. Pingback: Skype Web SDK の Audio / Video プログラミング – tsmatz

Leave a Reply