agoraio/api-examples-web

new web demo has been moved to : https://github.com/AgoraIO/API-Examples-Web/tree/new

Sample projects for Agora RTC Web SDK 4.x

English | 简体中文

Overview

This repository contains sample projects using the Agora RTC Web SDK 4.x.

---

If you are still not familiar with Agora RTC Web SDK 4.x, please follow our community interactive tutorial to quickly understand the SDK and use CodePen iframes to call the SDK in your browser.

---

The Web SDK 4.x refactors the Web SDK 3.x. Based on the features of 3.x, 4.x fully optimizes the internal architecture of the SDK and provides more flexible and easy-to-use APIs.

Compared to the Web SDK 3.x, the Web SDK 4.x has the following advantages:

• Uses promises for asynchronous operations, which improves the robustness and readability of your code.
• Supports TypeScript.
• Replaces the Stream object with Track objects for separate and flexible control over audio and video.
• Improves the channel event notification mechanism, making it easier for you to deal with reconnection.
• Provides more accurate and comprehensive error codes for troubleshooting.

Projects using jQuery and Bootstrap

Feature	Sample project location
Adjust video profile	/Demo/adjustVideoProfile
Audio mixing and audio effect	/Demo/audioMixingAndAudioEffect
Live streaming	/Demo/basicLive
Enable/disable Video/Audio track	/Demo/basicMute
Video call	/Demo/basicVideoCall
Cloud proxy	/Demo/cloudProxy
Custom video source	/Demo/customVideoSource
Display call status	/Demo/displayCallStats
Dual stream	/Demo/dualStream
Geofencing	/Demo/geoFencing
Join multiple channels	/Demo/joinMultipleChannel
Push stream to CDN	/Demo/pushStreamToCDN
Control recording devices	/Demo/recordingDeviceControl
Custom rendering	/Demo/selfRendering
Custom Capturing	/Demo/selfCapturing
Share the screen	/Demo/shareTheScreen
Video beauty effect	/Demo/videoBeautyEffect

How to run the sample projects

Prerequisites

You need a supported browser to run the sample projects. See Product Overview for a list of supported browsers.

Steps to run

1. Use a supported browser to open Demo/index.html and select a demo.
2. In the demo page, enter your App ID, token, and channel name and join the channel.
   • See Get Started with Agora to learn how to get an App ID and token. You can get a temporary access token to quickly try out this sample project.
   • The channel name must be the same as the channel ID used to generate the token.

Projects using React.js

Feature	Sample project location
React api example	/react/api-examples

How to run the sample projects

Prerequisites

• You need a supported browser to run the sample projects. See Product Overview for a list of supported browsers.
• npm

Steps to run the ReactDemo

1. Navigate to /react/api-examples and run the following command to install dependencies.

   npm install

2. Use the following command to run the sample project.

   npm run dev

3. In the demo page, enter your App ID, token, and channel name and join the channel.

   • See Get Started with Agora to learn how to get an App ID and token. You can get a temporary access token to quickly try out this sample project.
   • The channel name must be the same as the channel ID used to generate the token.

Projects using Vue.js

Feature	Sample project location
Vue api example	/vue/api-examples

How to run the sample projects

Prerequisites

• You need a supported browser to run the sample projects. See Product Overview for a list of supported browsers.
• npm

Steps to run the VueDemo

1. Navigate to /vue/api-examples and run the following command to install dependencies.

   npm install

2. Use the following command to run the sample project.

   npm run dev

3. In the demo page, enter your App ID, token, and channel name and join the channel.

   • See Get Started with Agora to learn how to get an App ID and token. You can get a temporary access token to quickly try out this sample project.
   • The channel name must be the same as the channel ID used to generate the token.

Reference

• Web SDK 4.x Product Overview
• Web SDK 4.x API Reference
• Online demo deployed from this repo

Feedback

If you have any problems or suggestions regarding the sample projects, feel free to file an issue.

Related resources

• Check our FAQ to see if your issue has been recorded.
• Dive into Agora SDK Samples to see more tutorials
• Take a look at Agora Use Case for more complicated real use case
• Repositories managed by developer communities can be found at Agora Community
• If you encounter problems during integration, feel free to ask questions in Stack Overflow

License

The sample projects are under the MIT license. See the LICENSE file for details.

api-examples-web's Issues

Project slows down when we add more than 5 users

Project slows down when we add more than 5 users and system also.

push stream to CDN fails with error code 451

Running the push stream to CDN demo from the web code (without changes) I get an error code:

AgoraRTCError LIVE_STREAMING_INVALID_ARGUMENT: data: {"code":451}

I've covered the channel and app id in the following log, but this shows the error. I've verified that the app ID includes the transcoding service and that the token and channel are correct (the host video shows up in my channel correctly).

Here is the log:

