react-native-twilio-video

v1.1.9

Published

4 years ago

0High
0Medium
0Low

tytv01

react-native twilio video rct

react-native-twilio-video

Getting started

$ npm install react-native-twilio-video --save #OR $ yarn add react-native-twilio-video

Installation

iOS

Cocoapod

Run pod install to install Twilio Video and PromiseKit Dependencies for this package

Permission

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 tim

Android

Insert the following lines inside the dependencies block in AndroidManifest.xml: <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.RECORD_AUDIO"/>

Usage

import React from 'react'
import { AppState, View, Platform, AppStateStatus } from 'react-native'

import { TwiRoomView, TwiPreview, TwiRemoteView, RemoteParticipant } from 'react-native-twilio-video'

import { TWIVideoViewStyles } from './styles';
import { ControlButton } from './TWIVideo.ControllButton';

interface TWIVideoViewState {
    isConnected: boolean,
    participants: Array<RemoteParticipant>,
    shareVideo: boolean,
    shareAudio: boolean,
    token: string,
    error: string,
    status: "INIT" | "LOADING" | "DONE"
}

class TWIVideoView extends React.PureComponent<any, TWIVideoViewState> {

    activeShareVideoState: boolean = true
    roomView!: TwiRoomView

    refRoomView = (r: TwiRoomView) => this.roomView = r

    constructor(props: any) {
        super(props);
        this.state = {
            isConnected: false,
            participants: [],
            shareVideo: true,
            shareAudio: true,
            token: "",
            error: "",
            status: "INIT"
        }

    }

    componentDidMount() {
        AppState.addEventListener("change", this.onAppSateChange)
        this.setState({ status: "LOADING" })
        fetch("https://api-dev.spltty.com/api/user/twilio_token", {
            method: "post",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            body: JSON.stringify({
                identity: ((Math.random() * 10000) + new Date().getTime()).toFixed(0) + Platform.OS,
                platform: Platform.OS
            })
        }).then(response => {
            return response.json();
        }).then(({ data }) => {
            const { token } = data
            this.setState({ token })
        }).catch((error) => {
            this.setState({ error })
        }).then(() => {
            this.setState({ status: "DONE" })
        })
    }

    componentWillUnmount() {
        AppState.removeEventListener("change", this.onAppSateChange)
    }

    // MARK: METHOD
    connect = () => {
        const { token } = this.state
        this.roomView.nativeConnectWithOptions(
            token,
            "test"
        )
    }

    disConnect = () => {
        this.roomView.nativeDisconnect()
    }

    toggleShareVideo = () => {
        this.setState({ shareVideo: !this.state.shareVideo })
    }

    toggleShareAudio = () => {
        const { shareAudio } = this.state
        this.setState({ shareAudio: !shareAudio })
    }

    toggleCamera = () => {
        this.roomView.nativeFlipCamera()
    }

    // MARK: Listen event
    onAppSateChange = (status: AppStateStatus) => {
        switch (status) {
            case "active":
                this.setState({ shareVideo: this.activeShareVideoState })
                break;
            case "background":
                this.activeShareVideoState = this.state.shareVideo
                this.toggleShareVideo()
        }
    }

    onDidConnect = (participants: Array<RemoteParticipant>) => {

        this.setState({ participants, isConnected: true })
    }

    onDisConnected = () => {
        this.setState({ isConnected: false, participants: [] })
    }

    onParticipantConnected = (participants: Array<RemoteParticipant>) => {
        this.setState({ participants })
    }
    onParticipantDisConnected = (participants: Array<RemoteParticipant>) => {
        this.setState({ participants })
    }

    // MARK: RENDER

