169-template-156
/
blank
изданак од d8dfun/blank


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
							<!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;
      }

      /* 实时识别结果样式 */
      .realtime-display {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
      }

      .caption-container {
        margin-bottom: 20px;
      }

      .caption-container h3 {
        color: #2c3e50;
        margin-bottom: 10px;
        font-size: 16px;
      }

      .caption-text {
        background: white;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 15px;
        min-height: 60px;
        font-size: 14px;
        line-height: 1.5;
        color: #333;
      }

      .status-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #e9ecef;
      }

      .status-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 4px;
      }

      .status-item .label {
        font-weight: 600;
        color: #6c757d;
      }

      .status-item span:last-child {
        color: #495057;
        font-family: "Courier New", monospace;
        font-size: 12px;
      }
    </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>
          </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"
                value="f6ef0878d92340f88cff5c3e3d73bad2"
              />
            </div>
            <div class="form-group">
              <label for="certificate">Certificate:</label>
              <input
                type="text"
                id="certificate"
                placeholder="请输入Agora Certificate"
                value="d16304cc8bb34bccbae589835141926f"
              />
            </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="realtime-display" id="realtimeDisplay">
            <div class="caption-container">
              <h3>📝 原文识别</h3>
              <div class="caption-text" id="originalText">等待识别结果...</div>
            </div>
            <div class="caption-container">
              <h3>🌐 翻译结果</h3>
              <div class="caption-text" id="translatedText">等待翻译结果...</div>
            </div>
            <div class="status-info">
              <div class="status-item">
                <span class="label">任务ID:</span>
                <span id="taskId">未开始</span>
              </div>
              <div class="status-item">
                <span class="label">状态:</span>
                <span id="transcriptionStatus">未开始</span>
              </div>
              <div class="status-item">
                <span class="label">开始时间:</span>
                <span id="startTime">未开始</span>
              </div>
            </div>
          </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>直接script引入</strong>: 无需构建工具，直接使用</li>
            <li><strong>兼容性好</strong>: 支持各种浏览器环境</li>
          </ul>
          <p>UMD格式的优势：</p>
          <ul>
            <li>无需构建工具即可使用</li>
            <li>适合快速原型开发和演示</li>
            <li>兼容现代浏览器环境</li>
          </ul>
        </div>

        <a href="/" class="back-link">← 返回主应用</a>
      </div>
    </div>

    <!-- 直接使用script标签加载UMD格式的SDK -->
    <!-- <script src="/packages/stt-sdk-core/dist/index.umd.js"></script> -->
    <script src="https://unpkg.com/d8d-stt-sdk-core@1.0.0/dist/index.umd.js"></script>

    <script>
      let sdk = null
      let sttManager = null
      let rtmManager = null
      let rtcManager = null
      let isSdkInitialized = false
      let isRtcManagerJoined = 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("检查SDK加载状态...", "loading")

        // 检查是否已加载
        if (window.SttSdkCore) {
          addTestLog("✅ UMD SDK已加载", "success")
          updateStatus("UMD SDK已加载", "success")
          enableButtons()
        } else {
          addTestLog("❌ UMD SDK未加载，请确保script标签正确引入", "error")
          updateStatus("UMD SDK加载失败", "error")
        }
      }

      // 更新实时识别结果
      function updateRealtimeDisplay(textstream) {
        // 根据数据类型更新显示
        if (textstream.dataType === "transcribe") {
          // 原文识别结果
          const originalText = document.getElementById("originalText")
          if (textstream.words && textstream.words.length > 0) {
            const text = textstream.words.map((word) => word.text || "").join(" ")
            originalText.textContent = text
          }
        } else if (textstream.dataType === "translate") {
          // 翻译结果
          const translatedText = document.getElementById("translatedText")
          if (textstream.trans && textstream.trans.length > 0) {
            const translations = textstream.trans
              .map(
                (trans, index) =>
                  `翻译${index + 1} (${textstream.culture || "未知"}): ${trans.text || ""}`,
              )
              .join("\n")
            translatedText.textContent = translations
          }
        }

        // 更新状态信息
        document.getElementById("taskId").textContent = textstream.uid || "未知"
        document.getElementById("transcriptionStatus").textContent =
          textstream.dataType === "transcribe" ? "转录中" : "翻译中"
        document.getElementById("startTime").textContent = new Date(
          textstream.time || Date.now(),
        ).toLocaleTimeString()
      }

      // 初始化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)
              rtcManager = sdk.createRtcManager()

              // 监听RTM事件
              rtmManager.on("sttDataChanged", (data) => {
                addTestLog("收到STT数据: " + JSON.stringify(data))
              })

              // 监听RTC文本流事件
              rtcManager.on("textstreamReceived", (textstream) => {
                addTestLog("收到文本流数据: " + JSON.stringify(textstream))
                updateRealtimeDisplay(textstream)
              })

              addTestLog("STT、RTM和RTC管理器创建成功", "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 || !rtcManager) {
          addTestLog("STT管理器或RTC管理器未初始化", "error")
          return
        }

        const channel = document.getElementById("channel").value
        const userName = document.getElementById("userName").value

        addTestLog("开始测试转录功能...")

        // 生成随机用户ID
        const genRandomUserId = () => Math.floor(Math.random() * 1000000)
        const userId = genRandomUserId()

        sttManager
          .init({
            userId: userId,
            channel: channel,
            userName: userName,
          })
          .then(() => {
            addTestLog("STT管理器初始化成功", "success")

            // 加入RTC频道
            return rtcManager.join({
              channel: channel,
              userId: userId,
            })
          })
          .then(() => {
            addTestLog("RTC频道加入成功", "success")
            isRtcManagerJoined = true

            // 创建音视频轨道
            return rtcManager.createTracks()
          })
          .then(() => {
            addTestLog("音视频轨道创建成功", "success")

            // 发布音视频流
            return rtcManager.publish()
          })
          .then(() => {
            addTestLog("音视频流发布成功", "success")

            // 开始转录
            return sttManager.startTranscription({
              languages: [{ source: "zh-CN" }],
            })
          })
          .then(() => {
            addTestLog("转录功能启动成功", "success")

            // 模拟10秒后停止转录
            setTimeout(() => {
              if (sttManager) {
                sttManager
                  .stopTranscription()
                  .then(() => {
                    addTestLog("转录功能停止成功", "success")
                  })
                  .catch((error) => {
                    addTestLog("停止转录失败: " + error, "error")
                  })
              }
            }, 10000)
          })
          .catch((error) => {
            addTestLog("转录功能测试失败: " + error, "error")
          })
      }

      // 重置实时显示
      function resetRealtimeDisplay() {
        document.getElementById("originalText").textContent = "等待识别结果..."
        document.getElementById("translatedText").textContent = "等待翻译结果..."
        document.getElementById("taskId").textContent = "未开始"
        document.getElementById("transcriptionStatus").textContent = "未开始"
        document.getElementById("startTime").textContent = "未开始"
      }

      // 清理资源
      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 (rtcManager) {
          rtcManager
            .destroy()
            .then(() => {
              addTestLog("RTC管理器销毁成功", "success")
              rtcManager = null
              isRtcManagerJoined = false
            })
            .catch((error) => {
              addTestLog("RTC管理器销毁失败: " + 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
              resetRealtimeDisplay()
            })
            .catch((error) => {
              addTestLog("SDK销毁失败: " + error, "error")
            })
        }
      }

      // 启用按钮
      function enableButtons() {
        document.getElementById("initBtn").disabled = false
      }

      // 页面加载完成后检查SDK状态
      window.addEventListener("load", function () {
        addTestLog("页面加载完成，检查UMD SDK状态...")
        // 延迟检查，确保script标签已加载
        setTimeout(() => {
          loadUmdSdk()
        }, 100)
      })
    </script>
  </body>
</html>