add expo camera and use camera on call init action sheet

android/build.gradle

@@ -65,6 +65,11 @@ allprojects {
         maven {
             url "$rootDir/../node_modules/detox/Detox-android"
         }
+        
+        maven {
+            // expo-camera bundles a custom com.google.android:cameraview
+            url "$rootDir/../node_modules/expo-camera/android/maven"
+        }
 
         mavenCentral {
             content {

app/containers/UIKit/VideoConferenceBlock/components/StartACallActionSheet.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Text, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
+import { Camera, CameraType } from 'expo-camera';
 
 import i18n from '../../../../i18n';
 import { getSubscriptionByRoomId } from '../../../../lib/database/services/Subscription';
@@ -15,6 +16,8 @@ import { BUTTON_HIT_SLOP } from '../../../message/utils';
 import StatusContainer from '../../../Status';
 import useStyle from './styles';
 
+const CAM_SIZE = { height: 220, width: 148 };
+
 export default function StartACallActionSheet({ rid, initCall }: { rid: string; initCall: Function }): React.ReactElement {
 	const style = useStyle();
 	const { colors } = useTheme();
@@ -64,8 +67,14 @@ export default function StartACallActionSheet({ rid, initCall }: { rid: string;
 					{user.username}
 				</Text>
 			</View>
-			<View style={style.actionSheetPhotoContainer}>
-				<AvatarContainer size={62} text={username} />
+			<View
+				style={[
+					style.actionSheetPhotoContainer,
+					CAM_SIZE,
+					{ backgroundColor: cam ? undefined : colors.conferenceCallPhotoBackground }
+				]}
+			>
+				{cam ? <Camera style={CAM_SIZE} type={CameraType.front} /> : <AvatarContainer size={62} text={username} />}
 			</View>
 			<Button
 				onPress={() => {

app/containers/UIKit/VideoConferenceBlock/components/styles.ts

@@ -116,12 +116,12 @@ export default function useStyle() {
 		actionSheetPhotoContainer: {
 			height: 220,
 			width: 148,
-			backgroundColor: colors.conferenceCallPhotoBackground,
 			borderRadius: 8,
 			margin: 24,
 			alignSelf: 'center',
 			justifyContent: 'center',
-			alignItems: 'center'
+			alignItems: 'center',
+			overflow: 'hidden'
 		}
 	});
 }

app/lib/hooks/useVideoConf.tsx

@@ -10,7 +10,7 @@ import database from '../database';
 import { getSubscriptionByRoomId } from '../database/services/Subscription';
 import { callJitsi } from '../methods';
 import { compareServerVersion, showErrorAlert } from '../methods/helpers';
-import { videoConfStartAndJoin } from '../methods/videoConf';
+import { handleCallPermissions, videoConfStartAndJoin } from '../methods/videoConf';
 import { Services } from '../services';
 import { useAppSelector } from './useAppSelector';
 import { useSnaps } from './useSnaps';
@@ -87,6 +87,7 @@ export const useVideoConf = (rid: string): { showInitCallActionSheet: () => Prom
 				children: <StartACallActionSheet rid={rid} initCall={initCall} />,
 				snaps
 			});
+			handleCallPermissions();
 		}
 	};
 

app/lib/methods/videoConf.ts

@@ -19,18 +19,21 @@ const handleBltPermission = async (): Promise<Permission[]> => {
 	return [PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION];
 };
 
+export const handleCallPermissions = async (): Promise<void> => {
+	if (isAndroid) {
+		const bltPermission = await handleBltPermission();
+		await PermissionsAndroid.requestMultiple([
+			PermissionsAndroid.PERMISSIONS.CAMERA,
+			PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
+			...bltPermission
+		]);
+	}
+};
+
 export const videoConfJoin = async (callId: string, cam?: boolean, mic?: boolean): Promise<void> => {
 	try {
 		const result = await Services.videoConferenceJoin(callId, cam, mic);
 		if (result.success) {
-			if (isAndroid) {
-				const bltPermission = await handleBltPermission();
-				await PermissionsAndroid.requestMultiple([
-					PermissionsAndroid.PERMISSIONS.CAMERA,
-					PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
-					...bltPermission
-				]);
-			}
 			const { url, providerName } = result;
 			if (providerName === 'jitsi') {
 				navigation.navigate('JitsiMeetView', { url, onlyAudio: !cam, videoConf: true });

package.json

@@ -65,6 +65,7 @@
 		"expo": "^46.0.9",
 		"expo-apple-authentication": "4.2.1",
 		"expo-av": "11.2.3",
+		"expo-camera": "12.5.0",
 		"expo-file-system": "14.0.0",
 		"expo-haptics": "11.2.0",
 		"expo-keep-awake": "10.1.1",

yarn.lock

@@ -4761,6 +4761,13 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@koale/useworker@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@koale/useworker/-/useworker-4.0.2.tgz#cb540a2581cd6025307c3ca6685bc60748773e58"
+  integrity sha512-xPIPADtom8/3/4FLNj7MvNcBM/Z2FleH85Fdx2O869eoKW8+PoEgtSVvoxWjCWMA46Sm9A5/R1TyzNGc+yM0wg==
+  dependencies:
+    dequal "^1.0.0"
+
 "@mdx-js/mdx@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"
@@ -9708,6 +9715,11 @@ deprecated-react-native-prop-types@^2.3.0:
     invariant "*"
     prop-types "*"
 
+dequal@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-1.0.1.tgz#dbbf9795ec626e9da8bd68782f4add1d23700d8b"
+  integrity sha512-Fx8jxibzkJX2aJgyfSdLhr9tlRoTnHKrRJuu2XHlAgKioN2j19/Bcbe0d4mFXYZ3+wpE2KVobUVTfDutcD17xQ==
+
 dequal@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
@@ -10806,6 +10818,15 @@ expo-av@11.2.3:
   dependencies:
     "@expo/config-plugins" "^4.0.14"
 
+expo-camera@12.5.0:
+  version "12.5.0"
+  resolved "https://registry.yarnpkg.com/expo-camera/-/expo-camera-12.5.0.tgz#aac8441ea661ed21becf064e715dd50d5448aaae"
+  integrity sha512-oiQccJ9d2FnGdlLKaRphZ2DpwI9C1yD4HUZDacsAR+8904xv3Mhf6u78mh9yBPs6Z7dbtgSjOFtFu5s29PeTxA==
+  dependencies:
+    "@expo/config-plugins" "~5.0.0"
+    "@koale/useworker" "^4.0.2"
+    invariant "^2.2.4"
+
 expo-constants@~13.2.2, expo-constants@~13.2.4:
   version "13.2.4"
   resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-13.2.4.tgz#eab4a553f074b2c60ad7a158d3b82e3484a94606"