AgoraIO-Community / VideoUIKit-Web-React

A Web library to simply integrate Agora Video Calling or Live Video Streaming to your website with just a few lines of code.
MIT License
50 stars 40 forks source link

Screensharing icon shown as enabled by default #23

Closed qwertynik closed 1 year ago

qwertynik commented 1 year ago

Was exploring the UIKit and realized that the Screensharing icon is shown as enabled even when the screen sharing isn't enabled.

image

EkaanshArora commented 1 year ago

This is the intended behaviour - If you enable screensharing the icon changes to a cross icon to allow stopping the screenshare. This behaviour can be customized with your own icons.

qwertynik commented 1 year ago

Yes, had observed the same later. Since the other icons follow a different pattern, this appeared like an issue.

This behaviour can be customized with your own icons. That's good to know.

There seems to be something unusual about screen sharing though. It doesn't work. Code is similar to what Getting Started/Beginner's (name could be different) guide suggests. After a more detailed exploration will file an issue if required.

In case there is a known issue and this helps in debugging, here is the code of App.js

import React, {useState} from 'react';
import AgoraUIKit from 'agora-react-uikit';

const App = () => {
    const [videoCall, setVideoCall] = useState(true);
    //get user id from query params.
    const userId = new URLSearchParams(window.location.search).get('userId');

    let token;
    if (userId == 1) {
        token = '007eJxTYPC+JFJSHnVMVMLQ17FBPHO7rH7pkS2GHEHPWSfYL14lNV2BwcDI2NQ8ydDY0MzUwsTALNXCJNnY0NTENMk8JdE4zdDCzWNpckMgI0P1HVVGRgYIBPHZGUpSi0sy89IZGAB11111';
    } else {
        token = '007eJxTYNi04XrV0xyLhqM+E2QFTuoas9f7l+ulrlyzIs1IYsdex+UKDAZGxqbmSYbGhmamFiYGZqkWJsnGhqYmpknmKYnGaYYW/J5LkxsCGRmetiWzMDJAIIjPzlCSWlySmZfOwAAAIt1S3Tcc';
    }

    const rtcProps = {
        appId: '66957b131658406e84c31545b7daa234',
        channel: 'testing', // your agora channel
        token: token,
        enableScreensharing: true,
    };

    const callbacks = {
        EndCall: () => setVideoCall(false),
    };

    return videoCall ? (
        <div style={{display: 'flex', width: '100vw', height: '100vh'}}>
            <AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
        </div>
    ) : (
        <h3 onClick={() => setVideoCall(true)}>Start Call</h3>
    );
};

export default App;

Of course, this is not on topic. If screen sharing continues to have issues, will file a bug.