[Log] 13:12:26:929 Agora-SDK [DEBUG]: – "[lock-client-publish-6] is created." (AgoraRTC_N.js, line 400)
[Log] 13:12:26:929 Agora-SDK [DEBUG]: – "[lock-client-leave-2] is locked, current queue 1." (AgoraRTC_N.js, line 400)
[Log] 13:12:26:930 Agora-SDK [INFO]: – "[client-29f87] Leaving channel repeated, success" (AgoraRTC_N.js, line 401)
[Log] 13:12:26:930 Agora-SDK [DEBUG]: – "[lock-client-leave-2] is not locked, current queue 0." (AgoraRTC_N.js, line 400)
[Log] client leaves channel success (pushStreamToCDN.js, line 214)
[Log] 13:12:27:900 Agora-SDK [INFO]: – "[client-29f87] start join channel " (AgoraRTC_N.js, line 401)
[Log] 13:12:27:900 Agora-SDK [INFO]: – "[client-29f87] connection state change: DISCONNECTED -> CONNECTING" (AgoraRTC_N.js, line 401)
[Log] 13:12:27:901 Agora-SDK [INFO]: – "[client-29f87] set client role to host" (AgoraRTC_N.js, line 401)
[Log] 13:12:28:149 Agora-SDK [DEBUG]: – "getUserAccount Success 1 => 12883" (AgoraRTC_N.js, line 400)
[Log] 13:12:28:149 Agora-SDK [DEBUG]: – "[client-29f87] Connect to choose_server:" – "https://webrtc2-ap-web-1.agora.io/api/v1" (AgoraRTC_N.js, line 400)
[Log] 13:12:28:149 Agora-SDK [DEBUG]: – "[client-29f87] Connect to choose_server:" – "https://webrtc2-ap-web-2.agoraio.cn/api/v1" (AgoraRTC_N.js, line 400)
[Log] 13:12:28:226 Agora-SDK [DEBUG]: – "[gateway-client-29f87] start connect, url: wss://154-86-156-198.edge.agora.io:4710" (AgoraRTC_N.js, line 400)
[Log] 13:12:28:356 Agora-SDK [DEBUG]: – "[gateway-client-29f87] websocket opened:" – "wss://154-86-156-198.edge.agora.io:4710" (AgoraRTC_N.js, line 400)
[Log] 13:12:28:389 Agora-SDK [INFO]: – "[client-29f87] connection state change: CONNECTING -> CONNECTED" (AgoraRTC_N.js, line 401)
[Log] 13:12:28:390 Agora-SDK [DEBUG]: – "[client-29f87] Connected to gateway server" (AgoraRTC_N.js, line 400)
[Log] 13:12:28:390 Agora-SDK [INFO]: – "[client-29f87] Joining channel success: " (AgoraRTC_N.js, line 401)
[Log] 13:12:28:391 Agora-SDK [INFO]: – "start create microphone audio track with config" – "{}" – "trackId" – "track-ecb6b93e" (AgoraRTC_N.js, line 401)
[Log] 13:12:28:393 Agora-SDK [DEBUG]: – "[track-ecb6b93e] GetUserMedia" – "{"audio":{}}" (AgoraRTC_N.js, line 400)
[Log] 13:12:28:393 Agora-SDK [DEBUG]: – "[lock-safari-1] is locked, current queue 1." (AgoraRTC_N.js, line 400)
[Warning] 13:12:28:474 Agora-SDK [WARNING]: – "[client-29f87] Choose server https://webrtc2-ap-web-2.agoraio.cn/api/v1 failed, message: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: unabl…" (AgoraRTC_N.js, line 401)
"[client-29f87] Choose server https://webrtc2-ap-web-2.agoraio.cn/api/v1 failed, message: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: unable to allocate services in this area, retry: false"
[Log] 13:12:30:769 Agora-SDK [DEBUG]: – "[lock-safari-1] is not locked, current queue 0." (AgoraRTC_N.js, line 400)
[Log] 13:12:30:770 Agora-SDK [DEBUG]: – "[lock-track-ecb6b93e-7] is created." (AgoraRTC_N.js, line 400)
[Log] 13:12:30:770 Agora-SDK [INFO]: – "create audio context" (AgoraRTC_N.js, line 401)
[Log] 13:12:30:775 Agora-SDK [DEBUG]: – "polyfill audio node" (AgoraRTC_N.js, line 400)
[Log] 13:12:30:776 Agora-SDK [DEBUG]: – "polyfill audio node" (AgoraRTC_N.js, line 400)
[Log] 13:12:30:995 Agora-SDK [INFO]: – "create microphone audio track success, trackId:" – "track-ecb6b93e" (AgoraRTC_N.js, line 401)
[Log] 13:12:30:996 Agora-SDK [INFO]: – "start create camera video track with config" – "{}" – "trackId" – "track-d64cd336" (AgoraRTC_N.js, line 401)
[Log] 13:12:30:996 Agora-SDK [DEBUG]: – "[track-d64cd336] GetUserMedia" – "{"video":{}}" (AgoraRTC_N.js, line 400)
[Log] 13:12:30:996 Agora-SDK [DEBUG]: – "[lock-safari-1] is locked, current queue 1." (AgoraRTC_N.js, line 400)
[Log] 13:12:33:219 Agora-SDK [DEBUG]: – "[lock-safari-1] is not locked, current queue 0." (AgoraRTC_N.js, line 400)
[Log] 13:12:33:219 Agora-SDK [DEBUG]: – "[lock-track-d64cd336-8] is created." (AgoraRTC_N.js, line 400)
[Log] 13:12:33:221 Agora-SDK [INFO]: – "create camera video success, trackId:" – "track-d64cd336" (AgoraRTC_N.js, line 401)
[Log] 13:12:33:221 Agora-SDK [DEBUG]: – "[track-track-d64cd336] start video playback" – "{}" (AgoraRTC_N.js, line 400)
[Log] 13:12:33:222 Agora-SDK [DEBUG]: – "[track-d64cd336] video-element-status change none => init" (AgoraRTC_N.js, line 400)
[Log] 13:12:33:226 Agora-SDK [INFO]: – "[client-29f87] Publishing tracks, id track-d64cd336 ,track-ecb6b93e " (AgoraRTC_N.js, line 401)
[Log] 13:12:33:227 Agora-SDK [DEBUG]: – "[lock-client-publish-6] is locked, current queue 1." (AgoraRTC_N.js, line 400)
[Log] 13:12:33:227 Agora-SDK [DEBUG]: – "[client-29f87] publish high stream" (AgoraRTC_N.js, line 400)
[Log] 13:12:33:232 Agora-SDK [DEBUG]: – "[client-29f87-pub-1] add video track to pc" (AgoraRTC_N.js, line 400)
[Log] 13:12:33:232 Agora-SDK [DEBUG]: – "[client-29f87-pub-1] set pc rtp sender" (2) (AgoraRTC_N.js, line 400)
{maxBitrate: undefined}
"balanced"
[Log] 13:12:33:233 Agora-SDK [DEBUG]: – "[client-29f87-pub-1] add audio track to pc" (AgoraRTC_N.js, line 400)
[Log] 13:12:33:238 Agora-SDK [DEBUG]: – "[track-d64cd336] video-element-status change init => playing" (AgoraRTC_N.js, line 400)
[Log] 13:12:33:238 Agora-SDK [DEBUG]: – "[track-d64cd336] video-element-status change playing => waiting" (AgoraRTC_N.js, line 400)
[Log] 13:12:33:240 Agora-SDK [DEBUG]: – "[client-29f87-pub-1] create and set offer success" (AgoraRTC_N.js, line 400)
[Log] 13:12:33:242 Agora-SDK [INFO]: – "[client-29f87-pub-1] connection-state: pub p2p connecting" (AgoraRTC_N.js, line 401)
[Log] 13:12:33:243 Agora-SDK [DEBUG]: – "[track-d64cd336] video-element-status change waiting => suspend" (AgoraRTC_N.js, line 400)
[Log] 13:12:33:274 Agora-SDK [DEBUG]: – "[client-29f87-pub-1] set answer success" (AgoraRTC_N.js, line 400)
[Log] 13:12:33:274 Agora-SDK [INFO]: – "[client-29f87-pub-1] ice-state: pub p2p checking" (AgoraRTC_N.js, line 401)
[Log] 13:12:33:309 Agora-SDK [DEBUG]: – "[pc-1] local candidate count" – 3 (AgoraRTC_N.js, line 400)
[Log] 13:12:33:375 Agora-SDK [INFO]: – "[client-29f87-pub-1] ice-state: pub p2p connected" (AgoraRTC_N.js, line 401)
[Log] 13:12:33:377 Agora-SDK [DEBUG]: – "[lock-client-publish-6] is not locked, current queue 0." (AgoraRTC_N.js, line 400)
[Log] 13:12:33:377 Agora-SDK [INFO]: – "[client-29f87] Publish success, id track-d64cd336 ,track-ecb6b93e " (AgoraRTC_N.js, line 401)
[Log] publish success (pushStreamToCDN.js, line 111)
[Log] 13:12:33:381 Agora-SDK [INFO]: – "[client-29f87-pub-1] connection-state: pub p2p connected" (AgoraRTC_N.js, line 401)
[Log] 13:12:33:381 Agora-SDK [INFO]: – "[client-29f87-pub-1] ice-state: pub p2p completed" (AgoraRTC_N.js, line 401)
[Log] 13:12:34:848 Agora-SDK [DEBUG]: – "[lock-live-streaming-9] is created." (AgoraRTC_N.js, line 400)
[Log] 13:12:34:852 Agora-SDK [DEBUG]: – "[client-29f87] start live streaming https://cdn3.wowza.com/1/VXBkNGV2VEF4a2dV/WlA3Vmpr/hls/live/playlist.m3u8, mode: mix_streaming" (AgoraRTC_N.js, line 400)
[Log] 13:12:34:852 Agora-SDK [DEBUG]: – "[lock-live-streaming-9] is locked, current queue 1." (AgoraRTC_N.js, line 400)
[Log] 13:12:35:81 Agora-SDK [DEBUG]: – "[track-d64cd336] video-element-status change suspend => canplay" (AgoraRTC_N.js, line 400)
[Log] 13:12:35:81 Agora-SDK [DEBUG]: – "[track-d64cd336] video-element-status change canplay => playing" (AgoraRTC_N.js, line 400)
[Log] 13:12:35:158 Agora-SDK [DEBUG]: – "[live-streaming] start connect, url: wss://23-236-99-190.edge.agora.io:30012?serviceName=mix_streaming" (AgoraRTC_N.js, line 400)
[Log] 13:12:35:240 Agora-SDK [DEBUG]: – "[track-d64cd336] current video dimensions:" – 640 – 480 (AgoraRTC_N.js, line 400)
[Log] 13:12:35:405 Agora-SDK [DEBUG]: – "[live-streaming] websocket opened:" – "wss://23-236-99-190.edge.agora.io:30012?serviceName=mix_streaming" (AgoraRTC_N.js, line 400)
[Error] 13:12:35:468 Agora-SDK [ERROR]: – "AgoraRTCError LIVE_STREAMING_INVALID_ARGUMENT: data: {"code":451}"
log (AgoraRTC_N.js:401:270)
error (AgoraRTC_N.js:399:382)
throw (AgoraRTC_N.js:404:522)
(anonymous function) (AgoraRTC_N.js:962:253)
asyncFunctionResume
(anonymous function)
promiseReactionJobWithoutPromise
[Log] 13:12:35:469 Agora-SDK [DEBUG]: – "[lock-live-streaming-9] is not locked, current queue 0." (AgoraRTC_N.js, line 400)
[Error] live streaming error: – "AgoraRTCError LIVE_STREAMING_INVALID_ARGUMENT: "
(anonymous function) (pushStreamToCDN.js:186)
asyncFunctionResume
(anonymous function)
promiseReactionJobWithoutPromise
promiseReactionJob

