diff --git a/app/app.js b/app/app.js index 35e7c83..1b5f457 100644 --- a/app/app.js +++ b/app/app.js @@ -1,1533 +1,1535 @@ import React, { Component, Fragment } from 'react'; import { View, SafeAreaView, ImageBackground, PermissionsAndroid, AppState, Linking, Platform, StyleSheet} from 'react-native'; import { DeviceEventEmitter } from 'react-native'; import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper'; import { BreadProvider } from "material-bread"; import { registerGlobals } from 'react-native-webrtc'; import { Router, Route, Link, Switch } from 'react-router-native'; import history from './history'; import Logger from "../Logger"; import DigestAuthRequest from 'digest-auth-request'; import autoBind from 'auto-bind'; import { firebase } from '@react-native-firebase/messaging'; import VoipPushNotification from 'react-native-voip-push-notification'; import uuid from 'react-native-uuid'; import { getUniqueId, getBundleId } from 'react-native-device-info'; import RNDrawOverlay from 'react-native-draw-overlay'; import PushNotificationIOS from "@react-native-community/push-notification-ios"; registerGlobals(); import * as sylkrtc from 'sylkrtc'; import InCallManager from 'react-native-incall-manager'; import RNCallKeep, { CONSTANTS as CK_CONSTANTS } from 'react-native-callkeep'; import RegisterBox from './components/RegisterBox'; import ReadyBox from './components/ReadyBox'; import Call from './components/Call'; import CallByUriBox from './components/CallByUriBox'; import Conference from './components/Conference'; import ConferenceByUriBox from './components/ConferenceByUriBox'; // import AudioPlayer from './components/AudioPlayer'; // import ErrorPanel from './components/ErrorPanel'; import FooterBox from './components/FooterBox'; import StatusBox from './components/StatusBox'; import IncomingCallModal from './components/IncomingCallModal'; import NotificationCenter from './components/NotificationCenter'; import LoadingScreen from './components/LoadingScreen'; import NavigationBar from './components/NavigationBar'; import Preview from './components/Preview'; import CallManager from "./CallManager"; import utils from './utils'; import config from './config'; import storage from './storage'; import styles from './assets/styles/blink/root.scss'; const backgroundImage = require('./assets/images/dark_linen.png'); const logger = new Logger("App"); function checkIosPermissions() { return new Promise(resolve => PushNotificationIOS.checkPermissions(resolve)); } const theme = { ...DefaultTheme, dark: true, roundness: 2, colors: { ...DefaultTheme.colors, primary: '#337ab7', // accent: '#f1c40f', }, }; let bundleId = `${getBundleId()}`; const deviceId = getUniqueId(); if (Platform.OS == 'ios') { bundleId = `${bundleId}.${__DEV__ ? 'dev' : 'prod'}`; // bundleId = `${bundleId}.dev`; } const callkeepOptions = { ios: { appName: 'Sylk', maximumCallGroups: 2, maximumCallsPerCallGroup: 10, supportsVideo: true, imageName: "Image-1" }, android: { alertTitle: 'Calling account permission', alertDescription: 'Please allow Sylk inside All calling accounts', cancelButton: 'Deny', okButton: 'Allow', imageName: 'phone_account_icon', additionalPermissions: [PermissionsAndroid.PERMISSIONS.CAMERA, PermissionsAndroid.PERMISSIONS.RECORD_AUDIO] } }; const mainStyle = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 10 }, TextStyle :{ fontSize : 20, color : '#000' } }); RNCallKeep.setup(callkeepOptions); // Application modes const MODE_NORMAL = Symbol('mode-normal'); const MODE_PRIVATE = Symbol('mode-private'); const MODE_GUEST_CALL = Symbol('mode-guest-call'); const MODE_GUEST_CONFERENCE = Symbol('mode-guest-conference'); class Sylk extends Component { constructor() { super(); autoBind(this) this._loaded = false; this._initialSstate = { accountId: '', password: '', displayName: '', account: null, registrationState: null, registrationKeepalive: false, inboundCall: null, currentCall: null, isConference: false, connection: null, showIncomingModal: false, showScreenSharingModal: false, status: null, targetUri: '', missedTargetUri: '', loading: null, mode: MODE_PRIVATE, localMedia: null, generatedVideoTrack: false, history: [], serverHistory: [], devices: {}, pushtoken: null, pushkittoken: null, speakerPhoneEnabled: null, OrientationStatus : '', Height_Layout : '', Width_Layout : '', }; this.state = Object.assign({}, this._initialSstate); this.__notificationCenter = null; this.participantsToInvite = null; this.redirectTo = null; this.prevPath = null; this.shouldUseHashRouting = false; this.muteIncoming = false; storage.initialize(); RNCallKeep.addEventListener('checkReachability', () => { RNCallKeep.setReachable(); }); this._callKeepManager = new CallManager(RNCallKeep, this.answerCall, this.rejectCall, this.hangupCall); if (InCallManager.recordPermission !== 'granted') { InCallManager.requestRecordPermission() .then((requestedRecordPermissionResult) => { console.log("InCallManager.requestRecordPermission() requestedRecordPermissionResult: ", requestedRecordPermissionResult); }) .catch((err) => { console.log("InCallManager.requestRecordPermission() catch: ", err); }); } // Load camera/mic preferences storage.get('devices').then((devices) => { if (devices) { this.setState({devices: devices}); } }); } get _notificationCenter() { // getter to lazy-load the NotificationCenter ref if (!this.__notificationCenter) { this.__notificationCenter = this.refs.notificationCenter; } return this.__notificationCenter; } _detectOrientation() { if(this.state.Width_Layout > this.state.Height_Layout) { console.log("Orientation is landcape") this.setState({ OrientationStatus : 'Landscape Mode' }); } else { console.log("Orientation is portrait") this.setState({ OrientationStatus : 'Portrait Mode' }); } } async componentDidMount() { this._loaded = true; try { await RNDrawOverlay.askForDispalayOverOtherAppsPermission(); await RNCallKeep.hasPhoneAccount(); } catch(err) { console.log('error'); } history.push('/login'); // prime the ref logger.debug('NotificationCenter ref: %o', this._notificationCenter); this._boundOnPushkitRegistered = this._onPushkitRegistered.bind(this); this._boundOnPushRegistered = this._onPushRegistered.bind(this); if (Platform.OS === 'android') { Linking.getInitialURL().then((url) => { if (url) { console.log('Initial url is: ' + url); } }).catch(err => { logger.error({ err }, 'Error getting initial URL'); }); firebase.messaging().getToken() .then(fcmToken => { if (fcmToken) { this._onPushRegistered(fcmToken); } }); } else if (Platform.OS === 'ios') { VoipPushNotification.addEventListener('register', this._boundOnPushkitRegistered); VoipPushNotification.registerVoipToken(); PushNotificationIOS.addEventListener('register', this._boundOnPushRegistered); //let permissions = await checkIosPermissions(); //if (!permissions.alert) { PushNotificationIOS.requestPermissions(); //} } this.boundRnStartAction = this._callkeepStartedCall.bind(this); this.boundRnDisplayIncomingCall = this._callkeepDisplayIncomingCall.bind(this); this.boundProximityDetect = this._proximityDetect.bind(this); RNCallKeep.addEventListener('didReceiveStartCallAction', this.boundRnStartAction); RNCallKeep.addEventListener('didDisplayIncomingCall', this.boundRnDisplayIncomingCall); DeviceEventEmitter.addListener('Proximity', this.boundProximityDetect); AppState.addEventListener('change', this._handleAppStateChange); if (Platform.OS === 'ios') { this._boundOnNotificationReceivedBackground = this._onNotificationReceivedBackground.bind(this); this._boundOnLocalNotificationReceivedBackground = this._onLocalNotificationReceivedBackground.bind(this); VoipPushNotification.addEventListener('notification', this._boundOnNotificationReceivedBackground); VoipPushNotification.addEventListener('localNotification', this._boundOnLocalNotificationReceivedBackground); } else if (Platform.OS === 'android') { firebase .messaging() .requestPermission() .then(() => { // User has authorised }) .catch(error => { // User has rejected permissions }); this.messageListener = firebase .messaging() .onMessage((message: RemoteMessage) => { // Process your message as required //on any message, register console.log('======================================'); console.log('Handle Firebase push notification', message.data.event); //logger.debug({message}, 'got a message from firebase'); }); } this._detectOrientation(); } _proximityDetect(data) { console.log('Proximity changed', data); } _callkeepDisplayIncomingCall(data) { console.log('Incoming alert panel displayed'); } _callkeepStartedCall(data) { logger.debug('accessing Call Object', this._tmpCallStartInfo, data); if (!this._tmpCallStartInfo && this.state.currentCall) { //this is likely when sopmeone presses video in callkit on an audio call :( return; } if (this._tmpCallStartInfo.options && this._tmpCallStartInfo.options.conference) { this.startConference(data.handle); } else if (this._tmpCallStartInfo.options) { this.startCall(data.handle, this._tmpCallStartInfo.options); } else { // we dont have options in the tmp var, which means this likely came from the native dialer // for now, we only do audio calls from the native dialer. this._tmpCallStartInfo = { uuid: data.callUUID }; this.startCall(data.handle, {audio: true, video: false}); } this._notificationCenter.removeNotification(); } _onPushkitRegistered(token) { console.log('set push token', token); this.setState({ pushkittoken: token }); } _onPushRegistered(token) { console.log('set push token', token); this.setState({ pushtoken: token }); } _sendPushToken() { console.log('send push token'); if (this.state.account && this.state.pushtoken) { let token = null; if (Platform.OS === 'ios') { token = `${this.state.pushkittoken}#${this.state.pushtoken}`; } else if (Platform.OS === 'android') { token = this.state.pushtoken; } this.state.account.setDeviceToken(token, Platform.OS, deviceId, true, bundleId); } } componentWillUnmount() { RNCallKeep.removeEventListener('didReceiveStartCallAction', this.boundRnStartAction); AppState.removeEventListener('change', this._handleAppStateChange); } _handleAppStateChange = nextAppState => { //TODO - stop if we havent been backgrounded because of becoming active from a push notification and then going background again // if (nextAppState.match(/background/)) { // logger.debug('app moving to background so we should stop the client sylk client if we dont have an active call'); // if (this._callKeepManager.count === 0) { // logger.debug('callmanager count is 0 so closing connection'); // this.state.connection.close(); // } // } if (nextAppState === 'active') { if (this._callKeepManager.count === 0 && this.state.connection) { this.state.connection.reconnect(); } } } connectionStateChanged(oldState, newState) { console.log('Websocket connection state changed: ', oldState, ' ->' , newState); switch (newState) { case 'closed': this.setState({connection: null, loading: null}); this._notificationCenter.postSystemNotification('Connection failed', {body: '', timeout: 5000}); break; case 'ready': this._notificationCenter.postSystemNotification('Connected to server', {body: '', timeout: 3}); this.processRegistration(this.state.accountId, this.state.password, this.state.displayName); break; case 'disconnected': if (this.state.localMedia) { sylkrtc.utils.closeMediaStream(this.state.localMedia); } if (this.state.currentCall || this.state.inboundCall) { InCallManager.stop({busytone: '_BUNDLE_'}); this.callKeepHangupCall(); history.push('/ready'); } this.setState({ registrationState: 'failed', currentCall: null, inboundCall: null, localMedia: null, generatedVideoTrack: false, showIncomingModal: false }); // this._notificationCenter.postSystemNotification('Connecting to server...', {body: '', timeout: 5000}); break; default: if (this.state.registrationKeepalive !== true) { this.setState({loading: 'Connecting...'}); } break; } } notificationCenter() { return this._notificationCenter; } registrationStateChanged(oldState, newState, data) { logger.debug('Registration state changed! ', oldState, newState, data); this.setState({registrationState: newState}); if (newState === 'failed') { RNCallKeep.setAvailable(false); let reason = data.reason; if (reason.match(/904/)) { // Sofia SIP: WAT reason = 'Bad account or password'; } else { reason = 'Connection failed'; } this.setState({ loading : null, status : { msg : 'Sign In failed: ' + reason, level : 'danger' } }); if (this.state.registrationKeepalive === true) { if (this.state.connection !== null) { logger.debug('Retry to register...'); //this.setState({loading: 'Register...'}); this._notificationCenter.postSystemNotification('Registering', {body: 'now', timeout: 10000}); this.state.account.register(); } else { // add a timer to retry register after awhile logger.debug('Retry to register after a delay...'); setTimeout(this.state.account.register(), 5000); } } } else if (newState === 'registered') { this.getServerHistory(); RNCallKeep.setAvailable(true); this.setState({loading: null, registrationKeepalive: true, registrationState: 'registered'}); history.push('/ready'); this._notificationCenter.postSystemNotification('Ready to receive calls', {body: '', timeout: 1}); return; } else { this.setState({status: null }); RNCallKeep.setAvailable(false); } } callStateChanged(oldState, newState, data) { if (!this.state.currentCall) { return; } callUUID = this.state.currentCall._callkeepUUID; console.log('Call UUID ' + callUUID + ' state changed: ' + oldState + ' -> ' + newState); switch (newState) { case 'progress': InCallManager.startRingback('_BUNDLE_'); break; case 'established': case 'accepted': InCallManager.stopRingback(); this.setState({speakerPhoneEnabled: false}); this._callKeepManager.setCurrentCallActive(callUUID); if (this.state.isConference) { console.log('Conference call started'); this._callKeepManager.backToForeground(); this.setState({speakerPhoneEnabled: true}); } else if (this.state.currentCall.remoteMediaDirections) { const videoTracks = this.state.currentCall.remoteMediaDirections.video; if (videoTracks && videoTracks.length > 0) { console.log('Video call started') this._callKeepManager.backToForeground(); this.setState({speakerPhoneEnabled: true}); } } console.log('Speakerphone', this.state.speakerPhoneEnabled); break; case 'terminated': let callSuccesfull = false; let reason = data.reason; let play_busy_tone = true; let CALLKEEP_REASON; console.log('Call UUID ' + callUUID + ' terminated reason: ' + reason); if (!reason || reason.match(/200/)) { if (oldState == 'progress') { reason = 'Cancelled'; play_busy_tone = false; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED; } else { reason = 'Hangup'; callSuccesfull = true; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED; } } else if (reason.match(/403/)) { reason = 'This domain is not served here'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (reason.match(/404/)) { reason = 'User not found'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (reason.match(/408/)) { reason = 'Timeout'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (reason.match(/480/)) { reason = 'User not online'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED; } else if (reason.match(/486/) || reason.match(/60[036]/)) { reason = 'Busy'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED; } else if (reason.match(/487/)) { reason = 'Cancelled'; play_busy_tone = false; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.MISSED; } else if (reason.match(/488/)) { reason = 'Unacceptable media'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (reason.match(/5\d\d/)) { reason = 'Server failure'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (reason.match(/904/)) { // Sofia SIP: WAT reason = 'Bad account or password'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else { reason = 'Connection failed'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } if (play_busy_tone) { InCallManager.stop({busytone: '_BUNDLE_'}); } else { InCallManager.stop(); } this._callKeepManager.reportEndCallWithUUID(callUUID, CALLKEEP_REASON); console.log('Call UUID ' + callUUID + ' terminated because ' + reason); let sessionId = this._callKeepManager._UUIDtosessionIDMap.has(callUUID) && this._callKeepManager._UUIDtosessionIDMap.get(callUUID); if (sessionId) { console.log('Call session-id ' + sessionId + ' terminated because ' + reason); this._callKeepManager.reportEndCallWithUUID(sessionId, CALLKEEP_REASON); this._callKeepManager._sessionIDtoUUIDMap.delete(sessionId); this._callKeepManager._sessionIDtocallIdMap.delete(sessionId); this._callKeepManager._UUIDtosessionIDMap.delete(callUUID); } this._callKeepManager.remove(); + InCallManager.setForceSpeakerphoneOn(false); if (play_busy_tone) { this._notificationCenter.postSystemNotification('Call ended:', {body: reason, timeout: callSuccesfull ? 5 : 10}); } this.setState({ currentCall : null, targetUri : callSuccesfull || config.useServerCallHistory ? '' : this.state.targetUri, showIncomingModal : false, inboundCall : null, isConference : false, localMedia : null, generatedVideoTrack : false }); this.setFocusEvents(false); this.participantsToInvite = null; history.push('/ready'); setTimeout(() => { this.getServerHistory(); }, 3000); break; default: break; } } // inboundCallStateChanged(oldState, newState, data) { // logger.debug('Inbound call state changed! ' + newState); // if (newState === 'terminated') { // this.setState({ inboundCall: null, showIncomingModal: false }); // this.setFocusEvents(false); // } // } handleCallByUri(displayName, targetUri) { const accountId = `${utils.generateUniqueId()}@${config.defaultGuestDomain}`; this.setState({ accountId : accountId, password : '', displayName : displayName, //mode : MODE_GUEST_CALL, targetUri : utils.normalizeUri(targetUri, config.defaultDomain), loading : 'Connecting...' }); if (this.state.connection === null) { let connection = sylkrtc.createConnection({server: config.wsServer}); connection.on('stateChanged', this.connectionStateChanged); this.setState({connection: connection}); } } handleConferenceByUri(displayName, targetUri) { const accountId = `${utils.generateUniqueId()}@${config.defaultGuestDomain}`; this.setState({ accountId : accountId, password : '', displayName : displayName, //mode : MODE_GUEST_CONFERENCE, targetUri : targetUri, loading : 'Connecting...' }); if (this.state.connection === null) { let connection = sylkrtc.createConnection({server: config.wsServer}); connection.on('stateChanged', this.connectionStateChanged); this.setState({connection: connection}); } } handleRegistration(accountId, password, remember) { this.setState({ accountId : accountId, password : password, mode : remember ? MODE_NORMAL : MODE_PRIVATE, loading : 'Connecting...' }); if (this.state.connection === null) { let connection = sylkrtc.createConnection({server: config.wsServer}); connection.on('stateChanged', this.connectionStateChanged); this.setState({connection: connection}); } else { console.log('Websocket connection active, try to register'); this.processRegistration(accountId, password, ''); } } processRegistration(accountId, password, displayName) { if (this.state.account !== null) { logger.debug('We already have an account, removing it'); this.state.connection.removeAccount(this.state.account, (error) => { if (error) { logger.debug(error); } this.setState({registrationState: null, registrationKeepalive: false}); } ); } const options = { account: accountId, password: password, displayName: displayName }; const account = this.state.connection.addAccount(options, (error, account) => { if (!error) { account.on('outgoingCall', this.outgoingCall); account.on('conferenceCall', this.outgoingCall); switch (this.state.mode) { case MODE_PRIVATE: case MODE_NORMAL: account.on('registrationStateChanged', this.registrationStateChanged); account.on('incomingCall', this.incomingCall); account.on('missedCall', this.missedCall); account.on('conferenceInvite', this.conferenceInvite); this.setState({account: account}); this._sendPushToken(); account.register(); logger.debug(this.state.mode); if (this.state.mode !== MODE_PRIVATE) { storage.set('account', { accountId: this.state.accountId, password: this.state.password }); } else { // Wipe storage if private login //storage.remove('account'); // lets try this out // history.clear().then(() => { // this.setState({history: []}); // }); } break; case MODE_GUEST_CALL: this.setState({account: account, loading: null, registrationState: 'registered'}); logger.debug(`${accountId} (guest) signed in`); // Start the call immediately, this is call started with "Call by URI" this.startGuestCall(this.state.targetUri, {audio: true, video: true}); break; case MODE_GUEST_CONFERENCE: this.setState({account: account, loading: null, registrationState: 'registered'}); logger.debug(`${accountId} (conference guest) signed in`); // Start the call immediately, this is call started with "Conference by URI" this.startGuestConference(this.state.targetUri); break; default: logger.debug(`Unknown mode: ${this.state.mode}`); break; } } else { logger.debug('Add account error: ' + error); this.setState({loading: null, status: {msg: error.message, level:'danger'}}); } }); } setDevice(device) { const oldDevices = Object.assign({}, this.state.devices); if (device.kind === 'videoinput') { oldDevices['camera'] = device; } else if (device.kind === 'audioinput') { oldDevices['mic'] = device; } this.setState({devices: oldDevices}); storage.set('devices', oldDevices); sylkrtc.utils.closeMediaStream(this.state.localMedia); this.getLocalMedia(); } getLocalMedia(mediaConstraints={audio: true, video: true}, nextRoute=null) { // eslint-disable-line space-infix-ops logger.debug('getLocalMedia(), mediaConstraints=%o', mediaConstraints); const constraints = Object.assign({}, mediaConstraints); if (constraints.video === true) { if ((nextRoute === '/conference' || this.state.mode === MODE_GUEST_CONFERENCE)) { constraints.video = { 'width': { 'ideal': 640 }, 'height': { 'ideal': 480 } }; // TODO: remove this, workaround so at least safari works when joining a video conference } else if ((nextRoute === '/conference' || this.state.mode === MODE_GUEST_CONFERENCE) && isSafari) { constraints.video = false; } else { // ask for 720p video constraints.video = { 'width': { 'ideal': 1280 }, 'height': { 'ideal': 720 } }; } } logger.debug('getLocalMedia(), (modified) mediaConstraints=%o', constraints); navigator.mediaDevices.enumerateDevices() .then((devices) => { devices.forEach((device) => { if ('video' in constraints && 'camera' in this.state.devices) { if (constraints.video !== false && (device.deviceId === this.state.devices.camera.deviceId || device.label === this.state.devices.camera.label)) { constraints.video.deviceId = { exact: device.deviceId }; } } if ('mic' in this.state.devices) { if (device.deviceId === this.state.devices.mic.deviceId || device.label === this.state.devices.mic.Label) { // constraints.audio = { // deviceId: { // exact: device.deviceId // } // }; } } }); }) .catch((error) => { logger.debug('Device enumeration failed: %o', error); }) .then(() => { return navigator.mediaDevices.getUserMedia(constraints) }) .then((localStream) => { clearTimeout(this.loadScreenTimer); logger.debug('Got local Media', localStream); this.setState({status: null, loading: null, localMedia: localStream}); if (nextRoute !== null) { history.push(nextRoute); } }) .catch((error) => { logger.debug('Access failed, trying audio only: %o', error); navigator.mediaDevices.getUserMedia({ audio: true, video: false }) .then((localStream) => { clearTimeout(this.loadScreenTimer); if (nextRoute != '/preview') { logger.debug('Audio only media, but video was requested, creating generated video track'); const generatedVideoTrack = utils.generateVideoTrack(localStream); localStream.addTrack(generatedVideoTrack); } this.setState({status: null, loading: null, localMedia: localStream, generatedVideoTrack: true}); if (nextRoute !== null) { history.push(nextRoute); } }) .catch((error) => { logger.debug('Access to local media failed: %o', error); clearTimeout(this.loadScreenTimer); this._notificationCenter.postSystemNotification("Can't access camera or microphone", {timeout: 10}); this.setState({ loading: null }); }); }); } callKeepStartCall(targetUri, options) { this._tmpCallStartInfo = { uuid: uuid.v4(), options, }; logger.debug('Callkeep start call to %s with options %s', targetUri, this._tmpCallStartInfo); if (Platform.OS === 'ios') { this._callKeepManager.startCall(this._tmpCallStartInfo.uuid, targetUri, targetUri, 'email', options.video ? true : false); } else if (Platform.OS === 'android') { this._callKeepManager.startCall(this._tmpCallStartInfo.uuid, targetUri, targetUri); } } startCall(targetUri, options) { this.setState({targetUri: targetUri}); this.addCallHistoryEntry(targetUri); this.getLocalMedia(Object.assign({audio: true, video: true}, options), '/call'); } startGuestCall(targetUri, options) { this.setState({targetUri: targetUri}); this.getLocalMedia(Object.assign({audio: true, video: true}, this._tmpCallStartInfo.options)); } callKeepAnswerCall(options) { console.log('CallKeep answer call'); if (this.state.currentCall) { this._callKeepManager.answerIncomingCall(this.state.currentCall._callkeepUUID); } this.answerCall(options); } answerCall(options) { console.log('Answer call'); this.setState({showIncomingModal: false }); this.setFocusEvents(false); if (this.state.inboundCall !== this.state.currentCall) { // terminate current call to switch to incoming one // this.state.inboundCall.removeListener('stateChanged', this.inboundCallStateChanged); this.state.currentCall.removeListener('stateChanged', this.callStateChanged); //this.state.currentCall.terminate(); this._callKeepManager.endCall(this.state.currentCall._callkeepUUID); this.setState({currentCall: this.state.inboundCall, inboundCall: this.state.inboundCall, localMedia: null}); this.state.inboundCall.on('stateChanged', this.callStateChanged); } this.getLocalMedia(Object.assign({audio: true, video: true}, options), '/call'); this.forceUpdate(); } callKeepRejectCall() { if (this.state.currentCall) { this._callKeepManager.rejectCall(this.state.currentCall._callkeepUUID); } this.rejectCall(); } rejectCall() { console.log('Reject call'); this.setState({showIncomingModal: false}); this.state.inboundCall.terminate(); this.forceUpdate(); } callKeepHangupCall() { if (this.state.currentCall) { this._callKeepManager.endCall(this.state.currentCall._callkeepUUID); } this.hangupCall(); } hangupCall() { console.log('Hangup call'); if (this.state.currentCall != null) { this.state.currentCall.terminate(); console.log('Sylkrtc terminate call'); } else { // We have no call but we still want to cancel if (this.state.localMedia != null) { sylkrtc.utils.closeMediaStream(this.state.localMedia); console.log('Sylkrtc close media'); } history.push('/ready'); } this.forceUpdate(); } callKeepSendDtmf(digits) { console.log('Send DTMF', digits); if (this.state.currentCall) { this._callKeepManager.sendDTMF(this.state.currentCall._callkeepUUID, digits); } } callKeepToggleMute(mute) { console.log('Toggle mute %s', mute); if (this.state.currentCall) { this._callKeepManager.setMutedCall(this.state.currentCall._callkeepUUID, mute); } } toggleSpeakerPhone() { let mode = null; - if (this.state.speakerPhoneEnabled === null || this.state.speakerPhoneEnabled === true) { + if (this.state.speakerPhoneEnabled === true) { mode = false; } else { mode = true; } - logger.debug('Toggle speakerphone %s', mode); - InCallManager.setForceSpeakerphoneOn(mode); - this.setState({ speakerPhoneEnabled: mode }); + + console.log('Speakerphone is ', mode ? 'on' : 'off'); + InCallManager.setForceSpeakerphoneOn(mode); + } escalateToConference(participants) { this.state.currentCall.removeListener('stateChanged', this.callStateChanged); this.state.currentCall.terminate(); history.push('/ready'); this.setState({currentCall: null, localMedia: null}); this.participantsToInvite = participants; const uri = `${utils.generateSillyName()}@${config.defaultConferenceDomain}`; this.callKeepStartCall(uri, { conference: true }); } startConference(targetUri) { console.log('New outgoing conference to room', targetUri); this.setState({targetUri: targetUri, isConference: true}); this.getLocalMedia({audio: true, video: true}, '/conference'); } startGuestConference(targetUri) { this.setState({targetUri: targetUri}); this.getLocalMedia({audio: true, video: true}); } toggleMute() { this.muteIncoming = !this.muteIncoming; } outgoingCall(call) { console.log('New outgoing call to', call.remoteIdentity.uri); this._callKeepManager.handleSession(call, this._tmpCallStartInfo.uuid); InCallManager.start({media: this._tmpCallStartInfo.options && this._tmpCallStartInfo.options.video ? 'video' : 'audio'}); this._tmpCallStartInfo = {}; call.on('stateChanged', this.callStateChanged); this.setState({currentCall: call}); //this._callKeepManager.updateDisplay(call._callkeepUUID, call.remoteIdentity.displayName, call.remoteIdentity.uri); } _onLocalNotificationReceivedBackground(notification) { let notificationContent = notification.getData(); console.log('======================================'); console.log('Handle local notify for', Platform.OS, 'mobile push notification: ', notificationContent); } _onNotificationReceivedBackground(notification) { let notificationContent = notification.getData(); console.log('======================================'); console.log('Handle notify for', Platform.OS, 'mobile push notification: ', notificationContent); // get the uuid from the notification // have we already got a waiting call in call manager? if we do, then its been "answered" and we're waiting for the invite // we may still never get the invite if theres network issues... so still need a timeout // no waiting call, so that means its still "ringing" (it may have been cancelled) so set a timer and if we havent recieved // an invite within 10 seconds then clear it down let callUUID = null; let callId = notificationContent['call-id']; let sessionId = notificationContent['session-id']; this._callKeepManager._sessionIDtoUUIDMap.set(sessionId, callId); this._callKeepManager._callIdtosessionIDMap.set(callId, sessionId); let incomingCallUUID = this._callKeepManager._callIdtoUUIDMap.has(callId) && this._callKeepManager._callIdtoUUIDMap.get(callId); if (incomingCallUUID) { // websocket invite arrived first console.log('Push arrived after web socket received call-id', callId, 'with UUID', incomingCallUUID); callUUID = incomingCallUUID; this._callKeepManager._UUIDtosessionIDMap.set(incomingCallUUID, sessionId); this._callKeepManager._sessionIDtoUUIDMap.set(sessionId, incomingCallUUID); } else { callUUID = sessionId; console.log('Push arrived before the invite over web socket, using UUID from session-id', callUUID); this._callKeepManager.handleSessionLater(callUUID, notificationContent); } if (VoipPushNotification.wakeupByPush) { console.log('We wake up by push'); VoipPushNotification.wakeupByPush = false; } /* if (notificationContent['event'] === 'incoming_session') { VoipPushNotification.presentLocalNotification({ alertBody:'Incoming ' + notificationContent['media-type'] + ' call from ' + notificationContent['from_display_name'] }); } else if (notificationContent['event'] === 'cancel') { VoipPushNotification.presentLocalNotification({ alertBody:'Call cancelled' }); } */ VoipPushNotification.onVoipNotificationCompleted(callUUID); } incomingCall(call, mediaTypes) { if (!mediaTypes.audio && !mediaTypes.video) { console.log('Call rejected because unsupported media', mediaTypes); this.callKeepHangupCall(); return; } let media_type = mediaTypes.video ? 'video' : 'audio'; console.log('New', media_type, 'incoming call from', call.remoteIdentity['_displayName'], call.remoteIdentity['_uri']); this._callKeepManager.handleSession(call); call.mediaTypes = mediaTypes; if (this.state.currentCall !== null) { console.log('We have a call in progress'); // TODO - handle this } InCallManager.start({media: media_type}); console.log('Show alert panel'); if (Platform.OS === 'ios') { RNCallKeep.displayIncomingCall(call._callkeepUUID, call.remoteIdentity.uri, call.remoteIdentity.displayName, 'email', mediaTypes.video); } else if (Platform.OS === 'android') { RNCallKeep.displayIncomingCall(call._callkeepUUID, call.remoteIdentity.uri, call.remoteIdentity.displayName); } this.setFocusEvents(true); call.on('stateChanged', this.callStateChanged); // showIncomingModal must be true if not using CallKeep this.setState({currentCall: call, inboundCall: call, showIncomingModal: false}); // if (!this.shouldUseHashRouting) { // this._notificationCenter.postSystemNotification('Incoming call', {body: `From ${call.remoteIdentity.displayName || call.remoteIdentity.uri}`, timeout: 15, silent: false}); // } } setFocusEvents(enabled) { // if (this.shouldUseHashRouting) { // const remote = window.require('electron').remote; // if (enabled) { // const currentWindow = remote.getCurrentWindow(); // currentWindow.on('focus', this.hasFocus); // currentWindow.on('blur', this.hasNoFocus); // this.setState({haveFocus: currentWindow.isFocused()}); // } else { // const currentWindow = remote.getCurrentWindow(); // currentWindow.removeListener('focus', this.hasFocus); // currentWindow.removeListener('blur', this.hasNoFocus); // } // } } // hasFocus() { // this.setState({haveFocus: true}); // } // hasNoFocus() { // this.setState({haveFocus: false}); // } missedCall(data) { console.log('Missed call from ' + data.originator); this._notificationCenter.postSystemNotification('Missed call', {body: `from ${data.originator.display_name}`, timeout: 180, silent: false}); if (this.state.currentCall !== null || !config.useServerCallHistory) { this._notificationCenter.postMissedCall(data.originator, () => { if (this.state.currentCall !== null) { logger.debug('Hangup call'); this.state.currentCall.removeListener('stateChanged', this.callStateChanged); this.state.currentCall.terminate(); this.callKeepHangupCall(); this.setState({currentCall: null, missedTargetUri: data.originator.uri, showIncomingModal: false, localMedia: null}); } else { this.setState({missedTargetUri: data.originator.uri}); } history.push('/ready'); }); } } conferenceInvite(data) { console.log('Conference invite from %o to %s', data.originator, data.room); this._notificationCenter.postSystemNotification('Conference invite', {body: `From ${data.originator.displayName || data.originator.uri} for room ${data.room}`, timeout: 15, silent: false}); this._notificationCenter.postConferenceInvite(data.originator, data.room, () => { if (this.state.currentCall !== null) { this.state.currentCall.removeListener('stateChanged', this.callStateChanged); this.state.currentCall.terminate(); this.setState({currentCall: null, showIncomingModal: false, localMedia: null, generatedVideoTrack: false}); } this.callKeepStartCall(data.room, {conference: true}); }); } startPreview() { this.getLocalMedia({audio: true, video: true}, '/preview'); } addCallHistoryEntry(uri) { if (this.state.mode === MODE_NORMAL) { // history.add(uri).then((entries) => { // this.setState({history: entries}); // }); } else { let entries = this.state.history.slice(); if (entries.length !== 0) { const idx = entries.indexOf(uri); if (idx !== -1) { entries.splice(idx, 1); } entries.unshift(uri); // keep just the last 50 entries = entries.slice(0, 50); } else { entries = [uri]; } this.setState({history: entries}); } } getServerHistory() { if (!config.useServerCallHistory) { return; } if (!this.state.account) { return; } console.log('Requesting call history from server'); let getServerCallHistory = new DigestAuthRequest( 'GET', `${config.serverCallHistoryUrl}?action=get_history&realm=${this.state.account.id.split('@')[1]}`, this.state.account.id.split('@')[0], this.state.password ); // Disable logging getServerCallHistory.loggingOn = false; getServerCallHistory.request((data) => { if (data.success !== undefined && data.success === false) { logger.debug('Error getting call history from server: %o', data.error_message) return; } let history = []; if (data.placed) { data.placed.map(elem => {elem.direction = 'placed'; return elem}); } if (data.received) { data.received.map(elem => {elem.direction = 'received'; return elem}); } history = data.placed; if (data.received && history) { history = history.concat(data.received); } if (history) { history.sort((a,b) => { return new Date(b.startTime) - new Date(a.startTime); }); const known = []; history = history.filter((elem) => { if (known.indexOf(elem.remoteParty) <= -1) { if ((elem.media.indexOf('audio') > -1 || elem.media.indexOf('video') > -1) && (elem.remoteParty !== this.state.account.id || elem.direction !== 'placed')) { known.push(elem.remoteParty); return elem; } } }); this.setState({serverHistory: history}); } }, (errorCode) => { logger.debug('Error getting call history from server: %o', errorCode) }); } // checkRoute(nextPath, navigation, match) { // if (nextPath !== this.prevPath) { // logger.debug(`Transition from ${this.prevPath} to ${nextPath}`); // // // Press back in ready after a login, prevent initial navigation // // don't deny if there is no registrationState (connection fail) // if (this.prevPath === '/ready' && nextPath === '/login' && this.state.registrationState !== null) { // logger.debug('Transition denied redirecting to /logout'); // history.push('/logout'); // return false; // // Press back in ready after a call // } else if ((nextPath === '/call' || nextPath === '/conference') && this.state.localMedia === null && this.state.registrationState === 'registered') { // return false; // // Press back from within a call/conference, don't navigate terminate the call and // // let termination take care of navigating // } else if (nextPath === '/ready' && this.state.registrationState === 'registered' && this.state.currentCall !== null) { // this.state.currentCall.terminate(); // return false; // // Guest call ended, needed to logout and display msg and logout // } else if (nextPath === '/ready' && (this.state.mode === MODE_GUEST_CALL || this.state.mode === MODE_GUEST_CONFERENCE)) { // history.push('/logout'); // this.forceUpdate(); // } // } // this.prevPath = nextPath; // } render() { let footerBox = ; let extraStyles = {}; if (this.state.localMedia || this.state.registrationState === 'registered') { footerBox = null; } return ( this.setState({ Width_Layout : event.nativeEvent.layout.width, Height_Layout : event.nativeEvent.layout.height }, ()=> this._detectOrientation())}> {} {/* */} {/* */} {/* */} ); } notFound(match) { const status = { title : '404', message : 'Oops, the page your looking for can\'t found', level : 'danger', width : 'large' } return ( ); } ready() { return ( ); } preview() { return ( ); } call() { return ( ) } callByUri(urlParameters) { // check if the uri contains a domain if (urlParameters.targetUri.indexOf('@') === -1) { const status = { title : 'Invalid user', message : `Oops, the domain of the user is not set in '${urlParameters.targetUri}'`, level : 'danger', width : 'large' } return ( ); } return ( ); } conference() { return ( ) } conferenceByUri(urlParameters) { const targetUri = utils.normalizeUri(urlParameters.targetUri, config.defaultConferenceDomain); const idx = targetUri.indexOf('@'); const uri = {}; const pattern = /^[A-Za-z0-9\-\_]+$/g; uri.user = targetUri.substring(0, idx); // check if the uri.user is valid if (!pattern.test(uri.user)) { const status = { title : 'Invalid conference', message : `Oops, the conference ID is invalid: ${targetUri}`, level : 'danger', width : 'large' } return ( ); } return ( ); } login() { let registerBox; let statusBox; if (this.state.status !== null) { statusBox = ( ); } if (this.state.registrationState !== 'registered') { registerBox = ( ); } return ( {registerBox} {statusBox} ); } logout() { if (this.state.registrationState !== null && (this.state.mode === MODE_NORMAL || this.state.mode === MODE_PRIVATE)) { this.state.account.unregister(); } if (this.state.account !== null) { this.state.connection.removeAccount(this.state.account, (error) => { if (error) { logger.debug(error); } }); } storage.set('account', {accountId: this.state.accountId, password: ''}); this.setState({account: null, registrationState: null, status: null}); history.push('/login'); return null; } main() { return null; } } export default Sylk; diff --git a/app/components/AudioCallBox.js b/app/components/AudioCallBox.js index 10ba0fe..36d27bc 100644 --- a/app/components/AudioCallBox.js +++ b/app/components/AudioCallBox.js @@ -1,216 +1,216 @@ import React, { Component } from 'react'; import { View } from 'react-native'; import { IconButton } from 'react-native-paper'; import PropTypes from 'prop-types'; import autoBind from 'auto-bind'; import Logger from "../../Logger"; import CallOverlay from './CallOverlay'; import DTMFModal from './DTMFModal'; import EscalateConferenceModal from './EscalateConferenceModal'; import UserIcon from './UserIcon'; import styles from '../assets/styles/blink/_AudioCallBox.scss'; const logger = new Logger("AudioCallBox"); class AudioCallBox extends Component { constructor(props) { super(props); autoBind(this); this.state = { active : false, audioMuted : false, showDtmfModal : false, showEscalateConferenceModal : false }; // this.speechEvents = null; this.remoteAudio = React.createRef(); } componentDidMount() { // This component is used both for as 'local media' and as the in-call component. // Thus, if the call is not null it means we are beyond the 'local media' phase // so don't call the mediaPlaying prop. if (this.props.call != null) { switch (this.props.call.state) { case 'established': this.attachStream(this.props.call); break; case 'incoming': this.props.mediaPlaying(); // fall through default: this.props.call.on('stateChanged', this.callStateChanged); break; } } else { this.props.mediaPlaying(); } } componentWillReceiveProps(nextProps) { if (this.props.call == null && nextProps.call) { if (nextProps.call.state === 'established') { this.attachStream(nextProps.call); } else { nextProps.call.on('stateChanged', this.callStateChanged); } } } componentWillUnmount() { clearTimeout(this.callTimer); // if (this.speechEvents !== null) { // this.speechEvents.stop(); // this.speechEvents = null; // } } callStateChanged(oldState, newState, data) { if (newState === 'established') { this.attachStream(this.props.call); } } attachStream(call) { this.setState({stream: call.getRemoteStreams()[0]}); //we dont use it anywhere though as audio gets automatically piped // const options = { // interval: 225, // play: false // }; // this.speechEvents = hark(remoteStream, options); // this.speechEvents.on('speaking', () => { // this.setState({active: true}); // }); // this.speechEvents.on('stopped_speaking', () => { // this.setState({active: false}); // }); } escalateToConference(participants) { this.props.escalateToConference(participants); } hangupCall(event) { event.preventDefault(); this.props.hangupCall(); } muteAudio(event) { event.preventDefault(); //const localStream = this.props.call.getLocalStreams()[0]; if(this.state.audioMuted) { logger.debug('Unmute microphone'); this.props.callKeepToggleMute(false); //localStream.getAudioTracks()[0].enabled = true; this.setState({audioMuted: false}); } else { logger.debug('Mute microphone'); //localStream.getAudioTracks()[0].enabled = false; this.props.callKeepToggleMute(true); this.setState({audioMuted: true}); } } showDtmfModal() { this.setState({showDtmfModal: true}); } hideDtmfModal() { this.setState({showDtmfModal: false}); } toggleEscalateConferenceModal() { this.setState({ showEscalateConferenceModal: !this.state.showEscalateConferenceModal }); } render() { let remoteIdentity; if (this.props.call !== null) { remoteIdentity = this.props.call.remoteIdentity; } else { remoteIdentity = {uri: this.props.remoteIdentity}; } return ( ); } } AudioCallBox.propTypes = { call : PropTypes.object, escalateToConference : PropTypes.func, hangupCall : PropTypes.func, mediaPlaying : PropTypes.func, remoteIdentity : PropTypes.string, callKeepSendDtmf : PropTypes.func, callKeepToggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, speakerPhoneEnabled : PropTypes.bool }; export default AudioCallBox; diff --git a/app/components/ConferenceBox.js b/app/components/ConferenceBox.js index 80baa7f..3564b8d 100644 --- a/app/components/ConferenceBox.js +++ b/app/components/ConferenceBox.js @@ -1,694 +1,694 @@ 'use strict'; import React, {Component, Fragment} from 'react'; import { View } from 'react-native'; import PropTypes from 'prop-types'; import * as sylkrtc from 'sylkrtc'; import classNames from 'classnames'; import debug from 'react-native-debug'; import superagent from 'superagent'; import autoBind from 'auto-bind'; import { RTCView } from 'react-native-webrtc'; import { IconButton, Appbar, Portal, Modal, Surface, Paragraph } from 'react-native-paper'; import config from '../config'; import utils from '../utils'; //import AudioPlayer from './AudioPlayer'; import ConferenceDrawer from './ConferenceDrawer'; import ConferenceDrawerLog from './ConferenceDrawerLog'; // import ConferenceDrawerFiles from './ConferenceDrawerFiles'; import ConferenceDrawerParticipant from './ConferenceDrawerParticipant'; import ConferenceDrawerParticipantList from './ConferenceDrawerParticipantList'; import ConferenceDrawerSpeakerSelection from './ConferenceDrawerSpeakerSelection'; import ConferenceHeader from './ConferenceHeader'; import ConferenceCarousel from './ConferenceCarousel'; import ConferenceParticipant from './ConferenceParticipant'; import ConferenceMatrixParticipant from './ConferenceMatrixParticipant'; import ConferenceParticipantSelf from './ConferenceParticipantSelf'; import InviteParticipantsModal from './InviteParticipantsModal'; import styles from '../assets/styles/blink/_ConferenceBox.scss'; const DEBUG = debug('blinkrtc:ConferenceBox'); debug.enable('*'); class ConferenceBox extends Component { constructor(props) { super(props); autoBind(this); this.state = { callOverlayVisible: true, audioMuted: false, videoMuted: false, participants: props.call.participants.slice(), showInviteModal: false, showDrawer: false, showFiles: false, shareOverlayVisible: false, activeSpeakers: props.call.activeParticipants.slice(), selfDisplayedLarge: false, eventLog: [], sharedFiles: props.call.sharedFiles.slice(), largeVideoStream: null }; const friendlyName = this.props.remoteIdentity.split('@')[0]; //if (window.location.origin.startsWith('file://')) { this.callUrl = `${config.publicUrl}/conference/${friendlyName}`; //} else { // this.callUrl = `${window.location.origin}/conference/${friendlyName}`; //} const emailMessage = `You can join me in the conference using a Web browser at ${this.callUrl} ` + 'or by using the freely available Sylk WebRTC client app at http://sylkserver.com'; const subject = 'Join me, maybe?'; this.emailLink = `mailto:?subject=${encodeURI(subject)}&body=${encodeURI(emailMessage)}`; this.overlayTimer = null; this.logEvent = {}; this.haveVideo = false; this.uploads = []; [ 'error', 'warning', 'info', 'debug' ].forEach((level) => { this.logEvent[level] = ( (action, messages, originator) => { const log = this.state.eventLog.slice(); log.unshift({originator, originator, level: level, action: action, messages: messages}); this.setState({eventLog: log}); } ); }); } componentDidMount() { for (let p of this.state.participants) { p.on('stateChanged', this.onParticipantStateChanged); p.attach(); } this.props.call.on('participantJoined', this.onParticipantJoined); this.props.call.on('participantLeft', this.onParticipantLeft); this.props.call.on('roomConfigured', this.onConfigureRoom); this.props.call.on('fileSharing', this.onFileSharing); this.armOverlayTimer(); // attach to ourselves first if there are no other participants if (this.state.participants.length === 0) { setTimeout(() => { const item = { stream: this.props.call.getLocalStreams()[0], identity: this.props.call.localIdentity }; this.selectVideo(item); }); } else { // this.changeResolution(); } if (this.props.call.getLocalStreams()[0].getVideoTracks().length !== 0) { this.haveVideo = true; } } componentWillUnmount() { clearTimeout(this.overlayTimer); this.uploads.forEach((upload) => { this.props.notificationCenter().removeNotification(upload[1]); upload[0].abort(); }) } onParticipantJoined(p) { DEBUG(`Participant joined: ${p.identity}`); // this.refs.audioPlayerParticipantJoined.play(); p.on('stateChanged', this.onParticipantStateChanged); p.attach(); this.setState({ participants: this.state.participants.concat([p]) }); // this.changeResolution(); } onParticipantLeft(p) { DEBUG(`Participant left: ${p.identity}`); // this.refs.audioPlayerParticipantLeft.play(); const participants = this.state.participants.slice(); const idx = participants.indexOf(p); if (idx !== -1) { participants.splice(idx, 1); this.setState({ participants: participants }); } p.detach(true); // this.changeResolution(); } onParticipantStateChanged(oldState, newState) { if (newState === 'established' || newState === null) { this.maybeSwitchLargeVideo(); } } onConfigureRoom(config) { const newState = {}; newState.activeSpeakers = config.activeParticipants; this.setState(newState); if (config.activeParticipants.length === 0) { this.logEvent.info('set speakers to', ['Nobody'], config.originator); } else { const speakers = config.activeParticipants.map((p) => {return p.identity.displayName || p.identity.uri}); this.logEvent.info('set speakers to', speakers, config.originator); } this.maybeSwitchLargeVideo(); } onFileSharing(files) { let stateFiles = this.state.sharedFiles.slice(); stateFiles = stateFiles.concat(files); this.setState({sharedFiles: stateFiles}); files.forEach((file)=>{ if (file.session !== this.props.call.id) { this.props.notificationCenter().postFileShared(file, this.showFiles); } }) } changeResolution() { let stream = this.props.call.getLocalStreams()[0]; if (this.state.participants.length < 2) { this.props.call.scaleLocalTrack(stream, 1.5); } else if (this.state.participants.length < 5) { this.props.call.scaleLocalTrack(stream, 2); } else { this.props.call.scaleLocalTrack(stream, 1); } } selectVideo(item) { DEBUG('Switching video to: %o', item); if (item.stream) { this.setState({selfDisplayedLarge: true, largeVideoStream: item.stream}); } } maybeSwitchLargeVideo() { // Switch the large video to another source, maybe. if (this.state.participants.length === 0 && !this.state.selfDisplayedLarge) { // none of the participants are eligible, show ourselves const item = { stream: this.props.call.getLocalStreams()[0], identity: this.props.call.localIdentity }; this.selectVideo(item); } else if (this.state.selfDisplayedLarge) { this.setState({selfDisplayedLarge: false}); } } handleClipboardButton() { utils.copyToClipboard(this.callUrl); this.props.notificationCenter().postSystemNotification('Join me, maybe?', {body: 'Link copied to the clipboard'}); this.setState({shareOverlayVisible: false}); } handleEmailButton(event) { // if (navigator.userAgent.indexOf('Chrome') > 0) { // let emailWindow = window.open(this.emailLink, '_blank'); // setTimeout(() => { // emailWindow.close(); // }, 500); // } else { // window.open(this.emailLink, '_self'); // } this.setState({shareOverlayVisible: false}); } handleShareOverlayEntered() { this.setState({shareOverlayVisible: true}); } handleShareOverlayExited() { this.setState({shareOverlayVisible: false}); } handleActiveSpeakerSelected(participant, secondVideo=false) { // eslint-disable-line space-infix-ops let newActiveSpeakers = this.state.activeSpeakers.slice(); if (secondVideo) { if (participant.id !== 'none') { if (newActiveSpeakers.length >= 1) { newActiveSpeakers[1] = participant; } else { newActiveSpeakers[0] = participant; } } else { newActiveSpeakers.splice(1,1); } } else { if (participant.id !== 'none') { newActiveSpeakers[0] = participant; } else { newActiveSpeakers.shift(); } } this.props.call.configureRoom(newActiveSpeakers.map((element) => element.publisherId), (error) => { if (error) { // This causes a state update, hence the drawer lists update this.logEvent.error('set speakers failed', [], this.localIdentity); } }); } handleDrop(files) { DEBUG('Dropped file %o', files); this.uploadFiles(files); }; handleFiles(e) { DEBUG('Selected files %o', e.target.files); this.uploadFiles(e.target.files); event.target.value = ''; } uploadFiles(files) { for (var key in files) { // is the item a File? if (files.hasOwnProperty(key) && files[key] instanceof File) { let uploadRequest; let complete = false; const filename = files[key].name let progressNotification = this.props.notificationCenter().postFileUploadProgress( filename, (notification) => { if (!complete) { uploadRequest.abort(); this.uploads.splice(this.uploads.indexOf(uploadRequest), 1); } } ); uploadRequest = superagent .post(`${config.fileSharingUrl}/${this.props.remoteIdentity}/${this.props.call.id}/${filename}`) .send(files[key]) .on('progress', (e) => { this.props.notificationCenter().editFileUploadNotification(e.percent, progressNotification); }) .end((err, response) => { complete = true; this.props.notificationCenter().removeFileUploadNotification(progressNotification); if (err) { this.props.notificationCenter().postFileUploadFailed(filename); } this.uploads.splice(this.uploads.indexOf(uploadRequest), 1); }); this.uploads.push([uploadRequest, progressNotification]); } } } downloadFile(filename) { // const a = document.createElement('a'); // a.href = `${config.fileSharingUrl}/${this.props.remoteIdentity}/${this.props.call.id}/${filename}`; // a.target = '_blank'; // a.download = filename; // const clickEvent = document.createEvent('MouseEvent'); // clickEvent.initMouseEvent('click', true, true, window, 0, // clickEvent.screenX, clickEvent.screenY, clickEvent.clientX, clickEvent.clientY, // clickEvent.ctrlKey, clickEvent.altKey, clickEvent.shiftKey, clickEvent.metaKey, // 0, null); // a.dispatchEvent(clickEvent); } preventOverlay(event) { // Stop the overlay when we are the thumbnail bar event.stopPropagation(); } muteAudio(event) { event.preventDefault(); const localStream = this.props.call.getLocalStreams()[0]; if (localStream.getAudioTracks().length > 0) { const track = localStream.getAudioTracks()[0]; if(this.state.audioMuted) { DEBUG('Unmute microphone'); track.enabled = true; this.setState({audioMuted: false}); } else { DEBUG('Mute microphone'); track.enabled = false; this.setState({audioMuted: true}); } } } muteVideo(event) { event.preventDefault(); const localStream = this.props.call.getLocalStreams()[0]; if (localStream.getVideoTracks().length > 0) { const track = localStream.getVideoTracks()[0]; if (this.state.videoMuted) { DEBUG('Unmute camera'); track.enabled = true; this.setState({videoMuted: false}); } else { DEBUG('Mute camera'); track.enabled = false; this.setState({videoMuted: true}); } } } hangup(event) { event.preventDefault(); for (let participant of this.state.participants) { participant.detach(); } this.props.hangup(); } armOverlayTimer() { clearTimeout(this.overlayTimer); this.overlayTimer = setTimeout(() => { this.setState({callOverlayVisible: false}); }, 4000); } showOverlay() { // if (!this.state.shareOverlayVisible && !this.state.showDrawer && !this.state.showFiles) { // if (!this.state.callOverlayVisible) { // this.setState({callOverlayVisible: true}); // } // this.armOverlayTimer(); // } } toggleInviteModal() { this.setState({showInviteModal: !this.state.showInviteModal}); } toggleDrawer() { this.setState({callOverlayVisible: true, showDrawer: !this.state.showDrawer, showFiles: false}); clearTimeout(this.overlayTimer); } toggleFiles() { this.setState({callOverlayVisible: true, showFiles: !this.state.showFiles, showDrawer: false}); clearTimeout(this.overlayTimer); } showFiles() { this.setState({callOverlayVisible: true, showFiles: true, showDrawer: false}); clearTimeout(this.overlayTimer); } render() { if (this.props.call === null) { return (); } let watermark; const largeVideoClasses = classNames({ 'animated' : true, 'fadeIn' : true, 'large' : true, 'mirror' : !this.props.call.sharingScreen && !this.props.generatedVideoTrack, 'fit' : this.props.call.sharingScreen }); let matrixClasses = classNames({ 'matrix' : true }); const containerClasses = classNames({ 'video-container': true, 'conference': true, 'drawer-visible': this.state.showDrawer || this.state.showFiles }); const remoteIdentity = this.props.remoteIdentity.split('@')[0]; // const shareOverlay = ( // // // // // Invite other online users of this service, share this link with others or email, so they can easily join this conference. // // // // // // // // // // // // ); const buttons = {}; // const commonButtonTopClasses = classNames({ // 'btn' : true, // 'btn-link' : true // }); // const fullScreenButtonIcons = classNames({ // 'fa' : true, // 'fa-2x' : true, // 'fa-expand' : !this.isFullScreen(), // 'fa-compress' : this.isFullScreen() // }); const topButtons = []; // if (!this.state.showFiles) { // if (this.state.sharedFiles.length !== 0) { // topButtons.push( // // // // ); // } // } if (!this.state.showDrawer) { topButtons.push(); } buttons.top = {right: topButtons}; const muteButtonIcons = this.state.audioMuted ? 'microphone-off' : 'microphone'; const muteVideoButtonIcons = this.state.videoMuted ? 'video-off' : 'video'; const bottomButtons = []; bottomButtons.push( ); bottomButtons.push( ); bottomButtons.push( ); bottomButtons.push( ) // bottomButtons.push( // // // // ); bottomButtons.push( ); buttons.bottom = bottomButtons; const participants = []; if (this.state.participants.length > 0) { if (this.state.activeSpeakers.findIndex((element) => {return element.id === this.props.call.id}) === -1) { participants.push( ); } } const drawerParticipants = []; drawerParticipants.push( ); let videos = []; if (this.state.participants.length === 0) { videos.push( ); } else { const activeSpeakers = this.state.activeSpeakers; const activeSpeakersCount = activeSpeakers.length; if (activeSpeakersCount > 0) { activeSpeakers.forEach((p) => { videos.push( ); }); this.state.participants.forEach((p) => { if (this.state.activeSpeakers.indexOf(p) === -1) { participants.push( ); } drawerParticipants.push( ); }); } else { this.state.participants.forEach((p) => { videos.push( ); drawerParticipants.push( ); }); } } // let filesDrawerContent = ( // // ); return ( {videos} {participants} {drawerParticipants} ); } } ConferenceBox.propTypes = { notificationCenter : PropTypes.func.isRequired, call : PropTypes.object, hangup : PropTypes.func, remoteIdentity : PropTypes.string, generatedVideoTrack : PropTypes.bool, toggleSpeakerPhone : PropTypes.func, speakerPhoneEnabled : PropTypes.bool }; export default ConferenceBox; diff --git a/app/components/VideoBox.js b/app/components/VideoBox.js index 0d71bbe..23cbce6 100644 --- a/app/components/VideoBox.js +++ b/app/components/VideoBox.js @@ -1,390 +1,390 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import debug from 'react-native-debug'; import autoBind from 'auto-bind'; import { IconButton } from 'react-native-paper'; import { View, Dimensions } from 'react-native'; import { RTCView } from 'react-native-webrtc'; import CallOverlay from './CallOverlay'; import EscalateConferenceModal from './EscalateConferenceModal'; import DTMFModal from './DTMFModal'; import config from '../config'; import dtmf from 'react-native-dtmf'; import styles from '../assets/styles/blink/_VideoBox.scss'; const DEBUG = debug('blinkrtc:Video'); debug.enable('*'); class VideoBox extends Component { constructor(props) { super(props); autoBind(this); this.state = { callOverlayVisible: true, audioMuted: false, videoMuted: false, localVideoShow: false, remoteVideoShow: false, remoteSharesScreen: false, showEscalateConferenceModal: false, localStream: null, remoteStream: null, showDtmfModal: false, doorOpened: false }; this.overlayTimer = null; this.localVideo = React.createRef(); this.remoteVideo = React.createRef(); } callStateChanged(oldState, newState, data) { DEBUG(`Call state changed ${oldState} -> ${newState}`); if (newState === 'established') { this.forceUpdate(); } } openDoor() { const tone = config.intercomDtmfTone; DEBUG('DTMF tone sent to intercom: ' + tone); this.setState({doorOpened: true}); this.forceUpdate(); dtmf.stopTone(); //don't play a tone at the same time as another dtmf.playTone(dtmf['DTMF_' + tone], 1000); if (this.props.call !== null && this.props.call.state === 'established') { this.props.call.sendDtmf(tone); /*this.props.notificationCenter.postSystemNotification('Door opened', {timeout: 5});*/ } } componentDidMount() { console.log('localStreams', this.props.call.getLocalStreams()); console.log('remoteStreams', this.props.call.getRemoteStreams()); this.setState({localStream: this.props.call.getLocalStreams()[0], localVideoShow: true, remoteStream: this.props.call.getRemoteStreams()[0], remoteVideoShow: true}); this.props.call.on('stateChanged', this.callStateChanged); // sylkrtc.utils.attachMediaStream(, this.localVideo.current, {disableContextMenu: true}); // let promise = this.localVideo.current.play() // if (promise !== undefined) { // promise.then(_ => { // this.setState({localVideoShow: true}); // eslint-disable-line react/no-did-mount-set-state // // Autoplay started! // }).catch(error => { // // Autoplay was prevented. // // Show a "Play" button so that user can start playback. // }); // } else { // this.localVideo.current.addEventListener('playing', () => { // this.setState({}); // eslint-disable-line react/no-did-mount-set-state // }); // } // this.remoteVideo.current.addEventListener('playing', this.handleRemoteVideoPlaying); // sylkrtc.utils.attachMediaStream(this.props.call.getRemoteStreams()[0], this.remoteVideo.current, {disableContextMenu: true}); } componentWillUnmount() { // clearTimeout(this.overlayTimer); // this.remoteVideo.current.removeEventListener('playing', this.handleRemoteVideoPlaying); // this.exitFullscreen(); } showDtmfModal() { this.setState({showDtmfModal: true}); } hideDtmfModal() { this.setState({showDtmfModal: false}); } handleFullscreen(event) { event.preventDefault(); // this.toggleFullscreen(); } handleRemoteVideoPlaying() { this.setState({remoteVideoShow: true}); // this.remoteVideo.current.onresize = (event) => { // this.handleRemoteResize(event) // }; // this.armOverlayTimer(); } handleRemoteResize(event, target) { //DEBUG("%o", event); const resolutions = [ '1280x720', '960x540', '640x480', '640x360', '480x270','320x180']; const videoResolution = event.target.videoWidth + 'x' + event.target.videoHeight; if (resolutions.indexOf(videoResolution) === -1) { this.setState({remoteSharesScreen: true}); } else { this.setState({remoteSharesScreen: false}); } } muteAudio(event) { event.preventDefault(); const localStream = this.state.localStream; if (localStream.getAudioTracks().length > 0) { //const track = localStream.getAudioTracks()[0]; if(this.state.audioMuted) { DEBUG('Unmute microphone'); //track.enabled = true; this.props.callKeepToggleMute(false); this.setState({audioMuted: false}); } else { DEBUG('Mute microphone'); // track.enabled = false; this.props.callKeepToggleMute(true); this.setState({audioMuted: true}); } } } muteVideo(event) { event.preventDefault(); const localStream = this.state.localStream; if (localStream.getVideoTracks().length > 0) { const track = localStream.getVideoTracks()[0]; if(this.state.videoMuted) { DEBUG('Unmute camera'); track.enabled = true; this.setState({videoMuted: false}); } else { DEBUG('Mute camera'); track.enabled = false; this.setState({videoMuted: true}); } } } hangupCall(event) { event.preventDefault(); this.props.hangupCall(); } escalateToConference(participants) { this.props.escalateToConference(participants); } armOverlayTimer() { clearTimeout(this.overlayTimer); this.overlayTimer = setTimeout(() => { this.setState({callOverlayVisible: false}); }, 4000); } showCallOverlay() { if (this.state.remoteVideoShow) { this.setState({callOverlayVisible: true}); this.armOverlayTimer(); } } toggleEscalateConferenceModal() { this.setState({ callOverlayVisible : false, showEscalateConferenceModal : !this.state.showEscalateConferenceModal }); } render() { if (this.props.call == null) { return null; } const localVideoClasses = classNames({ 'video-thumbnail' : true, 'mirror' : !this.props.call.sharingScreen && !this.props.generatedVideoTrack, 'hidden' : !this.state.localVideoShow, 'animated' : true, 'fadeIn' : this.state.localVideoShow || this.state.videoMuted, 'fadeOut' : this.state.videoMuted, 'fit' : this.props.call.sharingScreen }); const remoteVideoClasses = classNames({ 'poster' : !this.state.remoteVideoShow, 'animated' : true, 'fadeIn' : this.state.remoteVideoShow, 'large' : true, 'fit' : this.state.remoteSharesScreen }); let callButtons; let watermark; if (this.state.callOverlayVisible) { // const screenSharingButtonIcons = classNames({ // 'fa' : true, // 'fa-clone' : true, // 'fa-flip-horizontal' : true, // 'text-warning' : this.props.call.sharingScreen // }); // const fullScreenButtonIcons = classNames({ // 'fa' : true, // 'fa-expand' : !this.isFullScreen(), // 'fa-compress' : this.isFullScreen() // }); // const commonButtonClasses = classNames({ // 'btn' : true, // 'btn-round' : true, // 'btn-default' : true // }); const buttons = []; // buttons.push(); // if (this.isFullscreenSupported()) { // buttons.push(); // } // buttons.push(
); // callButtons = ( // // // // // ); } else { // watermark = ( // // // // ); } console.log('local media stream in videobox', this.state); const muteButtonIcons = this.state.audioMuted ? 'microphone-off' : 'microphone'; const muteVideoButtonIcons = this.state.videoMuted ? 'video-off' : 'video'; return ( {/*onMouseMove={this.showCallOverlay}*/} {/* */} {/* {watermark} */} {/* */} {this.state.remoteVideoShow ? : null } { this.state.localVideoShow ? : null } { config.intercomDtmfTone ? : } ); } } VideoBox.propTypes = { call : PropTypes.object, localMedia : PropTypes.object, hangupCall : PropTypes.func, shareScreen : PropTypes.func, escalateToConference : PropTypes.func, generatedVideoTrack : PropTypes.bool, callKeepSendDtmf : PropTypes.func, callKeepToggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, speakerPhoneEnabled : PropTypes.bool }; export default VideoBox;