Skip to content

How to integrate the IE and Safari Plugin into your SkyWay Application

Jump to bottom Edit New page
Yusuke Naka edited this page May 10, 2017 · 10 revisions

How to integrate the IE and Safari Plugin into your SkyWay Application

NOTE

This page explains how to integrate the IE and Safari Plugin (free) supported by Temasys Communications Pte. Ltd. into your SkyWay App, making it compatible with Safari and Internet Explorer.

If you're considering using the IE/Safari plugin, please first confirm the correct operation of your SkyWay application using Temasys's free plugin. (This plugin is not officially supported by SkyWay. We make no guarantees and cannot provide support.)

If you require support or want to use screen sharing in IE or Safari, it is necessary to use our official SkyWay Plugin. In this case, please contact us through the Contact Form on the SkyWay Dashboard.

Compatibility Matrix

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. Import the AdapterJS in your HTML code and Install the Plugin

Temasys provides a polyfill named AdapterJS. AdapterJS provides polyfills and cross-browser helpers for WebRTC. It wraps around the native APIs in Chrome, Opera and Firefox and provides support for WebRTC in Internet Explorer and Safari on Mac and Windows through the available Temasys IE and Safari Plugins. Please get it from below(github or cdn) and import in your HTML code.

<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>

In versions of IE and Safari that don't support WebRTC natively, AdapterJS will suggest to the user to install the Temasys WebRTC plugin for Mac or Windows when you try to access getUserMedia or RTCPeerConnection. After installing plugin, please restart your browser.

Plugin Install Bar in IE and Safari


2. Changes your JavaScript code

1- AdapterJS.webRTCReady function

Your browser might take a bit of time to load up the plugin (~100ms). So We strongly recommend only executing any WebRTC related code in the callback of the AdapterJS.webRTCReady function. It is triggered whenever the browser or the IE and Safari plugin is ready to be used.

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

Click here for details

2 – Playing streams

The plugin cannot interact with your <audio>/<video> element. In order to render the streams you receive, your <audio>/<video> tags will automatically be replaced by tags controlled by the plugin. In order to keep your references alive, you need to update them using helper functions.


Helper functions

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);

Every time you were using attachMediaStream, or reattachMediaStream, you NEED to change the code as follow:

Example:

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

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

  • If you have additional references of the <audio>/<video> element in your code, you NEED to update them as well.
  • If you have conditional CSS stylings on <audio>/<video> elements, you need to extend them to the plugin <object> elements.
  • In Chrome and Firefox, attachMediaStream and reattachMediaStream will return your original <audio>/<video> tags. Thus your reference won't be changed.
  • In browsers using the plugin, they will return a reference to the new plugin <object>.

※ AttachMediaStream must be called after the video element in injected
AttachMediaStream MUST be called AFTER the <audio>/<video> element was injected into the DOM. You CANNOT call attachMediaStream on a <audio>/<video> element you are creating in your JS code but haven't injected yet.

3. Screen sharing feature

  • Screen sharing is NOT available in the Free version of the Temasys IE and Safari Plugin.

4. Sample App

Sample app is here. Please check the operation in Internet Explorer and Safari on Mac and Windows.

Add a custom footer
Add a custom sidebar
Clone this wiki locally