How to deal with audio and video related issues in Flexible Classroom?

Check your browser's permission to use your camera and microphone.

1. Go to the browser settings page and select Privacy and Security > Site Settings:

   

2. Click on the camera and mike permissions:

   

3. Choose Allow in the dropdown:

   

If the permissions are granted but the camera or microphone still don't work, take the following steps:

1. Clear your browser cache
2. Restart the browser
3. Update your browser

Audio and video devices can be disabled, as shown below:

For security reasons, WebRTC is only allowed to be used in an HTTPS environment; otherwise, the browser will not allow the page to access audio or video devices. Configure your domain name to use HTTPS.

Use launchOption.MediaOptions configurations of the web client to adjust the resolution in a classroom:

• To adjust the small stream resolution use: launchOption.MediaOptions.lowStreamCameraEncoderConfiguration.
• To adjust the large stream resolution use: launchOption.mediaOptions.cameraEncoderConfiguration.
• To adjust the screen sharing resolution use: launchOption.mediaOptions.screenShareEncoderConfiguration.

The following sample code illustrates how to modify the resolution of small and large streams:

_25

AgoraEduSDK.launch(appRef.current, {

_25

...launchOption,

_25

recordUrl,

_25

courseWareList,

_25

uiMode: homeStore.theme,

_25

virtualBackgroundImages,

_25

virtualBackgroundVideos,

_25

mediaOptions: {

_25

cameraEncoderConfiguration: {

_25

width: 1280,

_25

height: 720,

_25

frameRate: 30,

_25

bitrate: 1710,

_25

},

_25

lowStreamCameraEncoderConfiguration: {

_25

width: 1280,

_25

height: 720,

_25

frameRate: 30,

_25

bitrate: 1710,

_25

}

_25

},

_25

listener: (evt: AgoraEduClassroomEvent, type) => {

_25

// Add logic for handling events here

_25

}

_25

});

Adjust the resolution of class recordings in the web client by changing the webRecordConfig in the Set recording state RESTful API:

_15

get recordArgs() {

_15

const { recordUrl, rteEngineConfig, recordRetryTimeout } = EduClassroomConfig.shared;

_15

const args = {

_15

webRecordConfig: {

_15

rootUrl: `${recordUrl}?language=${rteEngineConfig.language}`,

_15

videoBitrate: 3000,

_15

videoWidth: 1280,

_15

videoHeight: 720,

_15

videoFps: 15

_15

},

_15

mode: RecordMode.Web,

_15

retryTimeout: recordRetryTimeout,

_15

};

_15

return args;

_15

}

If you encounter this error when you enable screen sharing, it means that you have not granted the screen recording permission.

Taking the macOS system as an example, you can enable the corresponding permission in System Settings > Privacy and Security > Screen & System Audio Recording.

Enable screen recording permission for AgoraFlexibleClassroom:

You can use the iframe allow attribute to add display-capture parameters for screen sharing. The code example is as follows:

_10

<iframe

_10

src="“xxxxxxx”"

_10

width="100%"

_10

height="100%"

_10

frameborder="0"

_10

scrolling="no"

_10

allowfullscreen="allowfullscreen"

_10

allow="display-capture; geolocation; microphone; camera; midi; encrypted-media;"

_10

referrerpolicy="no-referrer"

_10

></iframe>

• Teacher's device: Exclusive broadband and uplink speed of at least 10 Mbps and 4 Mbps, respectively.
• Student's device: Exclusive broadband of at least 4 Mbps.

If you experience these network issues, try the following steps to improve your connection:

• Restart your router and reconnect to the network.
• Move your device closer to the router, ensuring there are no walls or obstructions in between.
• Disconnect other devices or applications that may be using bandwidth, such as download programs, streaming services, cloud storage applications, or networked TV boxes.
• Switch to a different network, such as a 4G hotspot, and re-enter the classroom.
• Restart your device.
• Disable any VPNs or network proxies.

• Check whether the teacher's microphone is turned on.
• Check the student network status.
• Check that the student speakers, including volume mixer and browser, are muted.
• Check whether the speaker device used in the student class is selected correctly.
• Exit and re-enter the classroom or restart the device.

• Check that the students are on stage and have their microphone turned on.
• Check that the teacher's speakers, including the volume mixer and browser, are muted.
• Check whether the teacher's speaker device is selected correctly.
• Exit and re-enter the classroom or restart the device.

Web screen sharing is only supported in Chrome version 74 and above on Windows and macOS, including the following:

• Windows supports audio sharing when sharing the entire screen or a Chrome tab, but not when sharing an app window.
• macOS supports sharing audio when sharing a Chrome tab. After setting withAudio to true, check the share audio box in the screen sharing pop-up.

The Electron terminal supports sharing system audio on Windows.

On macOS, use a virtual sound card to capture and share system sounds. If the user uses a virtual sound card, such as Soundflower, you can pass its name ("soundflower") as a parameter. The SDK will find the corresponding virtual sound card device and start capturing.

Note

The default sound card on macOS does not support capture. To enable this feature, the app needs to enable a virtual sound card and pass its name (deviceName) to the SDK. Agora has tested and recommends Soundflower as the virtual sound card.

On macOS, screen sharing with audio is turned off by default. For Flexible Classroom versions 2.8.21 and above, if you need to enable it, modify the source code. The specific modification steps are as follows:

1. Display screen sharing with audio at the UI level.

   Code path: packages/agora-classroom-sdk/src/infra/capabilities/containers/dialog/screen-picker/index.tsx

2. Pass the name of the virtual sound card on macOS.

   Code path: packages/agora-classroom-sdk/src/infra/stores/common/toolbar/index.ts. The code is as follows: