npmpackage.info

Gathering detailed insights and metrics for ir-react-native-custom-twilio-video-webrtc

ir-react-native-custom-twilio-video-webrtc - 1.0.6 | npmpackage.info

ir-react-native-custom-twilio-video-webrtc

Twilio Video (WebRTC) for React Native

1.0.6

MIT

Java

259.00 B

Installations

npm install ir-react-native-custom-twilio-video-webrtc

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.18.3

NPM Version

6.14.15 Score

73.5

Supply Chain

Quality

75.1

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

Java

Objective-C

JavaScript

Starlark

Ruby

Java (51.95%)

Objective-C (23.56%)

JavaScript (22.59%)

Starlark (1.1%)

Ruby (0.8%)

Developer

yoramboccia-IR

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

282 Commits

6 Branches

1 Contributors

Updated on Mar 29, 2022

Bundle Size

571.00 B

Minified

259.00 B

Minified + Gzipped

Bundlephobia

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

1.0.6

Package Id

ir-react-native-custom-twilio-video-webrtc@1.0.6

Unpacked Size

188.77 kB

Size

40.95 kB

File Count

NPM Version

6.14.15

Node Version

14.18.3

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

prop-types

Dev Dependencies

@types/react @types/react-native babel-eslint del doctoc gulp gulp-concat gulp-load-plugins gulp-react-docs gulp-tap react-docgen standard

Custom Twilio Video (WebRTC) for React Native

Platforms:

iOS
Android

People using a version < 1.0.1 please move to 1.0.1 since the project changed a lot internally to support the stable TwilioVideo version.

Installation

react-native >= 0.40.0: install ir-react-native-custom-twilio-video-webrtc@1.0.1
react-native < 0.40.0: install ir-react-native-custom-twilio-video-webrtc@1.0.0

Install Node Package

Option A: yarn

1yarn add https://github.com/yoramboccia-IR/ir-react-native-custom-twilio-video-webrtc

Option B: npm

1npm install https://github.com/yoramboccia-IR/ir-react-native-custom-twilio-video-webrtc --save

iOS

Option A: Install with CocoaPods (recommended)

Add this package to your Podfile

1pod 'ir-react-native-custom-twilio-video-webrtc', path: '../node_modules/ir-react-native-custom-twilio-video-webrtc'

Note that this will automatically pull in the appropriate version of the underlying TwilioVideo pod.

Install Pods with

1pod install

Option B: Install without CocoaPods (manual approach)

Add the Twilio dependency to your Podfile

1pod 'TwilioVideo'

Install Pods with

1pod install

Add the XCode project to your own XCode project's Libraries directory from

node_modules/ir-react-native-custom-twilio-video-webrtc/ios/RNTwilioVideoWebRTC.xcodeproj

Add libRNTwilioVideoWebRTC.a to your XCode project target's Linked Frameworks and Libraries
Update Build Settings

Find Search Paths and add $(SRCROOT)/../node_modules/ir-react-native-custom-twilio-video-webrtc/ios with recursive to Framework Search Paths and Library Search Paths

Post install

Be sure to increment your iOS Deployment Target to at least iOS 11 through XCode and your Podfile contains

platform :ios, '11.0'

Permissions

To enable camera usage and microphone usage you will need to add the following entries to your Info.plist file:

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>

Known Issues

TwilioVideo version 1.3.8 (latest) has the following know issues.

Participant disconnect event can take up to 120 seconds to occur. Issue 99
AVPlayer audio content does not mix properly with Room audio. Issue 62

Android

As with iOS, make sure the package is installed:

1yarn add https://github.com/yoramboccia-IR/ir-react-native-custom-twilio-video-webrtc

Then add the library to your settings.gradle file:

include ':ir-react-native-custom-twilio-video-webrtc'
project(':ir-react-native-custom-twilio-video-webrtc').projectDir = new File(rootProject.projectDir, '../node_modules/ir-react-native-custom-twilio-video-webrtc/android')

And include the library in your dependencies in android/app/build.gradle:

