- Important note: The development of this plugin is currently stalled.

Broadcast

A plugin for Reveal.js allowing to broadcast audio and video for slide shows.

Check out the live demo

Installation

Copy the files of the plugin next to your reveal.js presentation and add the dependencies as below.

<script src="https://github.com/rajgoel/reveal.js-broadcast/raw/master/./reveal.js/dist/reveal.js"></script>
<script src="https://github.com/rajgoel/reveal.js-broadcast/raw/master/./reveal.js-broadcast/RTCMultiConnection/RTCMultiConnection.js"></script>
<script src="https://github.com/rajgoel/reveal.js-broadcast/raw/master/./reveal.js-broadcast/RTCMultiConnection/socket.io.js"></script>
<script src="https://github.com/rajgoel/reveal.js-broadcast/raw/master/./reveal.js-broadcast/bCrypt.js"></script>

<script>
//...
Reveal.initialize({
  // ...
  dependencies: [
    { src: '../reveal.js-plugins/broadcast/broadcast.js'},
    // ...
  ]
});
//...
</script>

Configuration

You can configure the broadcast.js plugin by providing a broadcast option in the reveal.js initialization options.

Reveal.initialize({
  // ...
  broadcast: {
    // Set master password to "123456"
    secret: '$2a$05$hhgakVn1DWBfgfSwMihABeYToIBEiQGJ.ONa.HWEiNGNI6mxFCy8S',
    // Configure RTCMultiConnection
    connection: {
      socketURL: 'https://revealjs-broadcast.herokuapp.com:443/'
    },
  },
  // ...
});

The parameter secret is a hash for the password which has to be provided when starting a broadcast. You can generate this secret with generatehash.html. The parameter connection provides the configuration for RTCMultiConnection as described in the API Reference. The only required option is the parameter socketURL. For testing purposes you may use the server https://revealjs-broadcast.herokuapp.com/, but availability and stability are not guaranteed. For anything mission critical I recommend you run your own server. For example, you can deploy https://github.com/muaz-khan/RTCMultiConnection on Heroku using this Installation Guide. Heroku allows you to directly use the GitHub repository without any changes.

Start broadcast

To start a broadcast you can include a button in the slideshow which calls the function RevealBroadcast.start with the broadcast id and the master password.

<input type="text" id="broadcastid" value="">
<input type="password" id="password" value="">
<a href="#" onclick="RevealBroadcast.start( { id: document.getElementById('broadcastid').value, password: document.getElementById('password').value } ); return false;">Start broadcast</a>

After clicking the Start broadcast button, a draggable overlay for the video is shown. Initially, the video shows a snowy image. After connecting to the server and after the user has allowed acces to camera and microphone, the video captured by the camera is shown.

Join broadcast

To join a broadcast you can include a button in the slideshow which calls the function RevealBroadcast.connect with the broadcast id.

<input type="text" id="broadcastid" value="">
<a href="#" onclick="RevealBroadcast.connect( { id: document.getElementById('broadcastid').value } ); return false;">Join broadcast</a>

After clicking the Join broadcast button, a draggable overlay for the video is shown. Initially, the video shows a snowy image. After connecting to the server, the client receives audio and video of the master and the slides are updated whith every update by the master.

Custom events

It is possible to send custom events to the clients by adding the following code to your presentation or plugin.

var message = new CustomEvent('send');
message.content = { sender: 'someplugin', type: 'somecustomevent' };
document.dispatchEvent( message );

The broadcast plugin will forward this event to all connected clients who can listen to custom events using the following code.

document.addEventListener( 'received', function ( message ) {
  // only listen to events of the same sender
  if ( message.content && message.content.sender == 'someplugin' ) {
    switch ( message.content.type ) {
      case 'somecustomevent':
        // do something
        break;
      default:
        break;
    }
  }
});

Whenever a new client joins the broadcast the broadcast plugins sends a newclient event. You can react to the event, e.g., by broadcasting initialisation information to all clients.

document.addEventListener( 'newclient', function() {
  // (re-)send initialisation info as new client has joined
  var message = new CustomEvent('send');
  message.content = {
    sender: 'someplugin',
     type: 'init',
     \\ ...
  };
  document.dispatchEvent( message );
});

In the demo all drawings created with the chalkboard plugin are broadcasted to the clients. Checkout the source code of the chalkboard plugin for an example of the implementation.

Limitations

Browser support may vary and usage on mobile OS may fail. It is recommended to use Chrome, Chromium, or Firefox on desktop.

Credits

The plugin uses a patched version of RTCMultiConnection by Muaz Khan (https://github.com/muaz-khan/RTCMultiConnection).

License

MIT licensed

rajgoel / reveal.js-broadcast

readme