From 0a45342bb5e217db3b4255753ff8d4397361d8cf Mon Sep 17 00:00:00 2001 From: gxz Date: Tue, 17 Dec 2024 11:30:21 +0800 Subject: [PATCH] chore: optimize --- .../VirtualBackground/VirtualBackground.tsx | 63 ++++++------------- 1 file changed, 19 insertions(+), 44 deletions(-) diff --git a/example/src/renderer/examples/advanced/VirtualBackground/VirtualBackground.tsx b/example/src/renderer/examples/advanced/VirtualBackground/VirtualBackground.tsx index cb8908de3..fa7164902 100644 --- a/example/src/renderer/examples/advanced/VirtualBackground/VirtualBackground.tsx +++ b/example/src/renderer/examples/advanced/VirtualBackground/VirtualBackground.tsx @@ -8,8 +8,6 @@ import { VideoSourceType, createAgoraRtcEngine, } from 'agora-electron-sdk'; -import { Checkbox, List } from 'antd'; -import { CheckboxValueType } from 'antd/lib/checkbox/Group'; import React, { ReactElement } from 'react'; import { SketchPicker } from 'react-color'; @@ -35,7 +33,6 @@ interface State extends BaseVideoComponentState { blur_degree: BackgroundBlurDegree; encodeAlpha: boolean; video_module_position: VideoModulePosition; - checked_video_module_position_list: CheckboxValueType[]; enableVirtualBackground?: boolean; } @@ -55,9 +52,6 @@ export default class VirtualBackground startPreview: false, encodeAlpha: true, video_module_position: VideoModulePosition.PositionPreEncoder, - checked_video_module_position_list: [ - VideoModulePosition.PositionPostCapturer, - ], background_source_type: BackgroundSourceType.BackgroundNone, color: 0xffffff, source: getResourcePath('agora-logo.png'), @@ -90,6 +84,8 @@ export default class VirtualBackground // If you only call `enableAudio`, only relay the audio stream to the target channel this.engine.enableVideo(); + // if you want to use the alpha channel, you need to set the following parameters to let remoteView support alpha channel + this.engine?.setParameters('{"rtc.video.dec_split_alpha":true}'); this.engine?.setVideoEncoderConfiguration({ advanceOptions: { encodeAlpha: true, @@ -100,9 +96,6 @@ export default class VirtualBackground handleStartPreview = () => { this.engine?.startPreview(); this.setState({ startPreview: true }); - console.log( - `startPreview with position:${this.state.video_module_position}` - ); }; handleStopPreview = () => { @@ -222,44 +215,12 @@ export default class VirtualBackground source, blur_degree, encodeAlpha, - checked_video_module_position_list, startPreview, + joinChannelSuccess, + video_module_position, } = this.state; return ( <> - <> -

local video module position

- { - let result = 0; - checkedValues.forEach((value: CheckboxValueType) => { - result |= value as number; - }); - this.setState({ - checked_video_module_position_list: checkedValues, - video_module_position: result, - }); - }} - > - - item.value !== VideoModulePosition.PositionPreRenderer ? ( - - } - title={item.label} - /> - - ) : undefined - } - /> - - ) : null} + { + this.setState({ + video_module_position: value + ? VideoModulePosition.PositionPostCapturer + : VideoModulePosition.PositionPreEncoder, + }); + }} + /> { this.setState({ encodeAlpha: value });