OpenLive can't run

我在 .env 中填入我的项目的appid和临时token，并且chaner name 也是对的。但是demo一直提示说token无效

Invalid token, authorized failed

Hi,

I am following the documentation https://docs.agora.io/en/voice-calling/develop/authentication-workflow

After applying all the steps I am facing the following error:

Agora-SDK [ERROR]: [client-729ce] join number: 1, Joining channel failed, rollback AgoraRTCException: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: flag: 4096, message: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: invalid token, authorized failed

This is what I have configured in agora.io console:

Could you please help?
Thanks

Screen share

i have implemented the Agora RTC video call and i tried to implement the screen share functionality with this
let defaultConfig = {
streamID: uid,
audio: true,
video: false,
screen: true,
};
let stream = AgoraRTC.createStream(defaultConfig);
and i can able to share the screen of User 1 but, i couldn't get the screen stream in the other User 2 window.
can someone help me to fix this issue, thanks in advance.

localTracks.audioTrack.setEnabled(false) not working

Describe the bug

I have tried the example and everything worked fine but Mute function.

const onMute = async () => {

if (localTracks.audioTrack && localTracks.audioTrack._enabled) {
console.log("onMute true")
await localTracks.audioTrack.setEnabled(false)
} else {
console.log("onMute false")
await localTracks.audioTrack.setEnabled(true)
}
}

When I call onMute, I can see "onMute true" on the console, but it is not muted.

To Reproduce
Steps to reproduce the behavior:

1. Call onMute during the live

Expected behavior
Mute audio

Desktop (please complete the following information):

• OS: Mac OS
• Browser: Chrome
• Version: 4.13.0

I want to build a twitch clone but i couldnt understand how to use obs with agora

i want to build a Twitch clone with agora and nextjs. first, i thought i have to use interactive live streaming service but then i see that i can start streams from my website and not from obs. i've did some research and i guess i need a rtmp server. i found node media server(https://github.com/illuspas/Node-Media-Server). running node media server and start my stream with my node media server's port and rtmp url, and also i can see my stream on node media server's admin panel. but i couldn't find where to use agora in this situation. I also have a mobile app working with agora and it works fine, but how can i also watch same streams with different devices? with basic terms, how can i start a live stream from obs to my nextjs website with agora?

i've tried agora interactive live streaming, found media pull and media push services, tried node media server.

怎么建立通道

您好，我这边项目启动起来了，也申请了AppId和token,但是怎么去生成通道呢？

Unable to set volume indicator interval

Would you recommend instead querying the track's volume at a faster rate than rely on the volume Indicator callback?

OPEN-LIVE的demo报错频道名未定义

在哪里个文件设置频道名，只在文档里看到appid设置方法，频道名在哪个文件设置，应该怎么设置。

user-info-updated emits wrong state about video audio initial two states

When the user first joins 'user-info-updated' event on IAgoraRTCClient emits enable-local-video instead of unmute-video and disable-local-video instead of mute-video for remote user this happens only with the initial two states subsequent states are accurate.

I have this happening on version 4.13.0

Agora Web SDK v4 SEND_VIDEO_BITRATE_TOO_LOW and SEND_AUDIO_BITRATE_TOO_LOW

I am implementing Agora v4 in my application. When I am trying to publish my local tracks, it happens with success, but then I receive the following errors:

