Memory leak

[ABespolov]

I got memory leak on IOS devices, ram consumption increases and ram doesn't release, when I'm comming back to this screen and making call again. Finally I got crash after ram go over 1GB on my iPhone. I think there is something wrong with SurfaceView components, without render them all works properly. Any ideas? Thanks.

"react-native-agora": "^3.1.2"

import React, { Component } from 'react';
import { Platform, ScrollView, Text, View, TouchableOpacity, Dimensions, StyleSheet } from 'react-native';
import RtcEngine, { ChannelProfile, RtcLocalView, RtcRemoteView, VideoRenderMode } from 'react-native-agora';

interface Props {}

/**
 * @property peerIds Array for storing connected peers
 * @property appId
 * @property channelName Channel Name for the current session
 * @property joinSucceed State variable for storing success
 */
interface State {
    appId: string;
    channelName: string;
    joinSucceed: boolean;
    peerIds: number[];
}

class VideoChat extends Component<Props, State> {
    _engine?: RtcEngine;

    constructor(props) {
        super(props);
        this.state = {
            appId: 'xxxxxxxxxxxxxxxxxxxxxxx',
            channelName: 'channel-x',
            joinSucceed: false,
            peerIds: [],
        };
        if (Platform.OS === 'android') {
            // Request required permissions from Android
            /*requestCameraAndAudioPermission().then(() => {
                console.log('requested!');
            });*/
        }
    }

    componentDidMount() {
        this.init();
    }

    componentWillUnmount() {
        this._engine.destroy();
    }

    /**
     * @name init
     * @description Function to initialize the Rtc Engine, attach event listeners and actions
     */
    init = async () => {
        const { appId } = this.state;
        this._engine = await RtcEngine.create(appId);
        await this._engine?.setChannelProfile(ChannelProfile.Communication);
        await this._engine.enableVideo();

        this._engine.addListener('UserJoined', (uid, elapsed) => {
            console.log('UserJoined', uid, elapsed);
            // Get current peer IDs
            const { peerIds } = this.state;
            // If new user
            if (peerIds.indexOf(uid) === -1) {
                this.setState({
                    // Add peer ID to state array
                    peerIds: [...peerIds, uid],
                });
            }
        });

        this._engine.addListener('UserOffline', (uid, reason) => {
            console.log('UserOffline', uid, reason);
            const { peerIds } = this.state;
            this.setState({
                // Remove peer ID from state array
                peerIds: peerIds.filter((id) => id !== uid),
            });
        });

        // If Local user joins RTC channel
        this._engine.addListener('JoinChannelSuccess', (channel, uid, elapsed) => {
            console.log('JoinChannelSuccess', channel, uid, elapsed);
            // Set state variable to true
            this.setState({
                joinSucceed: true,
            });
        });
    };

    /**
     * @name startCall
     * @description Function to start the call
     */
    startCall = async () => {
        // Join Channel using null token and channel name
        const clientUid = Math.floor(new Date().getTime() / 1000);
        // Join Channel using null token and channel name
        await this._engine?.joinChannel(null, this.state.channelName, null, clientUid);
    };

    /**
     * @name endCall
     * @description Function to end the call
     */
    endCall = async () => {
        await this._engine?.leaveChannel();
        this.setState({ peerIds: [], joinSucceed: false });
    };

    switchCamera = async () => {
        await this._engine?.switchCamera();
    };

    render() {
        return (
            <View style={styles.max}>
                <View style={styles.max}>
                    {this._renderVideos()}
                    <View style={styles.buttonHolder}>
                        <TouchableOpacity onPress={this.startCall} style={styles.button}>
                            <Text style={styles.buttonText}> Start Call </Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.endCall} style={styles.button}>
                            <Text style={{ ...styles.buttonText }}> End Call </Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.switchCamera} style={styles.button}>
                            <Text style={styles.buttonText}>Switch </Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    }

    _renderVideos = () => {
        const { joinSucceed } = this.state;
        return joinSucceed ? (
            <View style={styles.fullView}>
                <RtcLocalView.SurfaceView
                    style={styles.max}
                    channelId={this.state.channelName}
                    renderMode={VideoRenderMode.Hidden}
                />
                {this._renderRemoteVideos()}
            </View>
        ) : null;
    };

    _renderRemoteVideos = () => {
        const { peerIds } = this.state;
        return (
            <ScrollView style={styles.remoteContainer} contentContainerStyle={{ paddingHorizontal: 2.5 }} horizontal={true}>
                {peerIds.map((value, index, array) => {
                    return (
                        <RtcRemoteView.SurfaceView
                            style={styles.remote}
                            uid={value}
                            channelId={this.state.channelName}
                            renderMode={VideoRenderMode.Hidden}
                            zOrderMediaOverlay={true}
                        />
                    );
                })}
            </ScrollView>
        );
    };
}

const styles = StyleSheet.create({
    max: {
        height: '50%',
    },
    buttonHolder: {
        height: 100,
        alignItems: 'center',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        position: 'absolute',
        top: 450,
        zIndex: 999999,
    },
    button: {
        paddingHorizontal: 20,
        paddingVertical: 10,
        backgroundColor: '#0093E9',
        borderRadius: 25,
    },
    buttonText: {
        color: '#fff',
    },
    fullView: {
        width: Dimensions.get('screen').width,
        height: Dimensions.get('screen').height - 100 / 2,
    },
    remoteContainer: {
        width: '100%',
        height: 150,
        position: 'absolute',
        top: 5,
    },
    remote: {
        width: 150,
        height: 150,
        marginHorizontal: 2.5,
        borderRadius: 500,
    },
    noUserText: {
        paddingHorizontal: 10,
        paddingVertical: 5,
        color: '#0093E9',
    },
});

export default VideoChat;

[LichKing-2234]

could you pls use instruments to get more infomation about leaks?

[ABespolov]

Profiler: https://drive.google.com/file/d/1jK44QxGJwEecQ50puMp6N-_pkGnfQXo8/view?usp=sharing

[LichKing-2234]

I can not download the zip from your link. could you pls switch to leaks and make a screenshot again?

[ABespolov]

You can find profiler in this repo: https://github.com/ABespolov/agora-memory-leak

[LichKing-2234]

I need this, but I can not find it in your profiler.

[ABespolov]

I updated this repo with two profilers https://github.com/ABespolov/agora-memory-leak. Xcode does't indicate any memory leak but memory consumption increases. I replaced SurfaceView with Image component and made another snapshot, memory consumption looks normal, I'm not understand why agora SurfaceView occupied so much ram. My app crashes after ~20 calls and total ram consumption is about 1GB, I just finish call and then start another one.

[ABespolov]

I made another one snapshot and now I have some leaks. Snapshot: https://www.dropbox.com/s/y5mpt1chzdgy9gz/WithLeaks.trace.zip?dl=0

[ABespolov]

Memory graph shows that AgoraRtcVideoCanvas stays in memory after 3 calls(I have 3 AgoraRtcVideoCanvas) despite call destroy function

[LichKing-2234]

thanks, I will take a look.

[LichKing-2234]

fixed in 3.1.5