@eclairab/nativescript-webrtc

NativeScript WebRTC

Uses this for Android and this for iOS.

Installation

• tns plugin add nativescript-webrtc-plugin

Android

Add the following to your app.gradle located in app/App_Resources

android {
....
compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
  }
}

How to make a call

import { WebRTC } from 'nativescript-webrtc-plugin';
WebRTC.init(); // <= Try calling this in you app.js or app.ts or main.ts

IMPORTANT: Make sure you include xmlns:webrtc="nativescript-webrtc-plugin" on the Page element

<webrtc:WebRTCView id="remoteVideoView" height="50%" />
<webrtc:WebRTCView  id="localVideoView" height="50%" />

Using Angular ?

Import the WebRTCModule from nativescript-webrtc-plugin/angular and add it to the imports of your initial @NgModule, like shown here.

Vue

import Vue from 'nativescript-vue';
import WebRTCView from 'nativescript-webrtc-plugin/vue';

Vue.use(WebRTCView);

<WebRTCView #remoteVideoView height="50%" ></WebRTCView>
<WebRTCView #localVideoView height="50%" ></WebRTCView>

Standard Api ✨ New ✨

This api is similar to the webrtc browser api -> example but with TNS appended e.g TNSRTCPeerConnection

Basic Api

Caller

import { WebRTC } from 'nativescript-webrtc-plugin';
const webrtc = new WebRTC({
  enableAudio: true, // default true
  enableVideo: false, // default true
  iceServers: [
    // Optional defaults to google stun servers
    {
      url: 'stun:stun.l.google.com:19302'
    },
    {
      url: 'serverRequiresAuth',
      username: 'username',
      password: 'password'
    }
  ]
});

webrtc.on('webRTCClientDidReceiveRemoteVideoTrackStream', args => {
  const object = args.object;
  const remoteVideoTrack = object.get('remoteVideoTrack');
  remoteStream = object.get('stream');
  const video = frame.topmost().getViewById('remoteVideoView') as WebRTCView;
  video.videoTrack = remoteVideoTrack;
});

webrtc.on('webRTCClientStartCallWithSdp', args => {
  const sdp = args.object.get('sdp');
  const type = args.object.get('type');
  if (type === 'answer') {
    webrtc.handleAnswerReceived({
      sdp: sdp,
      type: type
    });
  } else {
    // send data to signaling server
  }
});

webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
  const iceCandidate = args.object.get('iceCandidate');
  // send data to signaling server
});

// Before using getUserMedia verify the app has the permissions and if not try requesting them

if (!WebRTC.hasPermissions()) {
  try {
    await WebRTC.requestPermissions();
    localStream = await webrtc.getUserMedia(Quality.HIGHEST);
  } catch (e) {}
}

webrtc.connect();
webrtc.addLocalStream(localStream);
webrtc.makeOffer();

Callee

import { WebRTC } from 'nativescript-webrtc-plugin';
const webrtc = new WebRTC({
  enableAudio: true, // default true
  enableVideo: false, // default true
  iceServers: [
    // Optional defaults to google stun servers
    {
      url: 'stun:stun.l.google.com:19302'
    },
    {
      url: 'serverRequiresAuth',
      username: 'username',
      password: 'password'
    }
  ]
});

webrtc.on('webRTCClientStartCallWithSdp', args => {
  const sdp = args.object.get('sdp');
  const type = args.object.get('type') as WebRTCSdpType;
  if (type === WebRTCSdpType.ANSWER) {
    // send data to signaling server
  }
});

webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
  const iceCandidate = args.object.get('iceCandidate');
  // send data to signaling server
});

// Before using getUserMedia verify the app has the permissions and if not try requesting them

if (!WebRTC.hasPermissions()) {
  try {
    await WebRTC.requestPermissions();
    localStream = await webrtc.getUserMedia(Quality.HIGHEST);
  } catch (e) {}
}

webrtc.connect();
webrtc.addLocalStream(localStream);
// sdp received from the signaling server
webrtc.createAnswerForOfferReceived({
  type: sdp.type,
  sdp: sdp.sdp
});

Deploy by executing

npm publish --access=public --otp=<OTP_FROM_AUTHENTICATOR>

Using demo

Note the demo can be ran on a device w/o a camera but you will need to disable the video option here an here for core or here an here for angular also the app connects to remote stun server(s) so internet connection is needed.

1. Start demo-server by running npm i && node app

2. Edit the socket-server.ts or environment.ts to point to your computer's local ip where the demo-server is running

3. Run the demo/demo-ng enter usernames on both device then tap on the username of the other device the demo will auto answer the call . 🙂

License

Apache License Version 2.0, January 2004