魔珐星云

一、魔珐星云简介

  魔珐星云是魔珐科技推出的面向开发者的具身智能3D数字人开放平台。它有三大产品能力，具身驱动、视频生成以及语音合成。具身驱动支持基于文本输入，实时生成 3D 数字人的语音、表情、眼神、手势和身体动作，让任何屏幕、应用、终端都能像真人一样自然表达和交互。
  魔珐星云所生成的3D 形象极其逼真，实时生成自然生动的声音、表情与动作，赋予人物真实可信的表达力。并且演示很低，500ms 驱动响应，交互实时流畅自然；并且支持随时打断，最大限度贴近真人对话体验。百元级芯片即可运行，大幅降低部署门槛，支持大规模普及。支持千万级设备同时驱动，轻松应对批量化接入，保障体验稳定可靠。覆盖超写实、二次元、卡通、美型等多样角色风格和人设，可以根据实际需求选择不同的场景和角色。全面适配手机、车机、Pad、PC、电视与大屏，兼容 Android、iOS、鸿蒙等主流系统。
  魔珐星云产品，通过文生3D多模态动作大模型和AI端渲和解算,实现打破3D数字人生成的质量、成本、延时不可能三角，从而真正支持AI具身智能大规模应用。 请按上述进行修改，调整后重新提交。
下边马农就带大家一起从头创建一个魔珐星云具身智能应用，了解一下魔珐产品的基础使用方式和流程。

我们以部署条件简单的网页端为例：

二、魔珐星云接入流程

2.1 创建驱动应用

登录魔珐星云，在应用中心创建驱动应用，并根据自己的需要选择角色、音色、表演风格。

创建驱动应用


这样，我们就创建了一个自己的3D智能数字人，它可以根据输入的文本，实时生成 3D 数字人的语音、表情、眼神、手势和身体动作。
创建完成以后，就能在应用管理界面看到自己创建的所有应用。将鼠标移动到刚刚创建的数字人上，点击查看秘钥，在弹出的窗口中可以看到数字人的App ID和App Secret。我们在接下来的部署过程中需要用到。
在这里插入图片描述

2.2 创建html页面，加载并显示数字人

2.2.1 准备工作

按照官网的文档指南，我们需要创建一个html文件并引入官方的JS SDK，在网页中引入 SDK 的脚本：

<script src="https://media.xingyun3d.com/xingyun3d/general/litesdk/xmovAvatar@latest.js"></script>
我们需要把这个<Script>插入到网页中。

2.2.2 创建实例

在html的JS文件中，初始化SDK

const LiteSDK = new XmovAvatar({
  containerId: '#sdk',
  appId: '',
  appSecret: '',
  gatewayServer: 'https://nebula-agent.xingyun3d.com/user/v1/ttsa/session',
  // 自定义渲染器，传递该方法，所有事件sdk均返回，由该方法定义所以类型事件的实现逻辑
  onWidgetEvent(data) {
    // 处理widget事件
    console.log('Widget事件:', data)
  },
  // 代理渲染器，sdk默认支持subtitle_on、subtitle_off和widget_pic事件。通过代理，
  // 可以修改默认事件，业务侧也可实现各种其他事件。
  proxyWidget: {
    "widget_slideshow": (data: any) => {
      console.log("widget_slideshow", data);
    },
    "widget_video": (data: any) => {
      console.log("widget_video", data);
    },
  },
  onNetworkInfo(networkInfo) {
    console.log('networkInfo:', networkInfo)
  },
  onMessage(message) {
    console.log('SDK message:', message);
  },
  onStateChange(state: string) {
    console.log('SDK State Change:', state);
  },
  onStatusChange(status) {
    console.log('SDK Status Change:', status);
  },
  onStateRenderChange(state: string, duration: number) {
    console.log('SDK State Change Render:', state, duration);
  },
  onVoiceStateChange(status:string) {
      console.log("sdk voice status", status);
  },
  enableLogger: false, // 不展示sdk log，默认为false
})
  • containerId: 指定上面html页面中<div id="sdk">的选择器。
  • appId / appSecret：数字人的id和secret
  • gatewayServer: SDK 与后端通信的入口。我们保持默认
  • 各种 onXXX 回调：用于监听事件、状态、网络信息、语音状态等等。官网中有详细接口的说明。

2.3 初始化连接房间

调init 方法，让 SDK 加载必需资源：

async init({
  onDownloadProgress?: (progress: number) => void,
  onError: (error: SDKError) => void,
  // socket断开
  onClose: () => void,
}): Promise<void>

