1.0.1 • Published 4 years ago

@nuno-morais/nativescript-twilio v1.0.1

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
4 years ago

Nativescript Twilio

This plugin allows to create video calls using Twilio on iOS and Android

How does it work?

Twilio has to verify a user before they can join a room. You can generate a token and select a room for them to join a room.

Requirements

  1. Make an account on twilio.com
  2. Create a Programmable Video application. You'll receive an api key, auth token, and account sid.
  3. This will require minimum server knowledge. I used node. You can find further instructions here https://www.twilio.com/docs/api/video/identity also here https://github.com/TwilioDevEd/video-access-token-server-node

Install

ns plugin add @nuno-morais/nativescript-twilio

Usage

  1. In AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.RECORD_AUDIO" />
  1. In Info.plist
<key>NSCameraUsageDescription</key>
<string>Why are you requesting permissions for camera?</string>
<key>NSMicrophoneUsageDescription</key>
<string>Why are you requesting permissions for mic?</string>
  1. Create a view

    3.1. Vanilla

    <twilio:VideoView row="0" id="local-video" ></twilio:VideoView>
    <twilio:VideoView row="1" id="remote-video" ></twilio:VideoView>

    3.2. Angular

    <TwilioVideoView #localVideoView row="0" id="local-video"></TwilioVideoView>
    <TwilioVideoView #remoteVideoView row="1" id="remote-video"></TwilioVideoView>
  2. Generate a token

    async getToken(): Promise<string> {
        const userName = 'awesomename22';
        return await Http.getString({
            url: `https://251c4d52a840.ngrok.io/token?identity=${userName}`,
            method: 'GET',
            headers: { 'Content-Type': 'application/json' },
        }).catch((e) => {
            console.error(e);
            return null;
        });
    }
  3. Request permissions

    await VideoAudioPermissions.checkAll();
    
    const messageAudio = 'Message to request audio';
    const messageVideo = 'Message to request camera';
    
    await VideoAudioPermissions.requestAll(messageAudio, messageVideo);
  4. Create a VideoActivity

        const localVideo = this.page.getViewById('local-video') as VideoView;
    	const remoteView = this.page.getViewById('remote-video') as VideoView;
    	this.videoActivity = new VideoActivity(localVideo, [remoteView]);
        this.videoActivity.connect('testing-room', token, { video: true, audio: true });

Functionalities:

  • startPreview(): Promise<void>;
  • connect(room: string, accessToken: string, options: { video: boolean; audio: boolean }): Promise<void>;
  • disconnect(): Promise<void>;
  • mute();
  • unmute();
  • disableCamera();
  • enableCamera();
  • switchCamera();
  • subscribeOnRemoteParticipantConnect(fn: (participantName: string) => void);
  • subscribeOnRemoteParticipantDisconnect(fn: (participantName: string) => void);
  • subscribeOnLocalParticipantConnect(fn: (participantName: string) => void);
  • subscribeOnLocalParticipantDisconnect(fn: (participantName: string) => void);

License

Apache License Version 2.0