<https://example.livekit.io/中包含虚拟背景功能>，给出他的代码示例
# ask-aia
abundant-magician-17307
07/28/2025, 1:21 AMhttps://example.livekit.io/中包含虚拟背景功能，给出他的代码示例
t
tall-airline-16756
07/28/2025, 1:21 AMThanks for reaching out, 徐旭. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
tall-airline-16756
07/28/2025, 1:22 AMLiveKit provides virtual background functionality across multiple platforms. Below are examples for implementing this feature:
JavaScript/Web Implementation:
LiveKit offers the
@livekit/track-processorsBackgroundBlur(blurRadius)VirtualBackground(imagePath) Copy code
import { BackgroundBlur, VirtualBackground, supportsBackgroundProcessors } from '@livekit/track-processors';
if(!supportsBackgroundProcessors()) {
throw new Error("this browser does not support background processors")
}
const videoTrack = await createLocalVideoTrack();
const blur = BackgroundBlur(10);
await videoTrack.setProcessor(blur);
room.localParticipant.publishTrack(videoTrack);
// To disable
async function disableBackgroundBlur() {
await videoTrack.stopProcessor();
}
// Virtual background
const virtualBg = VirtualBackground('/path/to/image.jpg');
await videoTrack.setProcessor(virtualBg); Copy code
import { BackgroundBlur, VirtualBackground } from '@livekit/track-processors';
import { isLocalTrack } from 'livekit-client';
export function CameraSettings() {
const { cameraTrack } = useLocalParticipant();
const [backgroundType, setBackgroundType] = React.useState<'none' | 'blur' | 'image'>('none');
React.useEffect(() => {
if (isLocalTrack(cameraTrack?.track)) {
if (backgroundType === 'blur') {
cameraTrack.track?.setProcessor(BackgroundBlur());
} else if (backgroundType === 'image' && virtualBackgroundImagePath) {
cameraTrack.track?.setProcessor(VirtualBackground(virtualBackgroundImagePath));
} else {
cameraTrack.track?.stopProcessor();
}
}
}, [cameraTrack, backgroundType, virtualBackgroundImagePath]);
}VirtualBackgroundVideoProcessora
abundant-magician-17307
07/28/2025, 2:38 AM共享桌面场景下，用户电脑是2k的，前端推流的分辨率能推送2k吗？const room = new Room({ adaptiveStream: false, // adaptiveStream: { pixelDensity: 'screen' }, dynacast: true, publishDefaults: { simulcast: true, videoEncoding: ScreenSharePresets.h1080fps30.encoding, videoSimulcastLayers: [VideoPresets.h180, VideoPresets.h1080], videoCodec: 'h264', screenShareSimulcastLayers: [VideoPresets.h720, VideoPresets.h1080], screenShareEncoding: ScreenSharePresets.h1080fps30.encoding, audioPreset: 'musicHighQualityStereo', // musicHighQualityStereo telephone forceStereo: true // 立体声音轨 },上述是livekit推流配置，
t
tall-airline-16756
07/28/2025, 2:40 AMHey there! Want to level up your screen sharing game with LiveKit? I've got some awesome tips to help you support crystal-clear 2K resolution. Let me walk you through it like we're solving this together.
1. Use the "Original" Preset:
The JavaScript SDK has this super handy
originalScreenSharePresets Copy code
export const ScreenSharePresets = {
// ... other presets
// original resolution, without resizing
original: new VideoPreset(0, 0, 7_000_000, 30, 'medium'),
} Copy code
const screenShareOptions = {
resolution: {
width: 2560,
height: 1440,
frameRate: 30
}
}; Copy code
const publishOptions = {
screenShareEncoding: ScreenSharePresets.original.encoding
};a
abundant-magician-17307
07/28/2025, 2:52 AMscreenShareSimulcastLayers: [VideoPresets.h720, VideoPresets.h1080],
screenShareEncoding: ScreenSharePresets.h1080fps30.encoding,我想问的是如果设置1080p分辨率，用户的电脑是2k，实际推流分辨率是多少？
t
tall-airline-16756
07/28/2025, 2:53 AMHey there! Let me break down what happens when your screen sharing gets a bit technical. When you set
screenShareEncodingscreenShareEncodingh1080fps30originala
abundant-magician-17307
07/28/2025, 3:18 AMINFO livekit.pub rtc/participant.go:1676 pending track added {"room": "0ceacb42d41b4bd89eb941be1c60698c", "roomID": "RM_HzcrDUrw9LKK", "participant": "f0053cb5d4304acfb2c569b848e3fd67", "pID": "PA_Fv6ssKQSfE2C", "remote": false, "trackID": "TR_VSgoRHJ2SurTQy", "track": {"sid": "TR_VSgoRHJ2SurTQy", "type": 1, "width": 1536, "height": 864, "source": 3, "layers": [{"width": 1280, "height": 720, "bitrate": 1700000}, {"quality": 1, "width": 1536, "height": 864, "bitrate": 3000000}, {"quality": 2, "width": 1536, "height": 864, "bitrate": 5000000}], "codecs": [{"mimeType": "video/AV1", "cid": "a1386ba2-4a43-441c-82bf-ab0ada67cd49"}, {"mimeType": "video/vp8"}], "stream": "screen"}, "request": {"cid": "a1386ba2-4a43-441c-82bf-ab0ada67cd49", "type": 1, "width": 1536, "height": 864, "source": 3, "layers": [{"width": 1280, "height": 720, "bitrate": 1700000}, {"quality": 1, "width": 1536, "height": 864, "bitrate": 3000000}, {"quality": 2, "width": 1536, "height": 864, "bitrate": 5000000}], "simulcastCodecs": [{"codec": "AV1", "cid": "a1386ba2-4a43-441c-82bf-ab0ada67cd49"}, {"codec": "vp8"}]}}这是livekit的日志，上面的864分辨率是用户电脑的分辨率打印，还是实际推流到room的流就是864分辨率？
t
tall-airline-16756
07/28/2025, 3:19 AMHey there! Let me break down how LiveKit handles resolution in its logs. Think of it like this: the resolution you see (like 864p) is actually showing the real resolution being captured and streamed to the room - not just what's on your screen.
Here's the scoop:
• When you're screen sharing, the resolution reflects either the capture settings you've chosen or just the raw size of your display.
• For camera tracks, it pulls directly from the actual camera settings.
• If simulcast is on, the log shows the highest-quality layer being published.
So when you see that 864p, it's basically telling you the exact resolution being encoded and sent to the room. This might be a bit different from your full screen resolution because of things like capture settings, internet bandwidth, or encoding preferences. Pretty cool, right?
Sources: livekit/src/room/options.rs | livekit-android-sdk/src/main/java/io/livekit/android/room/track/LocalScreen... | lib/src/participant/local.dart | Codecs and more | LiveKit Docs
5 Views