Documentation
Call Kit
Customize the call
Implement an audio-only call

Implement an audio-only call

Last updated：2023-08-23 10:26

When starting a call, the Call Kit (ZegoUIkitPrebuiltCall) turns on the camera, and microphone, and uses the speaker as the audio output device by default.

To change this default configuration, for example, turn off the camera when you start a call, or don't use the speaker (If the speaker is not used, the system's default audio output device, such as ear speaker, headset, Bluetooth, etc., will be used.), you can modify the following configurations:

turnOnCameraWhenJoining: Whether to turn on the camera when the call starts. true: turn on (by default). false: turn off.
turnOnMicrophoneWhenJoining: Whether to turn on the microphone when the call starts. true: turn on (by default). false: turn off.
useSpeakerWhenJoining: Whether to use the speaker when the call starts. true: use the speaker (by default). false: use the system's default audio output device, such as an ear speaker, headset, Bluetooth, etc.

Here is the reference code:

With call invitation Basic call

import React, { Component } from 'react';
import ZegoUIKitPrebuiltCallService, { ONE_ON_ONE_VIDEO_CALL_CONFIG } from '@zegocloud/zego-uikit-prebuilt-call-rn';
import * as ZIM from 'zego-zim-react-native';
import * as ZPNs from 'zego-zpns-react-native';

ZegoUIKitPrebuiltCallService.init(
    KeyCenter.appID,
    KeyCenter.appSign,
    userID,
    userName,
    [ZIM, ZPNs],
    {
        ringtoneConfig: {
            incomingCallFileName: 'zego_incoming.mp3',
            outgoingCallFileName: 'zego_outgoing.mp3',
        },
        requireConfig: (data) => {
            const callConfig =
                data.invitees.length > 1
                    ? ZegoInvitationType.videoCall === data.type
                        ? GROUP_VIDEO_CALL_CONFIG
                        : GROUP_VOICE_CALL_CONFIG
                    : ZegoInvitationType.videoCall === data.type
                        ? ONE_ON_ONE_VIDEO_CALL_CONFIG
                        : ONE_ON_ONE_VOICE_CALL_CONFIG;
            return {
                ...callConfig,
                //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
                turnOnCameraWhenJoining: false,
                turnOnMicrophoneWhenJoining: false,
                useSpeakerWhenJoining: true,
                ///\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
            };
        },
        notifyWhenAppRunningInBackgroundOrQuit: true,
        isIOSSandboxEnvironment: true,
        androidNotificationConfig: {
            channelID: "ZegoUIKit",
            channelName: "ZegoUIKit",
        },
    },
)

import React, { Component } from 'react';
import { ZegoUIKitPrebuiltCall, ONE_ON_ONE_VIDEO_CALL_CONFIG } from '@zegocloud/zego-uikit-prebuilt-call-rn';

export default function CallPage(props) {
    return (
        <View >
            <ZegoUIKitPrebuiltCall
                appID={yourAppID}
                appSign={yourAppSign}
                userID={userID}
                userName={userName}
                callID={callID}
                config={{
                    ...ONE_ON_ONE_VIDEO_CALL_CONFIG,
                    onOnlySelfInRoom: () => {props.navigation.navigate('HomePage')},
                    onHangUp: () => {props.navigation.navigate('HomePage')},
                    //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
                    turnOnCameraWhenJoining: false,
                    turnOnMicrophoneWhenJoining: false,
                    useSpeakerWhenJoining: true,
                    ///\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
                }}
            />
        </View>
    );
}