IE and Safari plugin導入手順 - nttcom/peerjs GitHub Wiki

IE and Safari plugin導入手順

はじめに

ここではTemasys Communications Pte. Ltd.が無料で配布しているIE/Safari Pluginを使い、WebRTC非対応のInternet ExplorerやSafariでもSkyWayを利用できるようにする方法をご紹介いたします。

IE/Safari Pluginの導入を検討のお客様は、まずTemasys Communications Pte. Ltd.から配布されているプラグインで動作検証を行って下さい。（Temasys社の配布するプラグインに関するサポートは、SkyWayでは行っておりません）

SkyWayからのサポートを必要とされる場合やIE/Safariでの画面共有機能を利用したい方は、SkyWay公式サポートのプラグインをご使用頂く必要がございます。ご希望の方はダッシュボードのお問い合わせメニューからご連絡ください。

動作対象

Win7
IE9		 Win7
IE10		 Win7
IE11		 Win8.1
IE11		 OSX 10.9
Safari 7.X		 OSX 10.10
Safari 8.0
GetUserMedia ○ ○ ○ ○ ○ ○
MediaStream ○ ○ ○ ○ ○ ○
PeerConnection ○ ○ ○ ○ ○ ○
DataChannel Strings only Strings only ＊ ＊ ＊ ＊

＊ Strings, Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array


1. HTMLコードにAdapterJSを組み込み、Pluginをインストールする

Adapter.jsはTemasysCommunications社が提供しているpolyfillsです。WebRTCをサポートしていないIEやSafariがgetUserMediaや RTCPeerConnectionを利用しようとした際に、Temasys社のIE/Safari pluginのインストールサポートをしてくれます。 Adapter.jsは下記サイトから直接ダウンロードするかCDN経由で取得し、自身のHTMLコードに取り込んでください。

<html>
<head>
  <title>PeerJS - Video chat example</title>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="//cdn.temasys.com.sg/adapterjs/0.11.x/adapter.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
...
...
</head>
</html>

Adapter.jsを定義したHTMLファイルにIE/Safariでアクセスすると、ブラウザ上部にTemasysプラグインのインストールを促すメッセージが表示されるのでインストールします。またインストール後は一度ブラウザを再起動させてください。

Plugin Install Bar in IE and Safari


2. JavaScriptコードを書き換える

1 - AdapterJS.webRTCReady関数

プラグインを読み込むのに多少時間がかかる(~100ms)ため、WebRTC APIを呼ぶ際は下記のようなコールバック関数(AdapterJS.webRTCReady)を記述します。

AdapterJS.webRTCReady(function(isUsingPlugin) {
    // The WebRTC API is ready.
    //isUsingPlugin: true is the WebRTC plugin is being used, false otherwise
    getUserMedia(constraints, successCb, failCb);
});

詳細はこちらを参照してください

2 - Playing streams

プラグインによりMediaStreamを扱うためには、以下のhelper関数を用いて<audio>/<video>エレメントを<object>に変換する必要があります。

attachMediaStream(element, stream)
  • Feeds a MediaStream object into video and audio tags. Calling attachMediaStream(element, null) will detach any existing stream from the element. The stream will still be running and available to be attached to any rendering element.
myVideoElement = attachMediaStream(myVideoElement, myStream);
reattachMediaStream(elementFrom, elementTo)
  • Feeds a MediaStream from one video or audio tag into another.
toVideoElement = reattachMediaStream(toVideoElement, fromVideoElement);

attachMediaStream、reattachMediaStreamを使う際は、以下の例のようにコードを書き換えてください。

Example:

// ** original code **
//$('#my-video').prop('src', URL.createObjectURL(stream));

// ** new code **
$('#my-video')[0] = attachMediaStream($('#my-video')[0], stream);

  • <audio>/<video>エレメントを追加する場合は、追加する毎にコード上で同様の変更が必要です
  • <audio>/<video>エレメントにCSSを適用している場合は、<object>エレメントにも適用するよう修正する必要があります
  • ChromeやFirefoxにおいては、attachMediaStream関数、reattachMediaStream関数は、オリジナルの<audio>/<video>タグを返します

※ 注意
attachMediaStream関数は <audio>/<video>エレメントがDOM上に作成された後に呼び出してください。<audio>/<video>エレメント作成前に呼び出すことはできません。

3. ScreenShare機能

  • ScreenShare機能はTemasys社の無料配布するプラグインでは利用することができません

4. Sampleアプリ

プラグインを使用したSampleアプリはこちらです。IE, Safariでアクセスし動作をご確認ください。

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️