CodeBuddy 腾讯云代码助手：AI 时代的智能编程伙伴

本文链接：https://blog.csdn.net/2301_79293847/article/details/147919760

CodeBuddy 腾讯云代码助手：AI 时代的智能编程伙伴

在当今数字化快速发展的时代，软件开发行业正经历着前所未有的变革。AI 技术的融入正在重塑编程方式，使开发者能够更高效地构建应用。腾讯云推出的 CodeBuddy 代码助手正是这一变革中的重要力量，它不仅提供了智能代码生成能力，还通过兼容 Figma MCP 实现了设计稿到代码的无缝转换，为开发者带来了全新的开发体验。

一、CodeBuddy 概述与核心功能

1.1 产品定位与愿景

CodeBuddy 是腾讯云自主研发的智能编程助手，旨在通过 AI 技术帮助开发者减少重复劳动，提升开发效率。它的愿景是成为开发者的 "第二大脑"，在编程过程中提供实时帮助，从代码补全、问题解答到复杂功能实现，全方位支持软件开发全周期。

1.2 核心功能亮点

智能代码生成：基于大规模代码预训练模型，能够根据自然语言描述生成高质量代码。无论是简单的工具函数还是复杂的业务逻辑，CodeBuddy 都能快速生成符合要求的代码片段。
设计稿转代码：通过兼容 Figma MCP（设计协作平台），CodeBuddy 可以直接将设计稿转换为可运行的代码，实现像素级还原。这一功能大大缩短了前端开发时间，减少了设计与开发之间的沟通成本。
动态同步设计变更：当设计稿发生变更时，CodeBuddy 能够自动识别变化并更新相应的代码，确保开发与设计始终保持一致。
多语言支持：支持主流编程语言如 Python、Java、JavaScript、TypeScript 等，覆盖前端、后端、移动端等多个开发领域。
问题诊断与修复：能够分析代码中的错误和潜在问题，并提供修复建议，帮助开发者快速解决遇到的技术难题。

二、CodeBuddy 在游戏开发中的应用

2.1 游戏开发痛点分析

游戏开发是一个高度复杂的过程，涉及美术设计、程序开发、音效制作等多个环节。传统开发方式中，游戏开发者需要手动实现各种复杂的功能，如角色动画、物理效果、网络同步等，开发周期长且容易出错。同时，游戏界面的实现也需要大量的代码编写，与美术设计的沟通成本较高。

2.2 CodeBuddy 解决方案

快速实现游戏逻辑：通过自然语言描述，CodeBuddy 可以帮助开发者快速生成游戏中的各种逻辑代码，如角色移动、碰撞检测、AI 行为等。
设计稿转游戏界面：利用 CodeBuddy 的设计稿转代码功能，游戏开发者可以将美术设计的 UI 界面直接转换为游戏中的界面代码，减少手动编写的工作量。
自动化测试与优化：CodeBuddy 可以帮助开发者生成游戏测试代码，自动化测试游戏功能，提高游戏质量和稳定性。

2.3 完整 Demo：2D 平台跳跃游戏

下面我们通过一个完整的 2D 平台跳跃游戏 Demo 来展示 CodeBuddy 在游戏开发中的应用。

// 使用 CodeBuddy 生成的 2D 平台跳跃游戏核心代码

class PlatformerGame {
  constructor(canvasId) {
    // 初始化游戏画布和上下文
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    
    // 设置游戏画布尺寸
    this.canvas.width = 800;
    this.canvas.height = 600;
    
    // 游戏状态
    this.isRunning = false;
    this.gameObjects = [];
    this.player = null;
    this.platforms = [];
    this.enemies = [];
    this.gravity = 0.5;
    
    // 控制状态
    this.keys = {
      left: false,
      right: false,
      jump: false
    };
    
    // 初始化游戏
    this.init();
  }
  
  // 初始化游戏对象
  init() {
    // 创建玩家
    this.player = new Player(
      this.canvas.width / 2 - 25, 
      this.canvas.height / 2 - 50, 
      50, 
      100
    );
    this.gameObjects.push(this.player);
    
    // 创建平台
    this.createPlatforms();
    
    // 创建敌人
    this.createEnemies();
    
    // 绑定事件监听器
    this.bindEventListeners();
  }
  
