1 Star 0 Fork 0

agoraio-community / Electron-SDK

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
JoinChannelVideo.tsx 6.16 KB
Copy Edit Raw Blame History
guoxianzhe authored 2024-02-28 12:01 . feat: support 4.3.0 (#1130)
import {
ChannelProfileType,
ClientRoleType,
ErrorCodeType,
IRtcEngineEventHandler,
LocalVideoStreamReason,
LocalVideoStreamState,
RtcConnection,
RtcStats,
UserOfflineReasonType,
VideoCanvas,
VideoSourceType,
createAgoraRtcEngine,
} from 'agora-electron-sdk';
import React, { ReactElement } from 'react';
import {
BaseComponent,
BaseVideoComponentState,
} from '../../../components/BaseComponent';
import { AgoraButton, AgoraDropdown, AgoraView } from '../../../components/ui';
import Config from '../../../config/agora.config';
import { arrayToItems } from '../../../utils';
import { askMediaAccess } from '../../../utils/permissions';
interface State extends BaseVideoComponentState {
selectedUser?: number;
}
export default class JoinChannelVideo
extends BaseComponent<{}, State>
implements IRtcEngineEventHandler
{
protected createState(): State {
return {
appId: Config.appId,
enableVideo: true,
channelId: Config.channelId,
token: Config.token,
uid: Config.uid,
joinChannelSuccess: false,
remoteUsers: [],
startPreview: false,
};
}
/**
* Step 1: initRtcEngine
*/
protected async initRtcEngine() {
const { appId } = this.state;
if (!appId) {
this.error(`appId is invalid`);
}
this.engine = createAgoraRtcEngine();
this.engine.initialize({
appId,
logConfig: { filePath: Config.logFilePath },
// Should use ChannelProfileLiveBroadcasting on most of cases
channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
});
this.engine.registerEventHandler(this);
// Need granted the microphone and camera permission
await askMediaAccess(['microphone', 'camera']);
// Need to enable video on this case
// If you only call `enableAudio`, only relay the audio stream to the target channel
this.engine.enableVideo();
// Start preview before joinChannel
this.engine.startPreview();
this.setState({ startPreview: true });
}
/**
* Step 2: joinChannel
*/
protected joinChannel() {
const { channelId, token, uid } = this.state;
if (!channelId) {
this.error('channelId is invalid');
return;
}
if (uid < 0) {
this.error('uid is invalid');
return;
}
// start joining channel
// 1. Users can only see each other after they join the
// same channel successfully using the same app id.
// 2. If app certificate is turned on at dashboard, token is needed
// when joining channel. The channel name and uid used to calculate
// the token has to match the ones used for channel join
this.engine?.joinChannel(token, channelId, uid, {
// Make myself as the broadcaster to send stream to remote
clientRoleType: ClientRoleType.ClientRoleBroadcaster,
});
}
/**
* Step 3: leaveChannel
*/
protected leaveChannel() {
this.engine?.leaveChannel();
}
/**
* Step 4: releaseRtcEngine
*/
protected releaseRtcEngine() {
this.engine?.unregisterEventHandler(this);
this.engine?.release();
}
onError(err: ErrorCodeType, msg: string) {
super.onError(err, msg);
}
onJoinChannelSuccess(connection: RtcConnection, elapsed: number) {
super.onJoinChannelSuccess(connection, elapsed);
}
onLeaveChannel(connection: RtcConnection, stats: RtcStats) {
super.onLeaveChannel(connection, stats);
}
onUserJoined(connection: RtcConnection, remoteUid: number, elapsed: number) {
super.onUserJoined(connection, remoteUid, elapsed);
}
onUserOffline(
connection: RtcConnection,
remoteUid: number,
reason: UserOfflineReasonType
) {
super.onUserOffline(connection, remoteUid, reason);
}
onVideoDeviceStateChanged(
deviceId: string,
deviceType: number,
deviceState: number
) {
this.info(
'onVideoDeviceStateChanged',
'deviceId',
deviceId,
'deviceType',
deviceType,
'deviceState',
deviceState
);
}
onLocalVideoStateChanged(
source: VideoSourceType,
state: LocalVideoStreamState,
error: LocalVideoStreamReason
) {
this.info(
'onLocalVideoStateChanged',
'source',
source,
'state',
state,
'error',
error
);
}
protected renderUsers(): ReactElement | undefined {
return super.renderUsers();
}
protected renderVideo(user: VideoCanvas): ReactElement | undefined {
return super.renderVideo(user);
}
protected renderConfiguration(): ReactElement | undefined {
const { joinChannelSuccess, remoteUsers, selectedUser } = this.state;
return (
<>
{joinChannelSuccess ? (
<>
<AgoraDropdown
title={'Append renderer to remote users'}
items={arrayToItems(Array.from(new Set(remoteUsers)))}
value={selectedUser}
onValueChange={(value) => {
this.setState({ selectedUser: value });
}}
/>
<AgoraView>
<AgoraButton
title="Add"
onPress={() => {
if (selectedUser !== undefined) {
this.setState((prev) => {
return {
remoteUsers: [...prev.remoteUsers, selectedUser],
};
});
}
}}
/>
<AgoraButton
title="Remove"
onPress={() => {
if (selectedUser !== undefined) {
this.setState((prev) => {
const predicate = (it: number) => it === selectedUser;
const firstIndex = prev.remoteUsers.findIndex(predicate);
const lastIndex =
prev.remoteUsers.findLastIndex(predicate);
if (firstIndex !== lastIndex) {
prev.remoteUsers.splice(lastIndex, 1);
}
return {
remoteUsers: prev.remoteUsers,
};
});
}
}}
/>
</AgoraView>
</>
) : undefined}
</>
);
}
}
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/agoraio-community/Electron-SDK.git
git@gitee.com:agoraio-community/Electron-SDK.git
agoraio-community
Electron-SDK
Electron-SDK
main

Search

344bd9b3 5694891 D2dac590 5694891