|
|
@@ -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>
|
yourname