01:21:17:806 Agora-SDK [DEBUG]: [client-9e8ac] receive exception msg, code: 2001, msg: AUDIO_INPUT_LEVEL_TOO_LOW, uid: 4082215569 index.ts:269 01:21:17:807 Agora-SDK [DEBUG]: [client-9e8ac] receive exception msg, code: 2003, msg: SEND_AUDIO_BITRATE_TOO_LOW, uid: 4082215569 index.ts:269 01:21:17:807 Agora-SDK [DEBUG]: [client-9e8ac] receive exception msg, code: 1003, msg: SEND_VIDEO_BITRATE_TOO_LOW, uid: 4082215569

`

    const agoraAccessToken = await actions.auth.getAgoraAccessToken({ requestParams: {channel: props.config.channel}});

    let uid = await AgoraClient.join(props.config.appId, props.config.channel, agoraAccessToken);
    
    let audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
    let videoTrack = await AgoraRTC.createCameraVideoTrack();

    await AgoraClient.publish([audioTrack, videoTrack]);

`

adjustVideoProfile.js contains incorrect comments

The comment here applies to Web SDK 3.x only:

// you can find all the agora preset video profiles here https://docs.agora.io/cn/Voice/API%20Reference/web/interfaces/agorartc.stream.html#setvideoprofile
var videoProfiles = [
  { label: "480p_1", detail: "640×480, 15fps, 500Kbps", value: "480p_1" },
  { label: "480p_2", detail: "640×480, 30fps, 1000Kbps", value: "480p_2" },
  { label: "720p_1", detail: "1280×720, 15fps, 1130Kbps", value: "720p_1" },
  { label: "720p_2", detail: "1280×720, 30fps, 2000Kbps", value: "720p_2" },
  { label: "1080p_1", detail: "1920×1080, 15fps, 2080Kbps", value: "1080p_1" },
  { label: "1080p_2", detail: "1920×1080, 30fps, 3000Kbps", value: "1080p_2" },
  { label: "200×640", detail: "200×640, 30fps", value: { width: 200, height: 640, frameRate: 30 } } // custom video profile
]

The link for Web SDK 4.x is: https://docs.agora.io/cn/Video/API%20Reference/web_ng/globals.html#videoencoderconfigurationpreset

setClientRole not working after joining a channel

Hello all,

if I use client.setClientRole after joining a channel and then use client.publish() it says "AgoraRTCError INVALID_OPERATION: audience can not publish stream";

I think we can use setClientRole after joining as an audience. I am using "agora-rtc-sdk-ng" version "^4.7.0" for Agora SDK. Please help if it is bug or I am doing something wrong.

Thank you in advance

Chrome crashes on h.264 dual stream

When I run the sample code basicVideoCall.js with some modifications, and repeat Join and Leave, Google Chrome often freezes.

OS: Windows 10 Pro
Chrome Version: 92.0.4515.131（Official Build） （64 bit）

The modifications are as follows.

• Create an RTC client with h.264, dualstream

  var client = AgoraRTC.createClient({ mode: "rtc", codec: "h264" });
  client.enableDualStream().then(() => {
    console.log("Enable Dual stream success!");
    client.setLowStreamParameter({
      bitrate: 256,
      framerate: 1,
      width: 160,
      height: 90,
    });
  }).catch(err => {
    console.err(err);
  });

• Add parameters to AudioTrack and VideoTrack.

    [ options.uid, localTracks.audioTrack, localTracks.videoTrack ] = await Promise.all([
      // Join the channel.
      client.join(options.appid, options.channel, options.token || null, options.uid || null),
      // Create tracks to the local microphone and camera.
      AgoraRTC.createMicrophoneAudioTrack({
        AEC: true,
        AGC: true,
        ANS: true,
        encoderConfig: {
          bitrate: 128
        }
      }),
      AgoraRTC.createCameraVideoTrack({
        encoderConfig: {
          width: 1920,
          height: 1080,
          bitrateMin: 1000,
          bitrateMax: 2000,
          frameRate: 30,
        }
      })
    ]);

我们调用 enableLogUpload 之后，我们在哪可以看到上传的日志？

如题

Error publishing on Agora Web SDK v4

I followed the steps as mentioned in the docs. I was earlier using agora v3.6.0 and everything was working fine. I want to upgrade to Agora v4 which isn't backward compatible, but looked easy enough to implement.

I am receiving the following error after I publish my local tracks.

AgoraRTC_N-production.js:637 Uncaught (in promise) TypeError: this.report.forEach is not a function
    at b.<anonymous> (AgoraRTC_N-production.js:637)
    at AgoraRTC_N-production.js:175
    at Object.next (AgoraRTC_N-production.js:176)
    at g (AgoraRTC_N-production.js:174)

-- Code

`
import AgoraRTC from 'agora-rtc-sdk-ng';
const AgoraClient = AgoraRTC.createClient({ mode: 'rtc', codec: "h264" });

    // inside useEffect.
    const agoraAccessToken = await actions.auth.getAgoraAccessToken({ requestParams: {channel: props.config.channel}});
    let uid = await AgoraClient.join(props.config.appId, props.config.channel, agoraAccessToken);

    let audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
    let videoTrack = await AgoraRTC.createCameraVideoTrack();

    await AgoraClient.publish([audioTrack, videoTrack]);

`

@iceshou 您的token是怎么生成的呢

@iceshou 您的token是怎么生成的呢
同样的token和uid，使用这个demo是否可以成功?
https://webdemo.agora.io/basicVideoCall/index.html

Originally posted by @plutoless in #58 (comment)

web demo 提示 CAN_NOT_GET_GATEWAY_SERVER 错误

请问下这个错误：

运行 basicVideoCall/index.html后，填入appid,token,channel后，点击join无反应，查询浏览器控制台显示以下的错误：