  // 创建平台
  createPlatforms() {
    // 底部平台
    this.platforms.push(new Platform(0, this.canvas.height - 50, this.canvas.width, 50));
    
    // 中间平台
    this.platforms.push(new Platform(200, 400, 200, 30));
    this.platforms.push(new Platform(500, 350, 150, 30));
    this.platforms.push(new Platform(300, 300, 100, 30));
    
    // 将平台添加到游戏对象列表
    this.gameObjects = [...this.gameObjects, ...this.platforms];
  }
  
  // 创建敌人
  createEnemies() {
    // 创建几个简单的敌人
    this.enemies.push(new Enemy(400, 500, 40, 40));
    this.enemies.push(new Enemy(600, 320, 40, 40));
    
    // 将敌人添加到游戏对象列表
    this.gameObjects = [...this.gameObjects, ...this.enemies];
  }
  
  // 绑定事件监听器
  bindEventListeners() {
    // 键盘按下事件
    window.addEventListener('keydown', (e) => {
      switch(e.key) {
        case 'ArrowLeft':
          this.keys.left = true;
          break;
        case 'ArrowRight':
          this.keys.right = true;
          break;
        case ' ':
        case 'ArrowUp':
          this.keys.jump = true;
          break;
      }
    });
    
    // 键盘释放事件
    window.addEventListener('keyup', (e) => {
      switch(e.key) {
        case 'ArrowLeft':
          this.keys.left = false;
          break;
        case 'ArrowRight':
          this.keys.right = false;
          break;
        case ' ':
        case 'ArrowUp':
          this.keys.jump = false;
          break;
      }
    });
  }
  
  // 更新游戏状态
  update() {
    // 应用重力
    this.player.velocity.y += this.gravity;
    
    // 处理玩家输入
    if (this.keys.left) {
      this.player.velocity.x = -5;
    } else if (this.keys.right) {
      this.player.velocity.x = 5;
    } else {
      this.player.velocity.x = 0;
    }
    
    if (this.keys.jump && this.player.isOnGround(this.platforms)) {
      this.player.velocity.y = -12;
    }
    
    // 更新玩家位置
    this.player.update();
    
    // 检测碰撞
    this.checkCollisions();
    
    // 更新敌人
    this.enemies.forEach(enemy => {
      enemy.update();
      
      // 简单的敌人AI：左右移动
      if (enemy.x <= enemy.startX - 100) {
        enemy.direction = 1;
      } else if (enemy.x >= enemy.startX + 100) {
        enemy.direction = -1;
      }
      
      enemy.velocity.x = 2 * enemy.direction;
    });
  }
  
  // 检测碰撞
  checkCollisions() {
    // 玩家与平台碰撞检测
    this.platforms.forEach(platform => {
      if (this.player.checkCollision(platform)) {
        // 从下方碰撞
        if (this.player.velocity.y > 0 && this.player.y + this.player.height <= platform.y + 10) {
          this.player.y = platform.y - this.player.height;
          this.player.velocity.y = 0;
        }
        // 从上方碰撞
        else if (this.player.velocity.y < 0 && this.player.y >= platform.y + platform.height - 10) {
          this.player.y = platform.y + platform.height;
          this.player.velocity.y = 0;
        }
        // 从左侧碰撞
        else if (this.player.velocity.x > 0 && this.player.x + this.player.width <= platform.x + 10) {
          this.player.x = platform.x - this.player.width;
          this.player.velocity.x = 0;
        }
        // 从右侧碰撞
        else if (this.player.velocity.x < 0 && this.player.x >= platform.x + platform.width - 10) {
          this.player.x = platform.x + platform.width;
          this.player.velocity.x = 0;
        }
      }
    });
    
    // 玩家与敌人碰撞检测
    this.enemies.forEach(enemy => {
      if (this.player.checkCollision(enemy)) {
        // 玩家从上方踩敌人
        if (this.player.velocity.y > 0 && this.player.y + this.player.height <= enemy.y + 20) {
          // 消灭敌人
          const enemyIndex = this.enemies.indexOf(enemy);
          if (enemyIndex !== -1) {
            this.enemies.splice(enemyIndex, 1);
            const gameObjectIndex = this.gameObjects.indexOf(enemy);
            if (gameObjectIndex !== -1) {
              this.gameObjects.splice(gameObjectIndex, 1);
            }
          }
          // 给玩家一个反弹力
          this.player.velocity.y = -8;
        }
        // 否则玩家受伤
        else {
          this.player.takeDamage(10);
        }
      }
    });
  }
  
