appear.in

Here we explore the idea of using appear.in, instead of Google Hangouts for Fedwiki Happenings. Appear.in is built on top of WebRTC and web standards so we are able to use CSS and HTML to style where and how the video chat rooms appear in wiki.

If you want to adjust width and height of the room, you can also adjust the values for "width" and "height" in the embed code.

Here is out chat room - https://appear.in/fedwiki

# Missing features

The one major missing feature is that of screen recording - but we can hack that using screen capture for now.

The second limitation is that an embedded chat-room does not allow you to Screenshare in the chat room. This is not a serious problem for now, as you are able to view screen sharing when the room is embedded, so a presenter can use full screen mode by opening the room in a new browser tab.

# Leaving and joining

It looks like leaving and re-joining is fast and seamless. Therefore providing a link to open the room in a new browser tab should make it easy to switch from embedded to full screen standalone chat.

It also looks like you can be in more than one room at a time - with each appear.in session in a new tab.

# Developer API Unfortunately this has been retired. Zoom has an API:

* FAQ * developer.appear.in * Launch - blog.appear.in * GitHut - github

# Embedding

How to embed an appear.in room on your web page * Decide which room you want to embed * Replace "your-room-name" with that room name in the embed code below * Copy and paste the embed code into the HTML editor of your blog/web page * Embed code

# Why is the camera light on even though I choose to disable video? The camera light will still be on, because you have given the website appear.in permission to access the camera, and disabling it inside the room does not mean you revoke this permission. If you do not want to give access to the camera at all, you can access the room with adding ?video=off in the URL. You should still be able to use screen sharing - faq

# Developer API - Advanced usage If you are in the market for something a bit more advanced, such as guaranteed empty and random room names, or a compatibility check for your users, you can use our JavaScript SDK - developer.appear.in

Add the following at the bottom of your body tag to start using it.

The JavaScript SDK is also available on NPM. To install, just do:

npm install appearin-sdk

Then you can start using it with:

var AppearIn = require("appearin-sdk");

Note that the NPM version requires a pre-compilation step using something like browserify or webpack to work.

# JavaScript SDK documentation The following is an overview of the API methods present in the JavaScript SDK.

new AppearIn()

Whether you use the standalone JavaScript distribution, or the NPM package, you have to initiate the SDK with the constructor. With the returned object, you may use all API methods below.

// If you use the standalone, use window.AppearIn, for npm users, do require. var AppearIn = window.AppearIn || require('appearin-sdk'); var appearin = new AppearIn(); appearin.isWebRtcCompatible()

Once you have created your appearIn object through the AppearIn constructor, you can query our API.

isWebRtcCompatible() offers an array of tests to determine if the current browser is capable of using WebRTC, the underlying technology of appear.in

// Returns true if browser can use WebRTC, false otherwise var isWebRtcCompatible = appearin.isWebRtcCompatible(); appearin.getRandomRoomName()

You can get a guaranteed unique and random room name inside appear.in for use on your page through getRandomRoomName().

This call offers both promise based workflows, as well as passing an optional callback function. Please note that if you are using the optional callback, the function will no longer return a promise.

// Promise-based workflow (recommended) appearin.getRandomRoomName().then(function (roomName) { // do something with the roomName }); // Callback-based workflow appearin.getRandomRoomName(function (err, roomName) { // do something with the roomName }); appearin.addRoomToIframe(iframe, roomName)

We also provide a convenience function to attach a room to an iframe DOM Element. addRoomToIframe takes two arguments: * iframe, which must be an iframe DOM Element * roomName, which must be a valid roomName

var iframe = document.getElementById("iframe-element-id"); var roomName = "sly-koala"; appearin.addRoomToIframe(iframe, roomName); appearin.addRoomToElementById(elementId, roomName)

Similar to addRoomToIframe, we provide a convenience function to add the room to an iframe DOM Element through the use of the id, similar to how getElementById works. addRoomToElementById takes two arguments: * elementId, which must be a unique ID to an iframe DOM Element * roomName, which must be a valid roomName If the ID doesn't exists, we will simply return.

var roomName = "cool-panda"; appearin.addRoomToElementById("iframe-element-id", roomName);