dependencies {
    .....
    .....
    .....
    compile project(':ir-react-native-custom-twilio-video-webrtc')
}

You will also need to update this file so that you compile with java 8 features:

android {
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
}

Now you're ready to load the package in MainApplication.java. In the imports section, add this:

1import com.twiliorn.library.TwilioPackage;

Then update the getPackages() method:

1    protected List<ReactPackage> getPackages() {
2        return Arrays.<ReactPackage>asList(
3            ...
4            new TwilioPackage()
5        );
6    }

Permissions

For most applications, you'll want to add camera and audio permissions to your AndroidManifest.xml file:

1    <uses-permission android:name="android.permission.CAMERA" />
2    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
3    <uses-permission android:name="android.permission.RECORD_AUDIO" />
4    <uses-feature android:name="android.hardware.camera" android:required="false" />
5    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
6    <uses-feature android:name="android.hardware.microphone" android:required="false" />

Newer versions of Android have a different permissions model. You will need to use the PermissionsAndroid class in react-native in order to request the CAMERA and RECORD_AUDIO permissions.

Additional Tips

Under default settings, the Android build will fail if the total number of symbols exceeds a certain threshold. If you should encounter this issue when adding this library (e.g., if your build fails with com.android.dex.DexIndexOverflowException), you can turn on jumbo mode by editing your app/build.gradle:

android {
  ...
  dexOptions {
    jumboMode true
  }
}

If you are using proguard (very likely), you will also need to ensure that the symbols needed by this library are not stripped. To do that, add these two lines to proguard-rules.pro:

  -keep class org.webrtc.** { *; }
  -keep class com.twilio.** { *; }
  -keep class tvi.webrtc.** { *; }

Docs

You can see the documentation here.

Usage

We have three important components to understand:

1import {
2  TwilioVideo,
3  TwilioVideoLocalView,
4  TwilioVideoParticipantView
5} from 'ir-react-native-custom-twilio-video-webrtc'

TwilioVideo / is responsible for connecting to rooms, events delivery and camera/audio.
TwilioVideoLocalView / is responsible local camera feed view
TwilioVideoParticipantView / is responsible remote peer's camera feed view

Here you can see a complete example of a simple application that uses almost all the apis:

