صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
169-template-156
/
blank
برگرفته از d8dfun/blank
2
0
انشعاب 0
پرونده‌ها
فهرست منبع

✨ feat(demo): add UMD format SDK demonstration page

- create public/umd-demo.html with complete UI and interaction logic
- implement SDK loading, initialization and transcription testing functions
- add AMD module loader test using RequireJS
- include detailed usage instructions and UMD format advantages explanation
- configure build process to copy demo file to dist directory

🔧 chore(build): enhance build process for UMD demo

- update vite.config.ts to copy umd-demo.html to dist directory
- ensure UMD SDK and demo files are properly distributed in build output
yourname 3 ماه پیش
والد
aa62da9f0b
کامیت
7b1be268d1
2فایلهای تغییر یافته به همراه586 افزوده شده و 0 حذف شده
نمای یکپارچه نمایش آمار تفاوت ها
  1. 578 0
      public/umd-demo.html
  2. 8 0
      vite.config.ts

+ 578 - 0
public/umd-demo.html
مشاهده فایل 

@@ -0,0 +1,578 @@
 
+<!doctype html>
 
+<html lang="zh-CN">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>UMD格式SDK演示 - AMD模块加载器</title>
 
+    <style>
 
+      * {
 
+        margin: 0;
 
+        padding: 0;
 
+        box-sizing: border-box;
 
+      }
 
+
 
+      body {
 
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
+        min-height: 100vh;
 
+        padding: 20px;
 
+      }
 
+
 
+      .container {
 
+        max-width: 800px;
 
+        margin: 0 auto;
 
+        background: white;
 
+        border-radius: 12px;
 
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 
+        overflow: hidden;
 
+      }
 
+
 
+      .header {
 
+        background: #2c3e50;
 
+        color: white;
 
+        padding: 30px;
 
+        text-align: center;
 
+      }
 
+
 
+      .header h1 {
 
+        font-size: 2.5rem;
 
+        margin-bottom: 10px;
 
+      }
 
+
 
+      .header p {
 
+        font-size: 1.1rem;
 
+        opacity: 0.9;
 
+      }
 
+
 
+      .content {
 
+        padding: 30px;
 
+      }
 
+
 
+      .demo-section {
 
+        margin-bottom: 30px;
 
+      }
 
+
 
+      .demo-section h2 {
 
+        color: #2c3e50;
 
+        margin-bottom: 15px;
 
+        border-bottom: 2px solid #3498db;
 
+        padding-bottom: 5px;
 
+      }
 
+
 
+      .config-form {
 
+        display: grid;
 
+        gap: 15px;
 
+        margin-bottom: 20px;
 
+      }
 
+
 
+      .form-group {
 
+        display: flex;
 
+        flex-direction: column;
 
+      }
 
+
 
+      .form-group label {
 
+        font-weight: 600;
 
+        margin-bottom: 5px;
 
+        color: #2c3e50;
 
+      }
 
+
 
+      .form-group input {
 
+        padding: 10px;
 
+        border: 2px solid #ddd;
 
+        border-radius: 6px;
 
+        font-size: 14px;
 
+        transition: border-color 0.3s;
 
+      }
 
+
 
+      .form-group input:focus {
 
+        outline: none;
 
+        border-color: #3498db;
 
+      }
 
+
 
+      .buttons {
 
+        display: flex;
 
+        gap: 10px;
 
+        flex-wrap: wrap;
 
+      }
 
+
 
+      .btn {
 
+        padding: 12px 20px;
 
+        border: none;
 
+        border-radius: 6px;
 
+        font-size: 14px;
 
+        font-weight: 600;
 
+        cursor: pointer;
 
+        transition: all 0.3s;
 
+        text-decoration: none;
 
+        display: inline-flex;
 
+        align-items: center;
 
+        justify-content: center;
 
+      }
 
+
 
+      .btn-primary {
 
+        background: #3498db;
 
+        color: white;
 
+      }
 
+
 
+      .btn-primary:hover {
 
+        background: #2980b9;
 
+        transform: translateY(-1px);
 
+      }
 
+
 
+      .btn-success {
 
+        background: #27ae60;
 
+        color: white;
 
+      }
 