    renderControls = () => {
        const { isConnected, shareAudio, shareVideo, status } = this.state
        const isLoading = status === "LOADING"

        return (
            <View style={TWIVideoViewStyles.controls}>
                <ControlButton
                    size={50}
                    isLoading={isLoading}
                    onPress={this.toggleShareAudio}
                    color="orange"
                    iconStyle={{ width: 30, height: 30 }}
                    icon={shareAudio ? "https://image.flaticon.com/icons/png/512/41/41758.png" : "https://icon-library.net/images/white-microphone-icon/white-microphone-icon-6.jpg"}
                />
                <ControlButton
                    size={50}
                    isLoading={isLoading}
                    color={isConnected ? "red" : "green"}
                    onPress={isConnected ? this.disConnect : this.connect}
                    iconStyle={{ width: 30, height: 30 }}
                    icon="https://iconsplace.com/wp-content/uploads/_icons/ffffff/256/png/phone-icon-18-256.png"
                />
                <ControlButton
                    size={50}
                    isLoading={isLoading}
                    onPress={this.toggleShareVideo}
                    color="green"
                    iconStyle={{ width: 30, height: 30 }}
                    icon={shareVideo ? "https://png.pngtree.com/svg/20150629/slash_1368083.png" : "https://www.nycc.edu/themes/nycc/images/icon-play-video-white.png"}
                />
            </View>
        )
    }

    render() {
        const { shareVideo, shareAudio, participants } = this.state
        return (
            <View style={TWIVideoViewStyles.container} >

                <TwiRoomView
                    ref={this.refRoomView}
                    style={TWIVideoViewStyles.room}
                    onDidConnect={this.onDidConnect}
                    onParticipantConnected={this.onParticipantConnected}
                    onParticipantDisConnected={this.onParticipantDisConnected}
                    shareVideo={shareVideo}
                    shareAudio={shareAudio}
                    onDisConnected={this.onDisConnected}
                >

                    {participants.map(par => <TwiRemoteView
                        key={par.identity}
                        participantIdentity={par.identity}
                        style={{ flex: 1 }}
                    />)}
                    <TwiPreview
                        style={TWIVideoViewStyles.preview}
                    />
                    <ControlButton
                        containerStyle={{ position: "absolute", top: 80, left: 20, zIndex: 2 }}
                        size={50}
                        onPress={this.toggleCamera}
                        color="#BBBBBB"
                        iconStyle={{ width: 30, height: 30 }}
                        icon="https://iconsplace.com/wp-content/uploads/_icons/ffffff/256/png/rotate-camera-icon-18-256.png"
                    />

                    {this.renderControls()}
                </TwiRoomView>

            </View>
        )
    }
}

export default TWIVideoView

TwiRoomView Props

Inherited View props...

`style`

Used to style and layout the TwiRoomView. See StyleSheet.js and ViewStylePropTypes.js for more info.

| Type | Required | | ---------- | -------- | | View.style | No |

`shareVideo`

Share video for other remote pacitipant or not default is true

| Type | Required | | ---- | -------- | | bool | No |

`shareAudio`

Share audio for other remote pacitipant or not default is true

| Type | Required | | ------ | -------- | | bool | No |

`onDidConnect`

Event when connect to room successfully

| Type | Required | | ------------------ | -------- | | (participants: Array) => void) | No |

`onFailedToConnect`

Event when failed to connect to room

| Type | Required | | ------ | -------- | | () => void | No |

`onDisConnected`

Event when disconnected from room

| Type | Required | | -------- | -------- | | () => void | No |

`onReConnecting`

Event when reconnecting to a room

| Type | Required | | -------- | -------- | | () => void | No |

`onFailedReConnect`

Event when failed to reconnect to a room

| Type | Required | | -------- | -------- | | () => void | No |

`onDidReConnect`

Event when reconnected to a room

| Type | Required | | ------ | -------- | | () => void | No |

`onParticipantConnected`

Event when has any one connect to subcribing room

| Type | Required | | ------------------ | -------- | | (participant: Array) => void | No |

`onParticipantDisConnected`

Event when has any one disconnect from subcribing room.

| Type | Required | | ------ | -------- | | (participant: Array) => void | No |

TwiRemoteView Props

Inherited View props...

`style`

Used to style and layout the TwiRemoteView. See StyleSheet.js and ViewStylePropTypes.js for more info.

| Type | Required | | ---------- | -------- | | View.style | No |

`participantIdentity`

Pacitipant's identity

| Type | Required | | ---- | -------- | | string | yes |