feat: stream changes

app/lib/voip/RemoteStream.ts

@@ -11,65 +11,29 @@
  * detecting voice energy etc. Which will be implemented as when needed
  */
 
+import { MediaStream, RTCPeerConnection } from 'react-native-webrtc';
+
 import Stream from './Stream';
 
 export default class RemoteStream extends Stream {
-	private renderingMediaElement: HTMLMediaElement | undefined;
-
 	constructor(mediaStream: MediaStream) {
 		super(mediaStream);
 	}
 
-	/**
-	 * Called for initializing the class
-	 * @remarks
-	 */
-
-	init(rmElement: HTMLMediaElement): void {
-		if (this.renderingMediaElement) {
-			// Someone already has setup the stream and initializing it once again
-			// Clear the existing stream object
-			this.renderingMediaElement.pause();
-			this.renderingMediaElement.srcObject = null;
-		}
-		this.renderingMediaElement = rmElement;
-	}
-
 	/**
 	 * Called for playing the stream
 	 * @remarks
 	 * Plays the stream on media element. Stream will be autoplayed and muted based on the settings.
 	 * throws and error if the play fails.
 	 */
-
-	play(autoPlay = true, muteAudio = false): void {
-		if (this.renderingMediaElement && this.mediaStream) {
-			this.renderingMediaElement.autoplay = autoPlay;
-			this.renderingMediaElement.srcObject = this.mediaStream;
-			if (autoPlay) {
-				this.renderingMediaElement.play().catch((error: Error) => {
-					throw error;
-				});
-			}
-			if (muteAudio) {
-				this.renderingMediaElement.volume = 0;
-			}
+	play(): void {
+		if (!this.mediaStream || this.mediaStream.getAudioTracks().length === 0) {
+			throw Error('No audio tracks available in the media stream.');
 		}
-	}
 
-	/**
-	 * Called for pausing the stream
-	 * @remarks
-	 */
-	pause(): void {
-		this.renderingMediaElement?.pause();
-	}
+		const [audioTrack] = this.mediaStream.getAudioTracks();
+		const peerConnection = new RTCPeerConnection();
 
-	clear(): void {
-		super.clear();
-		if (this.renderingMediaElement) {
-			this.renderingMediaElement.pause();
-			this.renderingMediaElement.srcObject = null;
-		}
+		peerConnection.addTrack(audioTrack, this.mediaStream);
 	}
 }

app/lib/voip/Stream.ts

@@ -1,3 +1,5 @@
+import { MediaStream } from 'react-native-webrtc';
+
 /**
  * This class is used for stream manipulation.
  * @remarks
@@ -36,17 +38,21 @@ export default class Stream {
 	 * @remarks
 	 */
 
-	onTrackAdded(callBack: any): void {
-		this.mediaStream?.onaddtrack?.(callBack);
+	onTrackAdded(callback: any): void {
+		this.mediaStream?.addEventListener('addtrack', callback);
 	}
 
 	/**
 	 * Called for setting the callback when the track gets removed
 	 * @remarks
 	 */
 
-	onTrackRemoved(callBack: any): void {
-		this.mediaStream?.onremovetrack?.(callBack);
+	onTrackRemoved(callback: any): void {
+		this.mediaStream?.addEventListener('removetrack', callback);
+	}
+
+	getURL() {
+		return this.mediaStream?.toURL();
 	}
 
 	/**

app/views/RoomView/definitions.ts

@@ -25,6 +25,7 @@ export interface IRoomViewProps extends IActionSheetProvider, IBaseScreen<ChatsS
 	inAppFeedback?: { [key: string]: string };
 	encryptionEnabled: boolean;
 	airGappedRestrictionRemainingDays: number | undefined;
+	remoteStreamUrl: string;
 }
 
 export type TStateAttrsUpdate = keyof IRoomViewState;

app/views/RoomView/index.tsx

@@ -8,6 +8,7 @@ import { dequal } from 'dequal';
 import { withSafeAreaInsets } from 'react-native-safe-area-context';
 import { Subscription } from 'rxjs';
 import * as Haptics from 'expo-haptics';
+import { RTCView } from 'react-native-webrtc';
 
 import { getRoutingConfig } from '../../lib/services/restApi';
 import Touch from '../../containers/Touch';
@@ -1479,7 +1480,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 	render() {
 		console.count(`${this.constructor.name}.render calls`);
 		const { room, loading, action, selectedMessages } = this.state;
-		const { user, baseUrl, theme, width, serverVersion, navigation, encryptionEnabled } = this.props;
+		const { remoteStreamUrl, user, baseUrl, theme, width, serverVersion, navigation, encryptionEnabled } = this.props;
 		const { rid, t } = room;
 		let bannerClosed;
 		let announcement;
@@ -1516,6 +1517,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					getText: this.getText
 				}}>
 				<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID='room-view'>
+					{remoteStreamUrl ? <RTCView streamURL={remoteStreamUrl} /> : null}
+
 					<StatusBar />
 					<Banner title={I18n.t('Announcement')} text={announcement} bannerClosed={bannerClosed} closeBanner={this.closeBanner} />
 					<List
@@ -1556,7 +1559,8 @@ const mapStateToProps = (state: IApplicationState) => ({
 	livechatAllowManualOnHold: state.settings.Livechat_allow_manual_on_hold as boolean,
 	airGappedRestrictionRemainingDays: state.settings.Cloud_Workspace_AirGapped_Restrictions_Remaining_Days,
 	inAppFeedback: state.inAppFeedback,
-	encryptionEnabled: state.encryption.enabled
+	encryptionEnabled: state.encryption.enabled,
+	remoteStreamUrl: state.voip.remoteStreamUrl
 });
 
 export default connect(mapStateToProps)(withDimensions(withTheme(withSafeAreaInsets(withActionSheet(RoomView)))));

index.js

@@ -25,7 +25,14 @@ if (!isFDroidBuild && isAndroid) {
 }
 
 AppRegistry.registerComponent(appName, () => require('./app/index').default);
+AppRegistry.registerHeadlessTask(
+	'RNCallKeepBackgroundMessage',
+	() =>
+		({ name, callUUID, handle }) =>
+			// Make your call here
 
+			Promise.resolve()
+);
 // For storybook, comment everything above and uncomment below
 // import 'react-native-gesture-handler';
 // import 'react-native-console-time-polyfill';