1import React, { Component, useRef } from 'react';
2import {
3  TwilioVideoLocalView,
4  TwilioVideoParticipantView,
5  TwilioVideo
6} from 'ir-react-native-custom-twilio-video-webrtc';
7
8const Example = (props) => {
9  const [isAudioEnabled, setIsAudioEnabled] = useState(true);
10  const [isVideoEnabled, setIsVideoEnabled] = useState(true);
11  const [status, setStatus] = useState('disconnected');
12  const [participants, setParticipants] = useState(new Map());
13  const [videoTracks, setVideoTracks] = useState(new Map());
14  const [token, setToken] = useState('');
15  const twilioRef = useRef(null);
16
17  const _onConnectButtonPress = () => {
18    twilioRef.current.connect({ accessToken: token });
19    setStatus('connecting');
20  }
21  
22  const _onEndButtonPress = () => {
23    twilioRef.current.disconnect();
24  };
25
26  const _onMuteButtonPress = () => {
27    twilioRef.current
28      .setLocalAudioEnabled(!isAudioEnabled)
29      .then(isEnabled => setIsAudioEnabled(isEnabled));
30  };
31
32  const _onFlipButtonPress = () => {
33    twilioRef.current.flipCamera();
34  };
35
36  const _onRoomDidConnect = ({roomName, error}) => {
37    console.log('onRoomDidConnect: ', roomName);
38
39    setStatus('connected');
40  };
41
42  const _onRoomDidDisconnect = ({ roomName, error }) => {
43    console.log('[Disconnect]ERROR: ', error);
44
45    setStatus('disconnected');
46  };
47
48  const _onRoomDidFailToConnect = error => {
49    console.log('[FailToConnect]ERROR: ', error);
50
51    setStatus('disconnected');
52  };
53
54  const _onParticipantAddedVideoTrack = ({ participant, track }) => {
55    console.log('onParticipantAddedVideoTrack: ', participant, track);
56
57    setVideoTracks(
58      new Map([
59        ...videoTracks,
60        [
61          track.trackSid,
62          { participantSid: participant.sid, videoTrackSid: track.trackSid },
63        ],
64      ]),
65    );
66  };
67
68  const _onParticipantRemovedVideoTrack = ({ participant, track }) => {
69    console.log('onParticipantRemovedVideoTrack: ', participant, track);
70
71    const videoTracksLocal = videoTracks;
72    videoTracksLocal.delete(track.trackSid);
73
74    setVideoTracks(videoTracksLocal);
75  };
76
77  return (
78    <View style={styles.container}>
79      {
80        status === 'disconnected' &&
81        <View>
82          <Text style={styles.welcome}>
83            React Native Twilio Video
84          </Text>
85          <TextInput
86            style={styles.input}
87            autoCapitalize='none'
88            value={token}
89            onChangeText={(text) => setToken(text)}>
90          </TextInput>
91          <Button
92            title="Connect"
93            style={styles.button}
94            onPress={_onConnectButtonPress}>
95          </Button>
96        </View>
97      }
98
99      {
100        (status === 'connected' || status === 'connecting') &&
101          <View style={styles.callContainer}>
102          {
103            status === 'connected' &&
104            <View style={styles.remoteGrid}>
105              {
106                Array.from(videoTracks, ([trackSid, trackIdentifier]) => {
107                  return (
108                    <TwilioVideoParticipantView
109                      style={styles.remoteVideo}
110                      key={trackSid}
111                      trackIdentifier={trackIdentifier}
112                    />
113                  )
114                })
115              }
116            </View>
117          }
118          <View
119            style={styles.optionsContainer}>
120            <TouchableOpacity
121              style={styles.optionButton}
122              onPress={_onEndButtonPress}>
123              <Text style={{fontSize: 12}}>End</Text>
124            </TouchableOpacity>
125            <TouchableOpacity
126              style={styles.optionButton}
127              onPress={_onMuteButtonPress}>
128              <Text style={{fontSize: 12}}>{ isAudioEnabled ? "Mute" : "Unmute" }</Text>
129            </TouchableOpacity>
130            <TouchableOpacity
131              style={styles.optionButton}
132              onPress={_onFlipButtonPress}>
133              <Text style={{fontSize: 12}}>Flip</Text>
134            </TouchableOpacity>
135            <TwilioVideoLocalView
136              enabled={true}
137              style={styles.localVideo}
138            />
139          </View>
140        </View>
141      }
142
143      <TwilioVideo
144        ref={ twilioRef }
145        onRoomDidConnect={ _onRoomDidConnect }
146        onRoomDidDisconnect={ _onRoomDidDisconnect }
147        onRoomDidFailToConnect= { _onRoomDidFailToConnect }
148        onParticipantAddedVideoTrack={ _onParticipantAddedVideoTrack }
149        onParticipantRemovedVideoTrack= { _onParticipantRemovedVideoTrack }
150      />
151    </View>
152  );
153}
154
155AppRegistry.registerComponent('Example', () => Example);

Run the Example Application

To run the example application:

Move to the Example directory: cd Example
Install node dependencies: yarn install
Install objective-c dependencies: cd ios && pod install
Open the xcworkspace and run the app: open Example.xcworkspace

Migrating from 1.x to 2.x

Make sure your pod dependencies are updated. If you manually specified a pod version, you'll want to update it as follows:

  s.dependency 'TwilioVideo', '~> 2.2.0'

Both participants and tracks are uniquely identified by their sid/trackSid field. The trackId field no longer exists and should be replaced by trackSid. Commensurate with this change, participant views now expect participantSid and videoTrackSid keys in the trackIdentity prop (instead of identity and trackId).
Make sure you're listening to participant events via onParticipant{Added/Removed}VideoTrack rather than onParticipant{Enabled/Disabled}Track.

Contact

Yoram Boccia yoram@intuitionrobotics.com

No vulnerabilities found.

No security vulnerabilities found.