UniChatJS: Simple unichat-to-unichat with WebRTC

UniChatJS provides a complete, configurable, and easy-to-use unichat-to-unichat API built on top of WebRTC, supporting both data channels and media streams.

Live Example

Here's an example application that uses both media and data connections: https://glitch.com/~unichatjs-video. The example also uses its own UnichatServer.

Setup

Include the library

with npm: npm install unichatjs

with yarn: yarn add unichatjs

// The usage -
import Unichat from 'unichatjs';

Create a Unichat

var name = prompt('What's your name?');

var unichat = new Unichat(name, { 
  host: 'localhost',
  port: 9000,
  secure: true
});

// or

// var unichat = new Unichat({
//   config: {'iceServers': [
//     { url: 'stun:stun.l.google.com:19302' },
//     { url: 'turn:homeo@turn.bistri.com:80', credential: 'homeo' }
//   ]} /* Sample servers, please use appropriate ones */
// });

// unichat.on('open', function(name){
//   alert(name + ' connected');
// });

// const unichatServer = new Unichatjs(undefined, {
//   host: UNICHAT_SERVER_HOST,
//   path: UNICHAT_SERVER_PATH,
//   secure: false,
//   port: UNICHAT_SERVER_PORT,
//   config: {
//     iceServers: [
//       {
//         urls: [
//           'stun:stun1.l.google.com:19302',
//           'stun:stun2.l.google.com:19302',
//         ],
//       },
//     ],
//   },
// });

or
const unichat = new Unichat('pick-an-id'); 
// You can pick your own id or omit the id if you want to get a random one from the server.

Data connections

Connect

const conn = unichat.connect('another-peers-id');
conn.on('open', () => {
  conn.send('hi!');
});

Receive

unichat.on('connection', (conn) => {
  conn.on('data', (data) => {
    // Will print 'hi!'
    console.log(data);
  });
  conn.on('open', () => {
    conn.send('hello!');
  });
});

Media calls

Call

navigator.mediaDevices.getUserMedia({video: true, audio: true}, (stream) => {
  const call = unichat.call('another-peers-id', stream);
  call.on('stream', (remoteStream) => {
    // Show stream in some <video> element.
  });
}, (err) => {
  console.error('Failed to get local stream', err);
});

Answer

unichat.on('call', (call) => {
  navigator.mediaDevices.getUserMedia({video: true, audio: true}, (stream) => {
    call.answer(stream); // Answer the call with an A/V stream.
    call.on('stream', (remoteStream) => {
      // Show stream in some <video> element.
    });
  }, (err) => {
    console.error('Failed to get local stream', err);
  });
});

Running tests

npm test

Browsers support

Firefox	Chrome	Safari
last 4 versions	last 4 versions	12.1+

Safari

1. Safari supports only string data when sending via DataConnection. Use JSON serialization type if you want to communicate with Safari. By default, DataConnection uses Binary serialization type.

FAQ

Q. I have a message Critical dependency: the request of a dependency is an expression in browser's console

A. The message occurs when you use UniChatJS with Webpack. It is not critical! It relates to Parcel parcel-bundler/parcel#2883 We'll resolve it when updated to Parcel V2.

Links

UnichatServer

License

UniChatJS is licensed under the MIT License.