whocode-nativescript-webrtc
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.7 • Public • Published

    NativeScript WebRTC

    npm npm Build Status

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

    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

    Install

    npm i whocode-nativescript-webrtc

    DownloadsWeekly Downloads

    1

    Version

    2.0.7

    License

    Apache-2.0

    Unpacked Size

    439 kB

    Total Files

    241

    Last publish

    Collaborators

    • avatar