  // 渲染游戏
  render() {
    // 清空画布
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
    // 绘制背景
    this.ctx.fillStyle = '#222';
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    
    // 绘制所有游戏对象
    this.gameObjects.forEach(object => {
      object.render(this.ctx);
    });
    
    // 绘制UI
    this.renderUI();
  }
  
  // 渲染UI
  renderUI() {
    // 绘制生命值
    this.ctx.fillStyle = 'white';
    this.ctx.font = '20px Arial';
    this.ctx.fillText(`生命值: ${this.player.health}`, 20, 30);
    
    // 绘制得分
    this.ctx.fillText(`得分: ${this.player.score}`, 20, 60);
  }
  
  // 游戏主循环
  gameLoop() {
    if (this.isRunning) {
      this.update();
      this.render();
      requestAnimationFrame(() => this.gameLoop());
    }
  }
  
  // 开始游戏
  start() {
    this.isRunning = true;
    this.gameLoop();
  }
  
  // 暂停游戏
  pause() {
    this.isRunning = false;
  }
}

// 玩家类
class Player {
  constructor(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.velocity = { x: 0, y: 0 };
    this.health = 100;
    this.score = 0;
    this.color = '#4a6cf7'; // 使用CodeBuddy主题色
  }
  
  update() {
    this.x += this.velocity.x;
    this.y += this.velocity.y;
  }
  
  render(ctx) {
    // 绘制玩家
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
    
    // 绘制眼睛
    ctx.fillStyle = 'white';
    ctx.fillRect(this.x + 10, this.y + 20, 10, 10);
    ctx.fillRect(this.x + 30, this.y + 20, 10, 10);
    
    // 绘制瞳孔
    ctx.fillStyle = 'black';
    ctx.fillRect(this.x + 15, this.y + 25, 5, 5);
    ctx.fillRect(this.x + 35, this.y + 25, 5, 5);
  }
  
  checkCollision(object) {
    return (
      this.x < object.x + object.width &&
      this.x + this.width > object.x &&
      this.y < object.y + object.height &&
      this.y + this.height > object.y
    );
  }
  
  isOnGround(platforms) {
    // 检查是否站在任何平台上
    for (let i = 0; i < platforms.length; i++) {
      const platform = platforms[i];
      if (
        this.y + this.height <= platform.y + 10 &&
        this.y + this.height + this.velocity.y >= platform.y &&
        this.x + this.width > platform.x &&
        this.x < platform.x + platform.width
      ) {
        return true;
      }
    }
    return false;
  }
  
  takeDamage(amount) {
    this.health -= amount;
    if (this.health < 0) {
      this.health = 0;
      // 游戏结束逻辑可以在这里添加
    }
  }
}

// 平台类
class Platform {
  constructor(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = '#555';
  }
  
  update() {
    // 平台不需要更新
  }
  