+
 
+      .btn-success:hover {
 
+        background: #229954;
 
+        transform: translateY(-1px);
 
+      }
 
+
 
+      .btn-danger {
 
+        background: #e74c3c;
 
+        color: white;
 
+      }
 
+
 
+      .btn-danger:hover {
 
+        background: #c0392b;
 
+        transform: translateY(-1px);
 
+      }
 
+
 
+      .btn:disabled {
 
+        background: #bdc3c7;
 
+        cursor: not-allowed;
 
+        transform: none;
 
+      }
 
+
 
+      .status {
 
+        background: #f8f9fa;
 
+        border-left: 4px solid #3498db;
 
+        padding: 15px;
 
+        margin: 20px 0;
 
+        border-radius: 4px;
 
+      }
 
+
 
+      .log {
 
+        background: #1a1a1a;
 
+        color: #00ff00;
 
+        padding: 15px;
 
+        border-radius: 6px;
 
+        font-family: "Courier New", monospace;
 
+        font-size: 12px;
 
+        max-height: 300px;
 
+        overflow-y: auto;
 
+        margin: 20px 0;
 
+      }
 
+
 
+      .log-entry {
 
+        margin-bottom: 5px;
 
+        line-height: 1.4;
 
+      }
 
+
 
+      .info-box {
 
+        background: #e8f4fd;
 
+        border: 1px solid #b3e0ff;
 
+        border-radius: 6px;
 
+        padding: 15px;
 
+        margin: 20px 0;
 
+      }
 
+
 
+      .info-box h3 {
 
+        color: #0066cc;
 
+        margin-bottom: 10px;
 
+      }
 
+
 
+      .info-box ul {
 
+        margin-left: 20px;
 
+      }
 
+
 
+      .info-box li {
 
+        margin-bottom: 5px;
 
+      }
 
+
 
+      .back-link {
 
+        display: inline-block;
 
+        margin-top: 20px;
 
+        color: #3498db;
 
+        text-decoration: none;
 
+        font-weight: 600;
 
+      }
 
+
 
+      .back-link:hover {
 
+        text-decoration: underline;
 
+      }
 
+
 
+      .loading {
 
+        color: #f39c12;
 
+      }
 
+
 
+      .success {
 
+        color: #27ae60;
 
+      }
 
+
 
