agora-rtc-sdk (3.1.1) Uncaught TypeError: Cannot read property 'appendChild' of null

[IG-88-2]

Hello guys, we were using your library for a while now, recently we updated to newer version - agora-rtc-sdk (3.1.1), and strange issue begin to appear, as error in title state i see Uncaught TypeError: Cannot read property 'appendChild' of null, this error occured multiple on ios devices (call was made from mac to iphone). I traced it down in your minified library to specific spot (please see attached screenshot). Please give me some advice on how to proceed as i cant directly modify/debug your minified library (in convinient way). Can you please give some suggestions on how this problem can be tackled ? Similar issue never occured on windows 10 / android. Thank you very much for your time!

[IG-88-2]

hey guys! after some additional inspection we discovered that when after stream.play callback is called it is not guaranteed that video will be inside supplied container on ios devices, we worked around this by inserting additional await function after stream.play callback called, some additional testing required to verify whether this is a delay issue or video ocasionally not embedded at all, will be keeping you updated, please share your suggestions on how to approach this issue, thank you!

[plutoless]

@WildHorse19 thanks for reporting this. the appendChild error usually happens when you call play with a dom id that does not exist. please ensure your dom is ready when you call play.

[IG-88-2]

Hi plutoless, problem here is that stream.play callback is not called when video injection procedure completed, hence in case user cancel call and container being removed if stream.play will inject video at this stage it will throw appendChild of null error because container no longer exist but synchronicity of event was not preserved, we currently working around this by adding additional wait function to make sure it injected when we proceed but this can be misleading for many people as there callback supplied to stream.play which suppousedly should be called when video injected (and this is TRUE for android devices, but not always true for ios for some reason), also there is no way to fork agora code to modify it because library is minified

[plutoless]

sorry i'm not sure if i fully understand you. could you pls share bit of your code snippet? what do you mean by video injection?

[ABespolov]

I made it work by manually copy and insert player node after device switch

const handleMicrophoneChange = async (event: React.ChangeEvent<{ value: unknown }>) => {
        const deviceId = String(event.target.value) || "";
        const player = document.querySelector('.video-chat__local-stream');
        const container = document.querySelector('.video-chat__container');
        const newPlayer =  document.createElement('div');

        newPlayer.className = player.className;
        newPlayer.id = player.id;

        setMicrophoneId(deviceId);
        await stream.switchDevice('audio', deviceId);

        container.appendChild(newPlayer);
        stream.play(player.id, {fit: 'contain' });
    };

[IbrahimLopez]

hey guys! after some additional inspection we discovered that when after stream.play callback is called it is not guaranteed that video will be inside supplied container on ios devices, we worked around this by inserting additional await function after stream.play callback called, some additional testing required to verify whether this is a delay issue or video ocasionally not embedded at all, will be keeping you updated, please share your suggestions on how to approach this issue, thank you!

How did you solve the problem?

I have the same problem on ios devices with AgoraRTCSDK when executing the play function.
Will you have an example?