rn-verto-typescript
Version:
Verto Free Switch with React Native Type Script
262 lines (261 loc) • 11.5 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const VertoClient_1 = __importDefault(require("../verto/VertoClient"));
const styles_1 = __importDefault(require("./styles"));
const ViewType_enum_1 = __importDefault(require("../enums/ViewType.enum"));
const ViewContainer_1 = __importDefault(require("./ViewContainer"));
const ToolboxImage_enum_1 = require("../enums/ToolboxImage.enum");
let vertoClient;
const VertoView = (props) => {
const [localStreamURL, setLocalStreamURL] = react_1.useState('');
const [localStream, setLocalStream] = react_1.useState(null);
const [call, setCall] = react_1.useState(null);
const [remoteStreamURL, setRemoteStreamURL] = react_1.useState('');
const [isStreamStarted, setStreamStarted] = react_1.useState(false);
const [text, onChangeText] = react_1.useState('1001');
const [audioFileIndex, setAudioFileIndex] = react_1.useState(ToolboxImage_enum_1.ToolboxImage.Audio);
const [videoFileIndex, setVideoFileIndex] = react_1.useState(ToolboxImage_enum_1.ToolboxImage.Video);
react_1.useEffect(() => {
setDefaultStates();
vertoClient = new VertoClient_1.default(props.vertoParams, {
...props.callbacks,
onCallStateChange,
onInfo,
onNewCall,
onPlayLocalVideo,
onPlayRemoteVideo,
onStreamReady
});
return () => vertoClient.destroy();
}, []);
react_1.useEffect(() => {
// console.log('useEffect handleCallState');
handleCallState();
}, [props.callState]);
react_1.useEffect(() => {
// console.log('useEffect handleAudioState');
handleAudioState();
}, [props.isAudioOff]);
react_1.useEffect(() => {
// console.log('useEffect handleVideoState');
handleVideoState();
}, [props.isCameraOff]);
//#region Notify Events
//#endregion
//#region Call Listener Methods
const onCallStateChange = (state) => {
// console.log('onCallStateChange => ', state);
if (state && state.current && (state.current.name === "hangup" || state.current.name === "destroy")) {
setLocalStreamURL(null);
setRemoteStreamURL(null);
setStreamStarted(false);
}
if (state && state.current && (state.current.name === "active")) {
setStreamStarted(true);
muteAudio(props.isAudioOff);
muteVideo(props.isCameraOff);
}
if (props.callbacks.onCallStateChange) {
props.callbacks.onCallStateChange(state);
}
};
const onInfo = (params) => {
// console.log('onInfo params:', params);
if (props.callbacks.onCallStateChange) {
props.callbacks.onInfo(params);
}
};
const onNewCall = (call) => {
// console.log('onNewCall:', call);
setCall(call);
if (props.callbacks.onNewCall) {
props.callbacks.onNewCall(call);
}
};
const onPlayLocalVideo = (stream) => {
// console.log('onPlayLocalVideo stream.toURL:', stream);
setLocalStream(stream);
setLocalStreamURL(stream.toURL());
const audioTrack = getAudioTrack(stream);
if (audioTrack) {
audioTrack.enabled = !props.isAudioOff;
}
const videoTrack = getVideoTrack(stream);
if (videoTrack) {
videoTrack.enabled = !props.isCameraOff;
}
if (props.callbacks.onPlayLocalVideo) {
props.callbacks.onPlayLocalVideo(stream);
}
};
const onPlayRemoteVideo = (stream) => {
// console.log('onPlayRemoteVideo stream.toURL:', stream.toURL());
setRemoteStreamURL(stream.toURL());
if (props.callbacks.onPlayRemoteVideo) {
props.callbacks.onPlayRemoteVideo(stream);
}
};
const onStreamReady = () => {
// console.log('onStreamReady:')
if (props.callbacks.onStreamReady) {
props.callbacks.onStreamReady();
}
};
//#endregion
//#region State Methods
const handleCallState = () => {
// console.log('handleCallState callState:', props.callState);
switch (props.callState) {
case 'call':
makeCall(props.callParams);
break;
case 'hangup':
hangUpCall();
break;
}
};
const handleAudioState = () => {
// console.log('handleAudioState props.isAudioOff:', props.isAudioOff);
muteAudio(props.isAudioOff);
};
const handleVideoState = () => {
// console.log('handleVideoState props.isCameraOff:', props.isCameraOff);
muteVideo(props.isCameraOff);
};
const setDefaultStates = () => {
if (!props.isToolboxVisible) {
props.isToolboxVisible = true;
}
if (!props.isAudioOff) {
props.isAudioOff = true;
}
if (!props.isCameraOff) {
props.isCameraOff = true;
}
};
const makeCall = (callParams) => {
// TODO Check is there any active call
const call = vertoClient.makeVideoCall(callParams);
setCall(call);
};
const hangUpCall = () => {
if (call && call.params && call.params.callID) {
vertoClient.hangup(call.params.callID);
}
};
const muteAudio = (mute) => {
const localAudioTrack = getAudioTrack(localStream);
if (localAudioTrack) {
localAudioTrack.enabled = !mute;
if (props.onAudioStateChanged) {
props.onAudioStateChanged({ mute });
}
}
};
const getAudioTrack = (stream) => {
return stream && stream.getAudioTracks() != null && stream.getAudioTracks()[0];
};
const getVideoTrack = (stream) => {
return stream && stream.getVideoTracks() != null && stream.getVideoTracks()[0];
};
const muteVideo = (mute) => {
const localVideoTrack = getVideoTrack(localStream);
if (localVideoTrack) {
localVideoTrack.enabled = !mute;
if (props.onVideoStateChanged) {
props.onVideoStateChanged({ mute });
}
}
};
const switchCamera = () => {
const localVideoTrack = localStream._tracks.find((t) => t.kind == 'video');
if (localVideoTrack) {
vertoClient.switchCamera(call.params.callID, localVideoTrack);
}
};
//#region UI Listener Methods
const callHandler = () => {
const callee = text || '1001';
const callParams = {
to: callee,
from: '1000',
callerName: 'Hi',
};
const call = vertoClient.makeVideoCall(callParams);
setCall(call);
};
const hangUpHandler = () => {
vertoClient.hangup(call.params.callID);
};
const logoutHandler = () => {
props.onLogoutClicked();
};
const cameraSwitchHandler = () => {
const localVideoTrack = localStream._tracks.find((t) => t.kind == 'video');
if (localVideoTrack) {
vertoClient.switchCamera(call.params.callID, localVideoTrack);
}
};
const audioSwitchHandler = () => {
const localAudioTrack = localStream && localStream._tracks && localStream._tracks.find((t) => t.kind == 'audio');
localAudioTrack.enabled = !localAudioTrack.enabled;
if (localAudioTrack.enabled) {
setAudioFileIndex(ToolboxImage_enum_1.ToolboxImage.Audio);
}
else {
setAudioFileIndex(ToolboxImage_enum_1.ToolboxImage.NoAudio);
}
};
const videoSwitchHandler = () => {
const localVideoTrack = localStream && localStream._tracks && localStream._tracks.find((t) => t.kind == 'video');
localVideoTrack.enabled = !localVideoTrack.enabled;
if (localVideoTrack.enabled) {
setVideoFileIndex(ToolboxImage_enum_1.ToolboxImage.Video);
}
else {
setVideoFileIndex(ToolboxImage_enum_1.ToolboxImage.NoVideo);
}
};
//#endregion
return (<react_native_1.View style={styles_1.default.container}>
{!isStreamStarted
? (<react_native_1.ActivityIndicator color={props.indicatorColor ? props.indicatorColor : 'black'} style={{ flex: 1, alignSelf: 'center', justifyContent: 'center' }}/>)
:
(<react_native_1.View style={{ flex: 1 }}>
{props.viewType == ViewType_enum_1.default.remote &&
<ViewContainer_1.default containerStyle={styles_1.default.streamContainer} objectFit={'cover'} streamURL={remoteStreamURL} viewStyle={styles_1.default.stream} isToolboxAvailable={true} isToolboxVisible={props.isToolboxVisible} audioFileIndex={audioFileIndex} videoFileIndex={videoFileIndex} audioSwitchHandler={audioSwitchHandler} hangupHandler={hangUpHandler} videoSwitchHandler={videoSwitchHandler}/>}
{props.viewType == ViewType_enum_1.default.local &&
<ViewContainer_1.default containerStyle={styles_1.default.streamContainer} objectFit={'cover'} streamURL={localStreamURL} viewStyle={styles_1.default.stream} isToolboxAvailable={true} isToolboxVisible={props.isToolboxVisible} audioFileIndex={audioFileIndex} videoFileIndex={videoFileIndex} audioSwitchHandler={audioSwitchHandler} hangupHandler={hangUpHandler} videoSwitchHandler={videoSwitchHandler}/>}
{props.viewType == ViewType_enum_1.default.both &&
<react_native_1.View style={{ flex: 1 }}>
<ViewContainer_1.default containerStyle={styles_1.default.remoteStreamContainer} objectFit={'cover'} streamURL={remoteStreamURL} viewStyle={styles_1.default.stream} isToolboxAvailable={true} isToolboxVisible={props.isToolboxVisible} audioFileIndex={audioFileIndex} videoFileIndex={videoFileIndex} audioSwitchHandler={audioSwitchHandler} hangupHandler={hangUpHandler} videoSwitchHandler={videoSwitchHandler}/>
<ViewContainer_1.default containerStyle={styles_1.default.localStreamContainer} objectFit={'contain'} streamURL={localStreamURL} viewStyle={styles_1.default.stream} isToolboxAvailable={false} isToolboxVisible={props.isToolboxVisible}/>
</react_native_1.View>}
</react_native_1.View>)}
</react_native_1.View>);
};
exports.default = VertoView;