-
Notifications
You must be signed in to change notification settings - Fork 91
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
Adapter.jsはTemasysCommunications社が提供しているpolyfillsです。WebRTCをサポートしていないIEやSafariがgetUserMediaや RTCPeerConnectionを利用しようとした際に、Temasys社のIE/Safari pluginのインストールサポートをしてくれます。 Adapter.jsは下記サイトから直接ダウンロードするかCDN経由で取得し、自身のHTMLコードに取り込んでください。
- https://github.com/Temasys/AdapterJS
- Minified version:
//cdn.temasys.com.sg/adapterjs/0.12.x/adapter.min.js
- Debug version
//cdn.temasys.com.sg/adapterjs/0.12.x/adapter.debug.js
<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プラグインのインストールを促すメッセージが表示されるのでインストールします。またインストール後は一度ブラウザを再起動させてください。
プラグインを読み込むのに多少時間がかかる(~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);
});
詳細はこちらを参照してください
プラグインによりMediaStreamを扱うためには、以下のhelper関数を用いて<audio>/<video>エレメントを<object>に変換する必要があります。
- 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);
- 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>エレメント作成前に呼び出すことはできません。 |
- ScreenShare機能はTemasys社の無料配布するプラグインでは利用することができません
プラグインを使用したSampleアプリはこちらです。IE, Safariでアクセスし動作をご確認ください。