  render(ctx) {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

// 敌人类
class Enemy {
  constructor(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.velocity = { x: 0, y: 0 };
    this.color = '#ff6b6b';
    this.direction = 1; // 1表示向右，-1表示向左
    this.startX = x;
  }
  
  update() {
    this.x += this.velocity.x;
  }
  
  render(ctx) {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
    
    // 绘制眼睛
    ctx.fillStyle = 'white';
    ctx.fillRect(this.x + 5, this.y + 10, 5, 5);
    ctx.fillRect(this.x + 25, this.y + 10, 5, 5);
    
    // 绘制瞳孔
    ctx.fillStyle = 'black';
    ctx.fillRect(this.x + (this.direction === 1 ? 10 : 5), this.y + 15, 5, 5);
    ctx.fillRect(this.x + (this.direction === 1 ? 30 : 25), this.y + 15, 5, 5);
  }
}

// 初始化并启动游戏
window.onload = () => {
  const game = new PlatformerGame('gameCanvas');
  game.start();
};

在这个 2D 平台跳跃游戏中，我们使用了 CodeBuddy 生成的核心代码。通过 CodeBuddy，我们可以快速实现以下功能：

游戏物理系统：包括重力、碰撞检测和角色移动逻辑。
游戏对象管理：玩家、平台和敌人的创建与更新。
用户输入处理：键盘事件监听和角色控制。
游戏循环：更新和渲染游戏状态的主循环。

通过 CodeBuddy 的设计稿转代码功能，我们还可以将游戏 UI 设计稿直接转换为代码，进一步提高开发效率。

三、CodeBuddy 在小程序开发中的应用

3.1 小程序开发挑战

小程序开发需要同时关注前端展示和后端逻辑，且不同平台（微信、支付宝、抖音等）的小程序规范存在差异，开发过程中需要编写大量重复代码。此外，小程序的 UI 设计与实现也需要耗费大量时间，特别是在处理复杂交互和动画效果时。

3.2 CodeBuddy 解决方案

跨平台代码生成：CodeBuddy 可以根据需求生成适配多个平台的小程序代码，减少重复开发。
组件化开发：通过设计稿转代码功能，CodeBuddy 可以将设计稿中的组件转换为可复用的小程序组件，提高开发效率。
API 调用助手：CodeBuddy 可以帮助开发者快速生成小程序 API 调用代码，如获取用户信息、支付功能等。

3.3 完整 Demo：电商小程序

下面是一个使用 CodeBuddy 开发的电商小程序核心代码示例：

// 使用 CodeBuddy 生成的电商小程序核心代码

// app.js - 小程序入口文件
App({
  onLaunch() {
    // 初始化云开发环境
    wx.cloud.init({
      env: 'your-env-id',
      traceUser: true,
    });
    
    // 检查登录状态
    this.checkLogin();
  },
  
  // 检查用户登录状态
  checkLogin() {
    const userInfo = wx.getStorageSync('userInfo');
    if (!userInfo) {
      // 用户未登录，跳转到登录页
      wx.navigateTo({
        url: '/pages/login/login',
      });
    } else {
      this.globalData.userInfo = userInfo;
    }
  },
  
  // 全局数据
  globalData: {
    userInfo: null,
    cartCount: 0,
    categories: [],
    products: []
  }
});

// pages/index/index.js - 首页逻辑
Page({
  data: {
    banners: [],
    categories: [],
    hotProducts: [],
    loading: true
  },
  
  onLoad() {
    this.getHomeData();
  },
  
  // 获取首页数据
  async getHomeData() {
    try {
      // 显示加载提示
      wx.showLoading({
        title: '加载中...',
      });
      
      // 调用云函数获取首页数据
      const res = await wx.cloud.callFunction({
        name: 'getHomeData',
        data: {}
      });
      
      // 更新数据
      this.setData({
        banners: res.result.banners,
        categories: res.result.categories,
        hotProducts: res.result.hotProducts,
        loading: false
      });
      
      // 更新全局数据
      const app = getApp();
      app.globalData.categories = res.result.categories;
      app.globalData.products = res.result.allProducts;
      
      // 隐藏加载提示
      wx.hideLoading();
    } catch (error) {
      console.error('获取首页数据失败:', error);
      wx.hideLoading();
      wx.showToast({
        title: '加载失败，请重试',
        icon: 'none'
      });
    }
  },
  
  // 跳转到商品列表页
  navigateToCategory(e) {
    const categoryId = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/products/products?categoryId=${categoryId}`
    });
  },
  
  // 跳转到商品详情页
  navigateToProductDetail(e) {
    const productId = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/productDetail/productDetail?id=${productId}`
    });
  }
});