14:55:14:88 Agora-SDK [ERROR]: [client-f541a] join number: 1, Joining channel failed, rollback AgoraRTCException: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: flag: 4096, message: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: invalid vendor key, can not find appid
at vO (https://download.agora.io/sdk/release/AgoraRTC_N.js:6:15168)
at TO.e.gatewayInfo.IT.joinChooseServer.lts (https://download.agora.io/sdk/release/AgoraRTC_N.js:6:12767)
at async https://download.agora.io/sdk/release/AgoraRTC_N.js:5:123411

前面页面初始化media device 是正常的。

尝试下 Edge和Chrome都是相同的错误。

play warning: DOMException: The play() request was interrupted by a call to pause()

Hi
I have been facing this issue more frequently. I tried to look at the issue in google but nothing helps.
is there any workaround to fix this issue?

Steps to reproduce
1.Join video call from the web
2.Join from React-Native app
3.Toggle Video from react native app (setEnabled to false then setEnabled to true)
4.Video is not rendering in web

This is my log on web
10:35:21:70 Agora-SDK [DEBUG]: [client-6e26a] receive mute message 8626ad97-794c-4f9d-8e45-f1e4fe43a318 video true AgoraRTC_N-production.js:394 10:35:21:72 Agora-SDK [DEBUG]: [client-6e26a] user-info-update, uid: 8626ad97-794c-4f9d-8e45-f1e4fe43a318, msg: mute-video AgoraRTC_N-production.js:394 10:35:21:74 Agora-SDK [DEBUG]: [client-6e26a-sub-2] update subscribe options [a: true, v: true] -> [a: true, v: false] AgoraRTC_N-production.js:394 10:35:21:76 Agora-SDK [INFO]: [track-track-43c580ea] is destroyed AgoraRTC_N-production.js:394 10:35:21:86 Agora-SDK [DEBUG]: [track-track-43c580ea] stop video playback AgoraRTC_N-production.js:394 10:35:21:88 Agora-SDK [INFO]: [client-6e26a] remote user 8626ad97-794c-4f9d-8e45-f1e4fe43a318 unpublished video AgoraRTC_N-production.js:394 10:35:21:163 Agora-SDK [DEBUG]: [track-43c580ea] video-element-status change playing => abort AgoraRTC_N-production.js:394 10:35:21:164 Agora-SDK [DEBUG]: [track-43c580ea] video-element-status change abort => emptied AgoraRTC_N-production.js:394 10:35:45:194 Agora-SDK [DEBUG]: [client-6e26a] receive mute message 8626ad97-794c-4f9d-8e45-f1e4fe43a318 video false AgoraRTC_N-production.js:394 10:35:45:195 Agora-SDK [DEBUG]: [client-6e26a] user-info-update, uid: 8626ad97-794c-4f9d-8e45-f1e4fe43a318, msg: unmute-video AgoraRTC_N-production.js:394 10:35:45:195 Agora-SDK [INFO]: [client-6e26a] remote user 8626ad97-794c-4f9d-8e45-f1e4fe43a318 published video AgoraRTC_N-production.js:394 10:35:45:196 Agora-SDK [INFO]: [client-6e26a] subscribe user 8626ad97-794c-4f9d-8e45-f1e4fe43a318, mediaType: video AgoraRTC_N-production.js:394 10:35:45:196 Agora-SDK [DEBUG]: [lock-sub-8626ad97-794c-4f9d-8e45-f1e4fe43a318-10] is locked, current queue 1. AgoraRTC_N-production.js:394 10:35:45:197 Agora-SDK [DEBUG]: [client-6e26a-sub-2] update subscribe options [a: true, v: false] -> [a: true, v: true] AgoraRTC_N-production.js:394 10:35:45:197 Agora-SDK [DEBUG]: [client-6e26a-sub-2] emit pc ontrack after subscribe video MediaStreamTrack {kind: "video", id: "ad3e82f2-ec0f-42d3-aa99-055c35d8c168", label: "ad3e82f2-ec0f-42d3-aa99-055c35d8c168", enabled: true, muted: true, …} AgoraRTC_N-production.js:394 10:35:45:200 Agora-SDK [INFO]: [client-6e26a-sub-2] create remote video track: track-a5428275 AgoraRTC_N-production.js:394 10:35:45:201 Agora-SDK [DEBUG]: [client-6e26a] send subscribe change, audio: true, video: true AgoraRTC_N-production.js:394 10:35:45:311 Agora-SDK [DEBUG]: [lock-sub-8626ad97-794c-4f9d-8e45-f1e4fe43a318-10] is not locked, current queue 0. AgoraRTC_N-production.js:394 10:35:45:312 Agora-SDK [INFO]: [client-6e26a] subscribe success user 8626ad97-794c-4f9d-8e45-f1e4fe43a318, mediaType: video AgoraRTC_N-production.js:394 10:35:45:345 Agora-SDK [DEBUG]: [track-track-a5428275] start video playback {} AgoraRTC_N-production.js:394 10:35:45:345 Agora-SDK [DEBUG]: [track-a5428275] video-element-status change none => init raf.js:39 [Violation] 'requestAnimationFrame' handler took 63ms AgoraRTC_N-production.js:394 10:35:45:472 Agora-SDK [DEBUG]: [track-a5428275] video-element-status change init => playing AgoraRTC_N-production.js:394 10:35:45:473 Agora-SDK [DEBUG]: [track-a5428275] video-element-status change playing => waiting AgoraRTC_N-production.js:394 10:35:45:479 Agora-SDK [DEBUG]: [track-a5428275] video-element-status change waiting => paused AgoraRTC_N-production.js:394 10:35:45:480 Agora-SDK [DEBUG]: [track-track-a5428275] video element paused, auto resume AgoraRTC_N-production.js:394 10:35:45:480 Agora-SDK [DEBUG]: [track-a5428275] playback interrupted AbortError: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22 react_devtools_backend.js:2842 10:35:45:480 Agora-SDK [WARNING]: [track-a5428275] play warning: DOMException: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22 overrideMethod @ react_devtools_backend.js:2842 log @ AgoraRTC_N-production.js:395 warning @ AgoraRTC_N-production.js:393 (anonymous) @ AgoraRTC_N-production.js:788 Promise.catch (async) play @ AgoraRTC_N-production.js:788 play @ AgoraRTC_N-production.js:958 (anonymous) @ VideoContainer.jsx:136 commitHookEffectListMount @ react-dom.development.js:19731 commitPassiveHookEffects @ react-dom.development.js:19769 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 flushPassiveEffectsImpl @ react-dom.development.js:22853 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushPassiveEffects @ react-dom.development.js:22820 (anonymous) @ react-dom.development.js:22699 workLoop @ scheduler.development.js:597 flushWork @ scheduler.development.js:552 performWorkUntilDeadline @ scheduler.development.js:164 AgoraRTC_N-production.js:394 10:35:45:483 Agora-SDK [DEBUG]: [track-a5428275] video-element-status change paused => playing AgoraRTC_N-production.js:394 10:35:45:483 Agora-SDK [DEBUG]: [track-a5428275] video-element-status change playing => waiting AgoraRTC_N-production.js:394 10:35:46:346 Agora-SDK [DEBUG]: [track-a5428275] video-element-status change waiting => destroyed

Why Server agora java can't use uid ??

Why Server agora java can't use uid ??
I was test use uid but token was generated can't use to join channel.
If I don't use uid and uid has value 0, This token was generated can use to join channel.

I don't know any server has this problem but if you has problem with token, I can set uid = 0.

Not receiving publish and unpublish events

Description
The client publishes and unpublish events are not received.
Tested with two browsers safari and firefox. Not receiving client events from safari browser.
When I enable /disable audio and video using setEnable function. It happens only between firefox and safari browsers

Name	Version
agora-rtc-sdk-ng	^4.9.3 `
Firefox	97.0 (64-bit)
Safari	14.1.1

Safari-logs

Firefox-logs

Please suggest solution

Thank you.

Uncaught (in promise) TypeError: a is not a function while joining the channel with JOIN function

Agora sdk Version :- 4.8.2

Getting the above error which joining the channel.

Attaching the file link and error trace logs below

Browser.js Formated link :- https://drive.google.com/file/d/1az01QPOmPZddo9JMoC0ptTrsxCK_6MLS/view?usp=sharing

Error :-
Uncaught (in promise) TypeError: a is not a function
at browser.js:formatted:14644:34

	(anonymous)	@	browser.js:formatted:14644
	await in (anonymous) (async)
	t	@	browser.js:formatted:5745
	qR	@	browser.js:formatted:14630
	(anonymous)	@	browser.js:formatted:25331
	(anonymous)	@	browser.js:formatted:25341
	(anonymous)	@	browser.js:formatted:25313
	updateConfigDistribute	@	browser.js:formatted:25379
	await in updateConfigDistribute (async)
	startGetConfigDistribute	@	browser.js:formatted:25279
	join	@	browser.js:formatted:46744
	await in join (async)
	(anonymous)	@	browser.js:formatted:72207
	l	@	browser.js:formatted:72631
	(anonymous)	@	browser.js:formatted:72609
	(anonymous)	@	browser.js:formatted:72661
	r	@	browser.js:formatted:1412
	a	@	browser.js:formatted:1426
	(anonymous)	@	browser.js:formatted:1431
	(anonymous)	@	browser.js:formatted:1423
	(anonymous)	@	browser.js:formatted:72283
	(anonymous)	@	browser.js:formatted:5253
	n	@	browser.js:formatted:279
	value	@	browser.js:formatted:5249
	value	@	browser.js:formatted:4100
	(anonymous)	@	browser.js:formatted:4194
	n	@	browser.js:formatted:279
	value	@	browser.js:formatted:4177
	start	@	demo.js:176
	onclick	@	demo.html:50

CAN_NOT_GET_GATEWAY_SERVER: dynamic use static key

Got some credentials from a colleague, trusted them :)

Create Client. OK
Join Channel brings this:

AgoraRTC_N.js:5 15:54:58:287 Agora-SDK [ERROR]: [client-be997] join number: 1, Joining channel failed, rollback AgoraRTCException: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: flag: 4096, message: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: dynamic use static key
    at cA (https://download.agora.io/sdk/release/AgoraRTC_N.js:6:19351)
    at e.gatewayInfo.rI.joinChooseServer.lts (https://download.agora.io/sdk/release/AgoraRTC_N.js:6:16937)
    at async https://download.agora.io/sdk/release/AgoraRTC_N.js:5:139507

index.js:63 AgoraRTCException: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: flag: 4096, message: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: dynamic use static key
    at cA (https://download.agora.io/sdk/release/AgoraRTC_N.js:6:19351)
    at e.gatewayInfo.rI.joinChooseServer.lts (https://download.agora.io/sdk/release/AgoraRTC_N.js:6:16937)
    at async https://download.agora.io/sdk/release/AgoraRTC_N.js:5:139507

basicVideoCall项目中用户无法看到主播视频

你好：

我在运行该项目中，发现主播在join()之后有await client.publish(Object.values(localTracks));的函数，是否可以理解为主播把本地流推到远端中，然后用户在进入该房间可以看到该主播的远端流。

事实是：
① 当pc端主播创建一个房间后，本地流ok， √
② 用户进入房间后，在pc中，用户的远端流ok，本地流也ok √
③ 在用户的小程序中（也是官方示例demo），本地流ok，看不到pc端主播的远端流、×

在看你们的文档中，https://docportal.shengwang.cn/cn/All/API%20Reference/web_ng/interfaces/iagorartcclient.html#publish和https://docportal.shengwang.cn/cn/All/API%20Reference/web_ng/interfaces/iagorartcclient.html#setclientrole我注意到：

通信场景（mode 设为 "rtc"）无法使用本方法，默认所有用户都是 "host" 角色。

setClientRole(role: ClientRole, options?: ClientRoleOptions): Promise

用户角色 (role) 确定用户在 SDK 层的权限，包含是否可以发送流、是否可以接收流、是否可以推流到 CDN 等。用户角色有 "host"（主播）和 "audience"（观众）。主播既可发布轨道，也可订阅轨道；观众不能进行 publish 操作。直播场景中的用户角色默认为观众。如需发布音视频，必须先调用本方法切换角色为主播。

然后在代码中已经设置了mode为rtc模式，如下：

client = AgoraRTC.createClient({
      mode: "rtc",
      codec: getCodec()
});

那么按理来说，pc端中进入或创建一个房间，小程序端进入同样的房间后，小程序端用户应该可以看到pc端的视频。还是说我哪里理解错了？

谢谢你们的解答

请教一下，自定义视频源和自定义音视频采集两个demo有啥区别

报错 TypeError: e.AudioBuffer is not a constructor

项目：https://github.com/AgoraIO/API-Examples-Web/tree/main/ReactDemo
问题：

1. 运行API-Examples-Web 项目ReactDemo目录报错：[ai-denoiser-processor] failed to pipe: TypeError: e.AudioBuffer is not a constructor
2. 未修改过任何代码，直接clone下来跑的

dualStream error and basicLive error

I got 5 error in web console for the two projects:

Failed to load resource: the server responded with a status of 404 ()
jquery-3.4.1.min.js:1 Failed to load resource: the server responded with a status of 404 ()
bootstrap.bundle.min.js:1 Failed to load resource: the server responded with a status of 404 ()
dualStream.js:18 Uncaught ReferenceError: $ is not defined
at dualStream.js:18
bootstrap.min.css:1

Tested with Chrome and Safari on Mac M1

AgoraRTCError UNEXPECTED_RESPONSE: ERR_SUBSCRIBE_REQUEST_INVALID: no such stream id

scene: when a user stays on the current page and replaces a new file online, this error will appear.
platform: web

Share Screen not working in React

import React from "react";
import AgoraRTC from "agora-rtc-sdk-ng";

var client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
var localTracks = {
  videoTrack: null,
  audioTrack: null,
};

let options = {
  appId: "2d265eac4ca3480688a95fa45278a645",
  channel: "DOCOSAN_VIDEO_735281632364294",
  token:
    "0062d265eac4ca3480688a95fa45278a645IABnyhOMybuPoP3yZIZgd6kvVd65GVx7R0HubfqfbcdAeICcvFarf75cIgBvv08B5wZlYQQAAQAAAAAAAwAAAAAAAgAAAAAABAAAAAAA",
  uid: 101371652,
`};`
var remoteUsers = {};
function App() {
  const handleShare = async () => {
    await joinShare();
  };
  const joinShare = async () => {
    try {
      client.on("user-published", handleUserPublished);
      client.on("user-unpublished", handleUserUnpublished);
      debugger;
      [options.uid, localTracks.audioTrack, localTracks.videoTrack] =
        await Promise.all([
          client.join(
            options.appid,
            options.channel,
            options.token || null,
            options.uid || null
          ),
          AgoraRTC.createMicrophoneAudioTrack(),
          AgoraRTC.createScreenVideoTrack(),
        ]);
      localTracks.videoTrack.play("local-player");
      document
        .getElementById("local-player-name")
        .textContent(`localVideo(${options.uid})`);
      await client.publish(Object.values(localTracks));
      console.log("publish success");
    } catch (error) {
      console.log("error");
    }
  };
  const handleUserPublished = (user, mediaType) => {
    const id = user.uid;
    remoteUsers[id] = user;
    subscribe(user, mediaType);
  };
  const subscribe = async (user, mediaType) => {
    const uid = user.uid;
    await client.subscribe(user, mediaType);
    console.log("subscribe success");
    if (mediaType === "video") {
      const player = `
        <div id="player-wrapper-${uid}">
          <p class="player-name">remoteUser(${uid})</p>
          <div id="player-${uid}" class="player"></div>
        </div>
      `;
      document.getElementById("remote-playerlist").append(player);
      user.videoTrack.play(`player-${uid}`);
    }
    if (mediaType === "audio") {
      user.audioTrack.play();
    }
  };
  function handleUserUnpublished(user) {
    const id = user.uid;
    delete remoteUsers[id];
    document.getElementById(`player-wrapper-${id}`).remove();
  }
  return (
    <div className="App">
      <h2 className="left-align">Agora Video Web SDK Quickstart</h2>
      <div className="row">
        <div>
          <button type="button" id="leave" onClick={handleShare}>
            SHARE
          </button>
        </div>
      </div>
      <div className="row video-group">
        <div className="col">
          <p id="local-player-name" className="player-name"></p>
          <div id="local-player" className="player"></div>
        </div>
        <div className="w-100"></div>
        <div className="col">
          <div id="remote-playerlist"></div>
        </div>
      </div>
    </div>
  );
}

export default App;

This is my code
I using agora-rtc-sdk-ng version 4.4.0
when i replace the parameters(token, uid, channel) with the example code it works, but it doesn't work with my code
I think have issues with version I using

Local camera not shown after granting camera use on Chrome

Tried on both Safari and Chrome, it did not work either..

Type: Basic Video Calling
On M1 Mac

Step1 : Entered valid AppId and channel name
Step2 : Click Join
Step3 : Granted access to camera and mic
-> Nothing happen.

示例问题

这个示例根本就用不了呀

OpenLive在首次加入时，接口请求的参数不对，导致接口一直报502

不确定是不是参数配置有误，首次加入时接口会报错。但直接进入详情，接口传参就是正常的。

[email protected]

web端 视频通话 浏览器支持到2k吗？

视频通话 2k画质 目前都什么平台支持呢？

Group Voice Call

Hello,
I'm trying to create a group voice call same as twitter space base on web.
Please is there any demo application for this?
Thank you

change audio source input on the fly!

in my current scenarion I want to have the ability to change the audioTracks on the fly I found on the documentation that it's possible to do so for the audio Track ,but couldn't find resource for audio tracks ,I've been using webRTC native api and I did a solution to

  peerConnection.removeTrack(oldSender);

  const newSender = peerConnection.addTrack(track, stream);

  const localSdp = await peerConnection.createOffer({ offerToReceiveAudio: 1 });
  await peerConnection.setLocalDescription(reply);

  const response = await sendOffer(peerConnection.localDescription);

  const description = new RTCSessionDescription(response);
  peerConnection.setRemoteDescription(description);

  return newSender;
}

thank you

calling AgoraRTC.createMicrophoneAndCameraTracks() does not show prompt permission for audio and camera in chrome

The loader is stuck because the prompt for permission of using the camera and audio devices is not showing in chrome

rtc.dummyTracks = await AgoraRTC.createMicrophoneAndCameraTracks(
{ microphoneId: device?.localAudio, config: { ANS: true } },
{ cameraId: device?.localVideo }
);
rtc.dummyTracks[1].play(user-${dummyId});

Why is the prompt not showing in the chrome but other browser does?

求一份没有压缩的SDK

想排查一些问题 想看sdk源码 但是没有找到未压缩的

Local audio track doesn't trigger event track-ended

I try to disconnect microphone or remove permissions. I can see debug message about ending the track. I can see event onMicrophoneChanged. But there is no event 'track-ended'.
Everything is ok for the video track

I can't Understand how to handle co-host.

I have implemented simple live streaming with a single host.
And users with role audience can join the stream. I want to add co-host functionality to it. But didn't find any demo or example.

Custom Audio Track

Echo issue in video call

Hi, I'm facing a continuous echo issue on a video call. I may be wrong I found that when I toggled the mic on/off it's happening. Please let me know any workaround for this
Using
"agora-rtc-sdk-ng": "^4.6.0",
This is my code
please tell me what I have done wrong .

 `const useVideoCall = (videoClient, screenClient) => {
  const [allUsers, setUsers] = useState([]);
  const [trackStatus, setTrackStatus] = useState({
    video: false,
    audio: false,
  });
  const [localVideoTrack, setLocalVideoTrack] = useState(undefined);
  const [localAudioTrack, setLocalAudioTrack] = useState(undefined);
  const [isLoggedIn, setLoggedIn] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const { chatDetails } = useVideoChatDetails();

  const createAudioAndVideoTrack = useCallback(async () => {
    try {
      const {
        videoCall: { uid },
      } = chatDetails;
      setIsLoading(true);
      const microphoneTrack = await AgoraRTC.createMicrophoneAudioTrack({
        AEC: true,
        ANS: true,
      });
      const cameraTrack = await AgoraRTC.createCameraVideoTrack();

      setLocalAudioTrack(microphoneTrack);
      setLocalVideoTrack(cameraTrack);
      setUsers((prevUsers) => [
        ...prevUsers,
        {
          videoTrack: cameraTrack,
          uid: uid,
        },
      ]);
      setTrackStatus({
        video: cameraTrack ? true : false,
        audio: microphoneTrack ? true : false,
      });
      setIsLoading(false);
    } catch (error) {}
  }, [chatDetails]);

  useEffect(() => {
    if (!isLoggedIn) {
      createAudioAndVideoTrack();
    }
  }, [createAudioAndVideoTrack, isLoggedIn]);

  const joinVideoCall = async () => {
    if (!videoClient || !chatDetails || isLoading) return;

    const {
      videoCall: { agoraToken, uid },
    } = chatDetails;

    try {
      await videoClient.join(
        chatDetails?.appId,
        chatDetails?.channelName,
        agoraToken,
        uid
      );
      init();
      videoClient.publish([localAudioTrack, localVideoTrack]);
      setLoggedIn(true);
    } catch (error) {}
  };


  const init = () => {
    videoClient.on("user-published", async (user, mediaType) => {
      await videoClient.subscribe(user, mediaType);
      console.log("subscribe success");
      //   updatePublishStatus(user);
      const remoteVideoTrack = user?.videoTrack || user?._videoTrack;
      const audio = user?.hasAudio;
      const video = user?.hasVideo;
      const id = user?.uid;
      if (mediaType === "video") {
        setUsers((preUser) => {
          return preUser.map((joinedUser) => {
            if (joinedUser?.uid === user?.uid) {
              return {
                ...user,
                videoTrack: remoteVideoTrack,
                video: video,
                audio: audio,
                uid: id,
              };
            }
            return joinedUser;
          });
        });
      }
      if (mediaType === "audio") {
        try {
          user.audioTrack.play();
          setUsers((prevUsers) => {
            return prevUsers.map((User) => {
              if (User.uid === user.uid) {
                return {
                  ...User,
                  videoTrack: remoteVideoTrack,
                  video: video,
                  audio: audio,
                  uid: id,
                };
              }
              return User;
            });
          });
        } catch (error) {}
      }
    });

    videoClient.on("user-unpublished", (user, type) => {
      console.log("unpublished", user, type);
      const remoteVideoTrack = user?.videoTrack || user?._videoTrack;
      const audio = user?.hasAudio;
      const video = user?.hasVideo;
      const id = user?.uid;
      if (type === "audio") {
        try {
          user.audioTrack.stop();
          setUsers((prevUsers) => {
            return prevUsers.map((User) => {
              if (User.uid === user.uid) {
                return {
                  ...User,
                  videoTrack: remoteVideoTrack,
                  video: video,
                  audio: audio,
                  uid: id,
                };
              }
              return User;
            });
          });
        } catch (error) {}
      }
      if (type === "video") {
        setUsers((prevUsers) => {
          return prevUsers.map((User) => {
            if (User.uid === user.uid) {
              return {
                ...User,
                videoTrack: remoteVideoTrack,
                video: video,
                audio: audio,
                uid: id,
              };
            }
            return User;
          });
        });
        
      }
    });

    videoClient.on("user-left", (user) => {
      console.log("leaving", user);
      setUsers((prevUsers) => {
        return prevUsers.filter((User) => User.uid !== user.uid);
      });
    });

    videoClient.on("user-joined", (user) => {
      setUsers((prevUsers) => {
        return [
          ...prevUsers,
          {
            ...user,
            videoTrack: undefined,
            video: false,
            audio: false,
            uid: user?.uid,
          },
        ];
      });
    });
  };

  const toggleAudio = (status) => {
    try {
      localAudioTrack.setEnabled(status);
    } catch (error) {}
  };
  const toggleVideo = (status) => {
    try {
      localVideoTrack.setEnabled(status);
    } catch (error) {}
  };

  return {
    toggleAudio,
    toggleVideo,
    joinVideoCall,
    allUsers,
    isLoggedIn,
  };
};`

Custom video source comes through extremely oversaturated

When using a custom video source from a video element on Chrome (have not tested on other browsers), the "remote" video stream is extremely over saturated. I've confirmed that the video stream captured from the video element is not the issue (by rendering the stream directly in a separate video element), and other remote streams render fine, so it appears to be something on the creation or transmission of the custom video track.

See screenshot from the custom video source demo below (left is the host publishing the sample.mp4, right is receiving it):

basicLive项目运行后，观众加入后看不到直播界面

basicLive项目运行后，主播角色进入可以看到直播界面，但是观众角色加入后看不到直播界面

cpu and memory usage 90%

I am implementing Agora v4 in my application.
The live stream video quality is not good,
Recorded live stream video has very high latency, As it happens it consumes almost 90% of cpu and memory usage.

OS: Windows 10
Environment: Web (React).
Package details :
agora-rtc-sdk-ng:"4.5.0"
php-sdk:
https://github.com/AgoraIO/Tools/tree/master/DynamicKey/AgoraDynamicKey/php

v4: addInjectStreamUrl doesnot working properly.

SDK Version 4.8.2

Issue Description:-
We are using addInjectStreamUrl function for injecting RTMP streaming which we are getting from our RTMP server. This function was working fine with v3. We recently updated SDK to v4 and we made changes as per V4. But the addInjectStreamUrl function is not working properly. This function stops working suddenly and sometimes it starts working automatically. Please suggest to us how we can fix this issue and this is a very critical release for our product.

Agora Logs Link :-
https://docs.google.com/document/d/1ZGoTymOPqsGGSNnF6Du3rri8UW7-OERSEszLAD6j5kQ/edit?usp=sharing

AgoraRTCException: AgoraRTCError NOT_SUPPORTED: your browser does not support setting the audio output device

Hi Agora Team,
I'm implementing voice call feature using agora-rtc-sdk-ng. But when I changed the output device, the error happened.

Here is my code

import AgoraRTC from 'agora-rtc-sdk-ng';

const client = AgoraRTC.createClient({ codec: 'h264', mode: 'rtc' });

await client.join(process.env.AGORA_APP_ID as string, channel, token || null, uid);
const localAudio = await AgoraRTC.createMicrophoneAudioTrack();
await localAudio.setMuted(false);

await localAudio.setDevice(inputId);
await localAudio.setPlaybackDevice(outputId);
await client.publish([localAudio]);

Your device: Google Chrome Version 108.0.5359.125 (Official Build) (64-bit)
Package: "agora-rtc-sdk-ng": "^4.15.1", "next": "13.0.3",

Update ReactDemo exemple

In API-Examples-Web/ReactDemo/src/Call.tsx, remove "audioTrack={localAudioTrack}" of line 40.

When you pass localAudioTrack to the "MediaPlayer" component, it executes localAudioTrack.play on the local audio, causing an echo. It can be confused with some kind of problem.

client.remoteUsers not wroking

Hey, I'm not using TypeScript here, but in my Next.js project, I'm constantly getting an empty array when I Array.from(client.remoteUsers).
Basically, I wanted to filter out some users by username, but I can't even access the array as I am getting client.remoteUsers as a typeof object.

I am stuck here from nearly 2 days. I don't understand what i'm doing wrong here. Console logging client.remoteUsers actually returns me an array. I cannot map / filter / Array.from() or any other operation. It's returning me an empty array.

const newA = client.remoteUsers.map((user)=>{
      return {videoTrack: user.videoTrack, audioTrack: user.audioTrack}
    });

console.log(newA) //empty even though it;s not.

setStudents(remoteUsers => Array.from(client.remoteUsers)); 

console.log(students); //empty array even though it;s not.

How to style the video player?

I understand that the sdk is responsible for appending the video player but the default styles for the player seems to be very poor and does not fulfill the requirements. Is there a way to style the player so that it looks like how modern player looks today with all the controls and features, etc.? Thanks