+      .error {
 
+        color: #e74c3c;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <div class="header">
 
+        <h1>🌐 UMD格式SDK演示</h1>
 
+        <p>使用AMD模块加载器演示SDK功能</p>
 
+      </div>
 
+
 
+      <div class="content">
 
+        <div class="demo-section">
 
+          <h2>📦 SDK加载状态</h2>
 
+          <div class="status" id="sdkStatus">
 
+            <div id="statusText">等待加载SDK...</div>
 
+          </div>
 
+
 
+          <div class="buttons">
 
+            <button class="btn btn-primary" onclick="loadUmdSdk()" id="loadBtn">加载UMD SDK</button>
 
+            <button class="btn btn-success" onclick="testAmdLoader()" id="amdBtn" disabled>
 
+              测试AMD加载器
 
+            </button>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="demo-section">
 
+          <h2>🔧 SDK配置</h2>
 
+          <div class="config-form">
 
+            <div class="form-group">
 
+              <label for="appId">App ID:</label>
 
+              <input type="text" id="appId" placeholder="请输入Agora App ID" />
 
+            </div>
 
+            <div class="form-group">
 
+              <label for="certificate">Certificate:</label>
 
+              <input type="text" id="certificate" placeholder="请输入Agora Certificate" />
 
+            </div>
 
+            <div class="form-group">
 
+              <label for="channel">频道名称:</label>
 
+              <input
 
+                type="text"
 
+                id="channel"
 
+                value="umd-demo-channel"
 
+                placeholder="请输入频道名称"
 
+              />
 
+            </div>
 
+            <div class="form-group">
 
+              <label for="userName">用户名称:</label>
 
+              <input type="text" id="userName" value="UMD Demo User" placeholder="请输入用户名称" />
 
+            </div>
 
+          </div>
 
+
 
+          <div class="buttons">
 
+            <button class="btn btn-primary" onclick="initializeSdk()" id="initBtn" disabled>
 
+              初始化SDK
 
+            </button>
 
+            <button
 
+              class="btn btn-success"
 
+              onclick="testTranscription()"
 
+              id="transcribeBtn"
 
+              disabled
 
+            >
 
+              测试转录功能
 
+            </button>
 
+            <button class="btn btn-danger" onclick="cleanup()" id="cleanupBtn" disabled>
 
+              清理资源
 
+            </button>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="demo-section">
 
+          <h2>📋 测试日志</h2>
 
+          <div class="log" id="testLog">
 
+            <div class="log-entry">欢迎使用UMD格式SDK演示页面！</div>
 
+          </div>
 
+
 
+          <button class="btn" onclick="clearLog()">清空日志</button>
 
+        </div>
 
+
 
+        <div class="info-box">
 
+          <h3>💡 使用说明</h3>
 
+          <p>此页面演示了UMD格式SDK的多种使用方式：</p>
 
+          <ul>
 
+            <li><strong>全局变量方式</strong>: 通过 window.SttSdkCore 访问SDK</li>
 
+            <li><strong>AMD加载器</strong>: 使用RequireJS等AMD加载器</li>
 
+            <li><strong>CommonJS</strong>: 在Node.js环境中使用</li>
 
+          </ul>
 
+          <p>UMD格式的优势：</p>
 
+          <ul>
 
+            <li>兼容多种模块系统</li>
 
+            <li>无需构建工具即可使用</li>
 
+            <li>适合快速原型开发和演示</li>
 
+          </ul>
 
+        </div>
 
+
 
+        <a href="/" class="back-link">← 返回主应用</a>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 引入RequireJS作为AMD加载器示例 -->
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
 
+
 
+    <script>
 
+      let sdk = null
 
+      let sttManager = null
 
+      let rtmManager = null
 
+      let isSdkInitialized = false
 
+
 
+      // 添加测试日志
 
+      function addTestLog(message, type = "info") {
 
+        const log = document.getElementById("testLog")
 
+        const entry = document.createElement("div")
 
+        entry.className = "log-entry"
 
+
 
+        const timestamp = new Date().toLocaleTimeString()
 
+        const prefix = type === "error" ? "❌" : type === "success" ? "✅" : "📝"
 
+
 
+        entry.innerHTML = `<span class="${type}">${prefix} ${timestamp}: ${message}</span>`
 
+        log.appendChild(entry)
 
+        log.scrollTop = log.scrollHeight
 
+      }
 
+
 
+      // 更新状态显示
 
+      function updateStatus(message, type = "info") {
 
+        const statusText = document.getElementById("statusText")
 
+        statusText.innerHTML = message
 
+        statusText.className = type
 
+      }
 
+
 
+      // 清空日志
 
+      function clearLog() {
 
+        const log = document.getElementById("testLog")
 
+        log.innerHTML = '<div class="log-entry">日志已清空</div>'
 
+      }
 
+
 
+      // 动态加载UMD格式的SDK
 
+      function loadUmdSdk() {
 
+        addTestLog("开始加载UMD格式SDK...")
 
+        updateStatus("正在加载UMD SDK...", "loading")
 
+
 
+        // 检查是否已加载
 
+        if (window.SttSdkCore) {
 
+          addTestLog("UMD SDK已加载", "success")
 
+          updateStatus("UMD SDK已加载", "success")
 
+          enableButtons()
 
+          return
 
+        }
 
+
 
+        // 动态创建script标签加载UMD SDK
 
+        const script = document.createElement("script")
 
+        script.src = "/packages/stt-sdk-core/dist/index.umd.js"
 
+        script.type = "text/javascript"
 
+        script.async = true
 
+
 
+        script.onload = () => {
 
+          addTestLog("UMD SDK加载成功", "success")
 
+          updateStatus("UMD SDK加载成功", "success")
 
+          enableButtons()
 
+        }
 
+
 
+        script.onerror = () => {
 
+          addTestLog("UMD SDK加载失败", "error")
 
+          updateStatus("UMD SDK加载失败", "error")
 
+        }
 
+
 
+        document.head.appendChild(script)
 
+      }
 
+
 
+      // 测试AMD模块加载器
 
+      function testAmdLoader() {
 
+        addTestLog("开始测试AMD模块加载器...")
 
+
 
+        // 配置RequireJS
 
+        require.config({
 
+          paths: {
 
+            "stt-sdk-core": "/packages/stt-sdk-core/dist/index.umd",
 
+          },
 
+        })
 
+
 
+        // 使用AMD方式加载SDK
 
+        require(["stt-sdk-core"], function (SttSdkCore) {
 
+          addTestLog("AMD方式加载SDK成功", "success")
 
+
 
+          // 测试SDK功能
 
+          try {
 
+            const SttSdk = SttSdkCore.default || SttSdkCore.SttSdk
 
+            const testSdk = new SttSdk()
 
+
 
+            addTestLog("AMD方式创建SDK实例成功", "success")
 
+            addTestLog("AMD模块加载器测试完成", "success")
 
+          } catch (error) {
 
+            addTestLog("AMD方式创建SDK实例失败: " + error, "error")
 
+          }
 
+        }, function (error) {
 
+          addTestLog("AMD方式加载SDK失败: " + error, "error")
 
+        })
 
+      }
 
+
 
+      // 初始化SDK
 
+      function initializeSdk() {
 
+        const appId = document.getElementById("appId").value
 
+        const certificate = document.getElementById("certificate").value
 
+        const channel = document.getElementById("channel").value
 
+        const userName = document.getElementById("userName").value
 
+
 
+        if (!appId || !certificate) {
 
+          addTestLog("请填写App ID和Certificate", "error")
 
+          return
 
+        }
 
+
 
+        if (!window.SttSdkCore) {
 
+          addTestLog("UMD SDK未加载，请先加载SDK", "error")
 
+          return
 
+        }
 
+
 
+        addTestLog("开始初始化UMD SDK...")
 
+
 
+        try {
 
+          // 使用UMD格式的SDK
 
+          const SttSdk = window.SttSdkCore.default || window.SttSdkCore.SttSdk
 
+          sdk = new SttSdk()
 
+
 
+          sdk
 
+            .initialize({
 
+              appId: appId,
 
+              certificate: certificate,
 
+              logLevel: "info",
 
+            })
 
+            .then(() => {
 
+              isSdkInitialized = true
 
+              addTestLog("UMD SDK初始化成功", "success")
 
+              updateStatus("SDK已初始化", "success")
 
+
 
+              // 创建管理器
 
+              rtmManager = sdk.createRtmManager()
 
+              sttManager = sdk.createSttManager(rtmManager)
 
+
 
+              // 监听事件
 
+              rtmManager.on("sttDataChanged", (data) => {
 
+                addTestLog("收到STT数据: " + JSON.stringify(data))
 
+              })
 
+
 
+              addTestLog("STT和RTM管理器创建成功", "success")
 
+              document.getElementById("transcribeBtn").disabled = false
 
+              document.getElementById("cleanupBtn").disabled = false
 
+            })
 
+            .catch((error) => {
 
+              addTestLog("SDK初始化失败: " + error, "error")
 
+            })
 
+        } catch (error) {
 
+          addTestLog("SDK初始化异常: " + error, "error")
 
+        }
 
+      }
 
+
 
+      // 测试转录功能
 
+      function testTranscription() {
 
+        if (!sttManager) {
 
+          addTestLog("STT管理器未初始化", "error")
 
+          return
 
+        }
 
+
 
+        const channel = document.getElementById("channel").value
 
+        const userName = document.getElementById("userName").value
 
+
 
+        addTestLog("开始测试转录功能...")
 
+
 
+        // 生成随机用户ID
 
+        const genRandomUserId = () => Math.floor(Math.random() * 1000000)
 
+
 
+        sttManager
 
+          .init({
 
+            userId: genRandomUserId(),
 
+            channel: channel,
 
+            userName: userName,
 
+          })
 
+          .then(() => {
 
+            addTestLog("STT管理器初始化成功", "success")
 
+
 
+            // 开始转录
 
+            return sttManager.startTranscription({
 
+              languages: [{ source: "zh-CN" }],
 
+            })
 
+          })
 
+          .then(() => {
 
+            addTestLog("转录功能启动成功", "success")
 
+
 
+            // 模拟5秒后停止转录
 
+            setTimeout(() => {
 
+              if (sttManager) {
 
+                sttManager
 
+                  .stopTranscription()
 
+                  .then(() => {
 
+                    addTestLog("转录功能停止成功", "success")
 
+                  })
 
+                  .catch((error) => {
 
+                    addTestLog("停止转录失败: " + error, "error")
 
+                  })
 
+              }
 
+            }, 5000)
 
+          })
 
+          .catch((error) => {
 
+            addTestLog("转录功能测试失败: " + error, "error")
 
+          })
 
+      }
 
+
 
+      // 清理资源
 
+      function cleanup() {
 
+        addTestLog("开始清理资源...")
 
+
 
+        if (sttManager) {
 
+          sttManager
 
+            .destroy()
 
+            .then(() => {
 
+              addTestLog("STT管理器销毁成功", "success")
 
+              sttManager = null
 
+            })
 
+            .catch((error) => {
 
+              addTestLog("STT管理器销毁失败: " + error, "error")
 
+            })
 
+        }
 
+
 
+        if (rtmManager) {
 
+          rtmManager
 
+            .destroy()
 
+            .then(() => {
 
+              addTestLog("RTM管理器销毁成功", "success")
 
+              rtmManager = null
 
+            })
 
+            .catch((error) => {
 
+              addTestLog("RTM管理器销毁失败: " + error, "error")
 
+            })
 
+        }
 
+
 
+        if (sdk) {
 
+          sdk
 
+            .destroy()
 
+            .then(() => {
 
+              addTestLog("SDK销毁成功", "success")
 
+              sdk = null
 
+              isSdkInitialized = false
 
+              updateStatus("资源已清理", "info")
 
+              document.getElementById("transcribeBtn").disabled = true
 
+              document.getElementById("cleanupBtn").disabled = true
 
+            })
 
+            .catch((error) => {
 
+              addTestLog("SDK销毁失败: " + error, "error")
 
+            })
 
+        }
 
+      }
 
+
 
+      // 启用按钮
 
+      function enableButtons() {
 
+        document.getElementById("amdBtn").disabled = false
 
+        document.getElementById("initBtn").disabled = false
 
+      }
 
+
 
+      // 页面加载完成后自动加载SDK
 
+      window.addEventListener("load", function () {
 
+        addTestLog("页面加载完成，开始自动加载UMD SDK...")
 
+        loadUmdSdk()
 
+      })
 
+    </script>
 
+  </body>
 
+</html>

+ 8 - 0
vite.config.ts
مشاهده فایل 

@@ -51,6 +51,8 @@ export default defineConfig(({ mode }) => {
 
         closeBundle() {
 
         closeBundle() {
 
           const umdSource = join(__dirname, "packages/stt-sdk-core/dist/index.umd.js")
 
           const umdSource = join(__dirname, "packages/stt-sdk-core/dist/index.umd.js")
 
           const umdDest = join(__dirname, "dist/packages/stt-sdk-core/dist/index.umd.js")
 
           const umdDest = join(__dirname, "dist/packages/stt-sdk-core/dist/index.umd.js")
 
+          const demoSource = join(__dirname, "public/umd-demo.html")
 
+          const demoDest = join(__dirname, "dist/umd-demo.html")
 
 
 
           if (existsSync(umdSource)) {
 
           if (existsSync(umdSource)) {
 
             // 确保目标目录存在
 
             // 确保目标目录存在
 
@@ -63,6 +65,12 @@ export default defineConfig(({ mode }) => {
 
             copyFileSync(umdSource, umdDest)
 
             copyFileSync(umdSource, umdDest)
 
             console.log("✅ UMD文件已复制到dist目录")
 
             console.log("✅ UMD文件已复制到dist目录")
 
           }
 
           }
 
+
 
+          if (existsSync(demoSource)) {
 
+            // 复制演示HTML文件
 
+            copyFileSync(demoSource, demoDest)
 
+            console.log("✅ UMD演示文件已复制到dist目录")
 
+          }
 
         },
 
         },
 
       },
 
       },
 
     ],
 
     ],