// pages/cart/cart.js - 购物车页面逻辑
Page({
  data: {
    cartItems: [],
    totalPrice: 0,
    isAllSelected: false
  },
  
  onShow() {
    this.getCartItems();
  },
  
  // 获取购物车商品
  getCartItems() {
    const cartItems = wx.getStorageSync('cartItems') || [];
    this.calculateTotalPrice(cartItems);
  },
  
  // 计算总价
  calculateTotalPrice(items) {
    let total = 0;
    let allSelected = true;
    
    items.forEach(item => {
      if (item.selected) {
        total += item.price * item.quantity;
      } else {
        allSelected = false;
      }
    });
    
    this.setData({
      cartItems: items,
      totalPrice: total,
      isAllSelected: allSelected && items.length > 0
    });
    
    // 更新全局购物车数量
    const app = getApp();
    app.globalData.cartCount = items.length;
  },
  
  // 选择商品
  toggleSelect(e) {
    const index = e.currentTarget.dataset.index;
    const cartItems = this.data.cartItems;
    cartItems[index].selected = !cartItems[index].selected;
    this.calculateTotalPrice(cartItems);
    
    // 保存到本地存储
    wx.setStorageSync('cartItems', cartItems);
  },
  
  // 全选/取消全选
  toggleAllSelect() {
    const isAllSelected = !this.data.isAllSelected;
    const cartItems = this.data.cartItems;
    
    cartItems.forEach(item => {
      item.selected = isAllSelected;
    });
    
    this.calculateTotalPrice(cartItems);
    
    // 保存到本地存储
    wx.setStorageSync('cartItems', cartItems);
  },
  
  // 增加商品数量
  increaseQuantity(e) {
    const index = e.currentTarget.dataset.index;
    const cartItems = this.data.cartItems;
    cartItems[index].quantity += 1;
    this.calculateTotalPrice(cartItems);
    
    // 保存到本地存储
    wx.setStorageSync('cartItems', cartItems);
  },
  
  // 减少商品数量
  decreaseQuantity(e) {
    const index = e.currentTarget.dataset.index;
    const cartItems = this.data.cartItems;
    
    if (cartItems[index].quantity > 1) {
      cartItems[index].quantity -= 1;
      this.calculateTotalPrice(cartItems);
      
      // 保存到本地存储
      wx.setStorageSync('cartItems', cartItems);
    }
  },
  
  // 删除商品
  deleteItem(e) {
    const index = e.currentTarget.dataset.index;
    const cartItems = this.data.cartItems;
    
    wx.showModal({
      title: '确认删除',
      content: '确定要删除这件商品吗？',
      success: (res) => {
        if (res.confirm) {
          cartItems.splice(index, 1);
          this.calculateTotalPrice(cartItems);
          
          // 保存到本地存储
          wx.setStorageSync('cartItems', cartItems);
          
          wx.showToast({
            title: '已删除',
            icon: 'success'
          });
        }
      }
    });
  },
  
  // 结算
  checkout() {
    const selectedItems = this.data.cartItems.filter(item => item.selected);
    
    if (selectedItems.length === 0) {
      wx.showToast({
        title: '请选择商品',
        icon: 'none'
      });
      return;
    }
    
    // 跳转到结算页
    wx.navigateTo({
      url: '/pages/checkout/checkout'
    });
  }
});

// 云函数 - 获取首页数据
// cloudfunctions/getHomeData/index.js
const cloud = require('wx-server-sdk');

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
});

const db = cloud.database();

exports.main = async (event, context) => {
  try {
    // 获取轮播图数据
    const bannersRes = await db.collection('banners').get();
    
    // 获取分类数据
    const categoriesRes = await db.collection('categories').get();
    
    // 获取热门商品
    const hotProductsRes = await db.collection('products')
      .where({
        isHot: true
      })
      .get();
    
    // 获取所有商品（用于全局数据）
    const allProductsRes = await db.collection('products').get();
    
    return {
      banners: bannersRes.data,
      categories: categoriesRes.data,
      hotProducts: hotProductsRes.data,
      allProducts: allProductsRes.data
    };
  } catch (error) {
    console.error('获取首页数据失败:', error);
    return {
      error: '获取数据失败'
    };
  }
};

这个电商小程序示例展示了 CodeBuddy 在实际开发中的应用。我们可以看到：

云开发集成：CodeBuddy 帮助生成了云函数调用和数据库操作代码，简化了后端开发。
页面逻辑：自动生成了首页、购物车等页面的核心逻辑，包括数据获取、状态管理和用户交互。
数据持久化：CodeBuddy 生成的代码实现了本地存储功能，用于保存购物车数据。
用户体验优化：添加了加载提示、错误处理等增强用户体验的代码。

四、CodeBuddy 在音视频开发中的应用

4.1 音视频开发难点

音视频开发涉及复杂的媒体处理技术，如音视频编解码、流媒体传输、实时通信等。开发过程中需要处理各种兼容性问题，编写大量底层代码，并且对性能要求较高。

4.2 CodeBuddy 解决方案