2.4 驱动数字人说话

speak(ssml: string, is_start: boolean, is_end: boolean): void

由于网页端限制，必须用户操作才能播放声音，所以我们添加一个button来点击，让数字人说出第一句话。

document.getElementById("btn").onclick = () => {
    avatar.speak("你好，我是魔珐数字人，很高兴见到你！", true, true);
};

三、数字人效果展示

魔珐星云数字人2

四、Demo HTML完整代码参考

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>魔珐星云 Avatar SDK Demo</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f4f4f4;
      font-family: Arial, sans-serif;
    }

    #sdk-container {
      width: 400px;
      height: 600px;
      background: #000;
      margin-top: 20px;
    }

    button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>

<body>

<h2>魔珐星云SDK接入最小示例</h2>

<!-- 数字人渲染容器 -->
<div id="sdk-container">
  <div id="sdk" style="width:100%; height:100%"></div>
</div>

<button id="btn">让数字人说话</button>

<!-- 引入官方 SDK -->
<script src="https://media.xingyun3d.com/xingyun3d/general/litesdk/xmovAvatar@latest.js"></script>

<script>
  // ========= 1. 创建实例 =========
  const avatar = new XmovAvatar({
    containerId: '#sdk',
    appId: '',        // ⬅️ TODO：换成自己的
    appSecret: '', // ⬅️ TODO：换成自己的

    gatewayServer: 'https://nebula-agent.xingyun3d.com/user/v1/ttsa/session',

    onStateChange: (state) => {
      console.log("State:", state);
    },

    onStatusChange: (status) => {
      console.log("Status:", status);
    },

    onError: (err) => {
      console.error("SDK 错误：", err);
    }
  });

  // ========= 2. 初始化（加载资源） =========
  avatar.init({
    onDownloadProgress: (progress) => {
      console.log(`下载进度：${progress}%`);
    },
    onError: (error) => {
      console.error("初始化失败：", error);
    }
  }).then(() => {
    console.log("初始化完成，数字人模型加载成功！");
  });

  // ========= 3. 点击按钮让数字人说话 =========
  document.getElementById("btn").onclick = () => {
    avatar.speak("你好，我是魔珐数字人，很高兴见到你！", true, true);
  };
</script>

</body>
</html>

结语

我们仅用不到一百行代码，就生成了一个自己的3D数字人，操作简单，上手极快。并且魔珐星云提供非常多各式各样的数字人形象与场景，能够让用户根据自己的需求快速创建自己的具身智能应用。此外，从我们网页端部署的效果来看，数字人响应极快、无论是语音交互，还是表情与情绪的呈现，都做到了高效而自然。完全能够胜任企业应用场景，如虚拟客服、品牌展示或在线讲解等。可以预见的是，魔珐星云定会给具身智能的发展提供新的动力和方向。想要体验的小伙伴可以点击这个链接进行注册：https://xingyun3d.com?utm_campaign=daily&utm_source=jixinghuiKoc29

# 人工智能
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

Python 高性能 web 框架 - FastApi 全面指南

avatar 2048 AI社区

Kubernetes Service DNS介绍（k8s Service DNS）服务发现、服务即域名、CoreDNS、搜索域search domains、svc、kubelet、无头服务、SRV记录

标准格式是理解一切的基础智能补全：搜索域机制让跨命名空间调用简洁优雅场景全覆盖：ClusterIP、Headless、SRV 记录满足不同架构需求优于环境变量：动态、跨命名空间、符合云原生设计哲学掌握 DNS 规则，不仅能提升开发效率，更是排查服务通信问题的关键能力。下次当你写下时，你会知道——背后是 Kubernetes 精巧的 DNS 机制在默默护航 🌟📚 延伸阅读Kubernetes 官

avatar 2048 AI社区

谷歌王炸！编程 Agent 开源免费，百万上下文 + 多模态 + MCP 全拉满

这个名为"Gemini"的智能体不仅能读懂百万字的长篇文档，还能识别图片、视频，甚至指挥多个AI分身协同工作——而这一切完全开源免费。本文将揭秘这项技术如何颠覆普通人的生活，并通过真实案例展示它如何帮医生救命、助编剧创作、替企业省钱。家庭主妇用Gemini规划营养食谱，小店主靠它优化供应链，作家借MCP系统创作交互式小说——这不再是科幻。谷歌用免费开源证明：AI的终极使命不是榨取利润，而是让每个普

avatar 2048 AI社区