虚拟背景（Web）

import { VirtualBackgroundPanel } from 'tuikit-atomicx-vue3/room';

<template>
  <UIKitProvider theme="light" language="zh-CN">
    <div class="toolbar-container">
      <!-- 1. 触发按钮 -->
      <button @click="openSettings">设置虚拟背景</button>

      <!-- 2. 设置弹窗 -->
      <div v-if="showSettings" class="modal-mask">
        <div class="modal-content">
          <div class="modal-header">
            <span>虚拟背景</span>
            <button @click="showSettings = false">关闭</button>
          </div>
          
          <div class="modal-body">
            <!-- 3. 引入面板组件 -->
            <!-- @close 事件：当用户点击面板内的关闭按钮（如有）时触发 -->
            <VirtualBackgroundPanel assetsPath='https://xxxx/assets' @close="showSettings = false" />
          </div>
        </div>
      </div>
    </div>
  </UIKitProvider>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
import { VirtualBackgroundPanel, useVirtualBackgroundState, useDeviceState } from 'tuikit-atomicx-vue3/room';

const showSettings = ref(false);
const { isSupported } = useVirtualBackgroundState();
const { cameraList } = useDeviceState();

const openSettings = () => {
  // 1. 检查浏览器是否支持虚拟背景
  if (!isSupported()) {
    alert('当前浏览器不支持虚拟背景');
    return;
  }
  
  // 2. 检查是否有可用摄像头
  if (cameraList.value.length === 0) {
    alert('未检测到摄像头，无法设置虚拟背景');
    return;
  }

  // 3. 打开设置面板
  showSettings.value = true;
};
</script>

<style scoped>
.modal-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:white;width:600px;border-radius:8px;overflow:hidden}.modal-header{padding:16px;display:flex;justify-content:space-between;border-bottom:1px solid #eee}
</style>

import { onMounted } from 'vue';
import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3/room';

const { isSupported, initVirtualBackground } = useVirtualBackgroundState();

onMounted(async () => {
  // 1. 检查浏览器兼容性
  if (!isSupported()) {
    console.warn('当前浏览器不支持虚拟背景');
    return;
  }

  // 2. 初始化资源
  try {
    await initVirtualBackground({ assetsPath: './assets' });
    console.log('虚拟背景初始化完成');
  } catch (error) {
    console.error('初始化失败', error);
  }
});

import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3/room';

const { setVirtualBackground } = useVirtualBackgroundState();

// 开启背景虚化预览
const previewBlur = async () => {
  await setVirtualBackground({
    enable: true,
    type: 'blur',
    level: 0.5 // 虚化程度，可选
  });
};

// 开启背景图片预览
const previewImage = async (imageUrl: string) => {
  await setVirtualBackground({
    enable: true,
    type: 'image',
    source: imageUrl // 图片 URL，支持本地或网络路径
  });
};

import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3/room';

const { saveVirtualBackground } = useVirtualBackgroundState();

const confirmSettings = async () => {
  try {
    await saveVirtualBackground();
    console.log('虚拟背景已生效');
  } catch (error) {
    console.error('保存失败', error);
  }
};

import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3/room';

const { setVirtualBackground, saveVirtualBackground } = useVirtualBackgroundState();

const disableVirtualBackground = async () => {
  // 1. 设置为关闭状态
  await setVirtualBackground({ enable: false });
  // 2. 保存生效
  await saveVirtualBackground();
};