API 集成助手：CodeBuddy 可以帮助开发者快速集成主流音视频 SDK，如腾讯云实时音视频（TRTC）、短视频 SDK 等。
功能模板生成：提供常见音视频功能的代码模板，如直播推流、视频播放、音视频通话等。
性能优化建议：分析音视频代码中的性能瓶颈，并提供优化建议。

4.3 完整 Demo：在线视频会议系统

下面是一个使用 CodeBuddy 开发的在线视频会议系统核心代码：

// 使用 CodeBuddy 生成的在线视频会议系统核心代码

// 页面逻辑 - 视频会议主页面
class VideoConference {
  constructor(roomId, userId, userName) {
    this.roomId = roomId;
    this.userId = userId;
    this.userName = userName;
    this.client = null;
    this.localStream = null;
    this.remoteStreams = new Map();
    this.isMuted = false;
    this.isCameraOff = false;
    
    // 初始化 TRTC 客户端
    this.initClient();
  }
  
  // 初始化 TRTC 客户端
  initClient() {
    // 创建 TRTC 客户端实例
    this.client = TRTC.createClient({
      mode: 'rtc',  // 实时通信模式
      sdkAppId: 1234567890,  // 您的 SDKAppID
    });
    
    // 监听客户端事件
    this.client.on('stream-added', this.handleStreamAdded.bind(this));
    this.client.on('stream-removed', this.handleStreamRemoved.bind(this));
    this.client.on('stream-subscribed', this.handleStreamSubscribed.bind(this));
    this.client.on('peer-join', this.handlePeerJoin.bind(this));
    this.client.on('peer-leave', this.handlePeerLeave.bind(this));
    this.client.on('error', this.handleError.bind(this));
  }
  
  // 加入会议房间
  async joinRoom() {
    try {
      // 生成用户签名（实际项目中应从服务器获取）
      const userSig = this.generateUserSig(this.userId);
      
      // 加入房间
      await this.client.join({
        roomId: this.roomId,
        userSig: userSig,
        userId: this.userId
      });
      
      // 创建并发布本地音视频流
      await this.createAndPublishLocalStream();
      
      console.log('成功加入会议房间:', this.roomId);
      return true;
    } catch (error) {
      console.error('加入会议失败:', error);
      this.handleError(error);
      return false;
    }
  }
  
  // 创建并发布本地音视频流
  async createAndPublishLocalStream() {
    try {
      // 创建本地流
      this.localStream = TRTC.createStream({
        userId: this.userId,
        audio: true,
        video: true
      });
      
      // 初始化本地流
      await this.localStream.initialize();
      
      // 渲染本地视频
      this.renderLocalStream();
      
      // 发布本地流
      await this.client.publish(this.localStream);
      
      console.log('本地流发布成功');
    } catch (error) {
      console.error('创建或发布本地流失败:', error);
      this.handleError(error);
    }
  }
  
  // 渲染本地视频
  renderLocalStream() {
    const localVideoContainer = document.getElementById('local-video-container');
    localVideoContainer.innerHTML = '';
    
    const videoElement = document.createElement('video');
    videoElement.id = 'local-video';
    videoElement.autoplay = true;
    videoElement.muted = true;  // 本地视频需要静音，防止回声
    localVideoContainer.appendChild(videoElement);
    
    this.localStream.play('local-video');
    
    // 添加用户名标签
    const userNameLabel = document.createElement('div');
    userNameLabel.className = 'user-name-label';
    userNameLabel.textContent = this.userName;
    localVideoContainer.appendChild(userNameLabel);
  }
  
  // 处理新流添加事件
  handleStreamAdded(event) {
    const remoteStream = event.stream;
    console.log('检测到新的远程流:', remoteStream.getId());
    
    // 订阅远程流
    this.client.subscribe(remoteStream);
  }
  
  // 处理流订阅成功事件
  handleStreamSubscribed(event) {
    const remoteStream = event.stream;
    console.log('远程流订阅成功:', remoteStream.getId());
    
    // 存储远程流
    this.remoteStreams.set(remoteStream.getId(), remoteStream);
    
    // 渲染远程视频
    this.renderRemoteStream(remoteStream);
  }
  
