1.3 安装与集成 — 在 Web 项目中引入 SDK
引入方式
SDK 通过 <script> 标签引入，无需包管理器或构建工具。引入后 XmovAvatar 自动暴露到 window 全局对象。
SDK 地址
https://media.xingyun3d.com/xingyun3d/general/litesdk/xmovAvatar@latest.js
基本引入
<script src="https://media.xingyun3d.com/xingyun3d/general/litesdk/xmovAvatar@latest.js"></script>
<script>
// 通过 window.XmovAvatar 使用
const avatar = new XmovAvatar({
containerId: '#avatar-container',
appId: 'your-app-id',
appSecret: 'your-app-secret',
gatewayServer: 'https://nebula-agent.xingyun3d.com/user/v1/ttsa/session',
onMessage(error) {
console.error(error.code, error.message);
},
});
</script>
集成示例
Vanilla JS
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字人集成</title>
<style>
#avatar-container {
width: 360px;
height: 640px;
}
</style>
</head>
<body>
<div id="avatar-container"></div>
<script src="https://media.xingyun3d.com/xingyun3d/general/litesdk/xmovAvatar@latest.js"></script>
<script>
const avatar = new XmovAvatar({
containerId: '#avatar-container',
appId: 'your-app-id',
appSecret: 'your-app-secret',
gatewayServer: 'https://nebula-agent.xingyun3d.com/user/v1/ttsa/session',
onMessage(error) {
console.error(error.code, error.message);
},
});
avatar.init({
onDownloadProgress(progress) {
console.log('加载进度:', progress + '%');
},
});
window.addEventListener('beforeunload', () => {
avatar.destroy('page_unload');
});
</script>
</body>
</html>
Vue.js
<template>
<div id="avatar-container" style="width: 360px; height: 640px;"></div>
</template>
<script>
export default {
data() {
return { avatar: null };
},
mounted() {
this.avatar = new window.XmovAvatar({
containerId: '#avatar-container',
appId: 'your-app-id',
appSecret: 'your-app-secret',
gatewayServer: 'https://nebula-agent.xingyun3d.com/user/v1/ttsa/session',
onMessage(error) {
console.error(error.code, error.message);
},
});
this.avatar.init({
onDownloadProgress(progress) {
console.log('加载进度:', progress + '%');
},
});
},
beforeDestroy() {
if (this.avatar) {
this.avatar.destroy('component_destroy');
}
},
};
</script>
React
import { useEffect, useRef } from 'react';
function AvatarComponent() {
const avatarRef = useRef(null);
useEffect(() => {
const avatar = new window.XmovAvatar({
containerId: '#avatar-container',
appId: 'your-app-id',
appSecret: 'your-app-secret',
gatewayServer: 'https://nebula-agent.xingyun3d.com/user/v1/ttsa/session',
onMessage(error) {
console.error(error.code, error.message);
},
});
avatar.init({
onDownloadProgress(progress) {
console.log('加载进度:', progress + '%');
},
});
avatarRef.current = avatar;
return () => {
avatar.destroy('component_unmounted');
};
}, []);
return <div id="avatar-container" style={{ width: 360, height: 640 }} />;
}