  // 渲染远程视频
  renderRemoteStream(stream) {
    const remoteVideoContainer = document.getElementById('remote-videos-container');
    
    const streamId = stream.getId();
    const videoContainer = document.createElement('div');
    videoContainer.className = 'remote-video-wrapper';
    videoContainer.id = `remote-video-wrapper-${streamId}`;
    
    const videoElement = document.createElement('video');
    videoElement.id = `remote-video-${streamId}`;
    videoElement.autoplay = true;
    videoContainer.appendChild(videoElement);
    
    // 添加用户名标签（实际项目中应从流中获取用户名）
    const userNameLabel = document.createElement('div');
    userNameLabel.className = 'user-name-label';
    userNameLabel.textContent = `参会者 ${streamId}`;
    videoContainer.appendChild(userNameLabel);
    
    remoteVideoContainer.appendChild(videoContainer);
    
    // 播放远程流
    stream.play(`remote-video-${streamId}`);
  }
  
  // 处理流移除事件
  handleStreamRemoved(event) {
    const remoteStream = event.stream;
    console.log('远程流已移除:', remoteStream.getId());
    
    // 停止播放并移除视频元素
    remoteStream.stop();
    this.remoteStreams.delete(remoteStream.getId());
    
    const videoWrapper = document.getElementById(`remote-video-wrapper-${remoteStream.getId()}`);
    if (videoWrapper) {
      videoWrapper.remove();
    }
  }
  
  // 处理用户加入事件
  handlePeerJoin(event) {
    const peerId = event.userId;
    console.log('新用户加入会议:', peerId);
    
    // 实际项目中可以在这里更新参会者列表
  }
  
  // 处理用户离开事件
  handlePeerLeave(event) {
    const peerId = event.userId;
    console.log('用户离开会议:', peerId);
    
    // 实际项目中可以在这里更新参会者列表
  }
  
  // 处理错误
  handleError(error) {
    console.error('会议错误:', error);
    
    // 显示错误提示
    const errorContainer = document.getElementById('error-container');
    errorContainer.textContent = `错误: ${error.message}`;
    errorContainer.style.display = 'block';
    
    // 根据错误类型执行不同的处理
    if (error.code === 1004) {
      // 网络连接断开，尝试重新连接
      this.tryReconnect();
    }
  }
  
  // 尝试重新连接
  async tryReconnect() {
    console.log('尝试重新连接...');
    
    const reconnectContainer = document.getElementById('reconnect-container');
    reconnectContainer.style.display = 'block';
    
    try {
      // 先离开当前房间
      if (this.client) {
        await this.client.leave();
      }
      
      // 重新加入房间
      const success = await this.joinRoom();
      
      if (success) {
        reconnectContainer.style.display = 'none';
        console.log('重新连接成功');
      } else {
        throw new Error('重新连接失败');
      }
    } catch (error) {
      console.error('重新连接失败:', error);
      reconnectContainer.innerHTML = '重新连接失败，请检查网络连接';
      
      // 5秒后再次尝试
      setTimeout(() => {
        this.tryReconnect();
      }, 5000);
    }
  }
  
  // 切换麦克风静音状态
  toggleMute() {
    this.isMuted = !this.isMuted;
    
    if (this.localStream) {
      if (this.isMuted) {
        this.localStream.muteAudio();
        document.getElementById('mute-btn').textContent = '取消静音';
      } else {
        this.localStream.unmuteAudio();
        document.getElementById('mute-btn').textContent = '静音';
      }
    }
  }
  
  // 切换摄像头开关状态
  toggleCamera() {
    this.isCameraOff = !this.isCameraOff;
    
    if (this.localStream) {
      if (this.isCameraOff) {
        this.localStream.muteVideo();
        document.getElementById('camera-btn').textContent = '打开摄像头';
      } else {
        this.localStream.unmuteVideo();
        document.getElementById('camera-btn').textContent = '关闭摄像头';
      }
    }
  }
  
  // 离开会议
  async leaveRoom() {
    try {
      // 停止并释放本地流
      if (this.localStream) {
        this.localStream.stop();
        this.localStream.close();
        this.localStream = null;
      }
      
      // 离开房间
      if (this.client) {
        await this.client.leave();
        this.client = null;
      }
      
      // 清空远程流
      this.remoteStreams.forEach(stream => {
        stream.stop();
        stream.close();
      });
      this.remoteStreams.clear();
      
      console.log('已离开会议房间');
      
      // 返回主页或执行其他操作
      window.location.href = '/';
    } catch (error) {
      console.error('离开会议失败:', error);
      this.handleError(error);
    }
  }