customer-chat-sdk 1.0.33 → 1.0.34

package/dist/customer-sdk.esm.js

@@ -6503,13 +6503,17 @@ class ScreenshotManager {
         this.visibleElementsCache = new Set();
         // 预连接状态
         this.preconnected = false;
+        // 图片下载队列和并发控制（防止频繁截图时重复下载）
+        this.imageDownloadQueue = new Map(); // URL -> Promise，避免重复下载
+        this.activeDownloads = new Set(); // 正在下载的 URL
+        this.maxConcurrentImageDownloads = 5; // 最大并发下载数（降低，避免内存问题）
         // 全局错误处理器
         this.globalErrorHandler = null;
         this.globalRejectionHandler = null;
         this.targetElement = targetElement;
         this.options = {
             interval: options.interval ?? 5000,
-            quality: options.quality ?? 0.4,
+            quality: options.quality ?? 0.3, // 降低默认质量：0.4 -> 0.3，减少 base64 大小
             scale: options.scale ?? 1,
             maxHistory: options.maxHistory ?? 10,
             compress: options.compress ?? false,
@@ -6533,7 +6537,9 @@ class ScreenshotManager {
             useIntersectionObserver: options.useIntersectionObserver ?? true, // 默认使用 Intersection Observer
             fetchPriority: options.fetchPriority ?? 'high', // 默认高优先级
             maxCacheSize: options.maxCacheSize ?? 50, // 默认最大50MB
-            maxCacheAge: options.maxCacheAge ?? 86400000 // 默认24小时（86400000ms）
+            maxCacheAge: options.maxCacheAge ?? 86400000, // 默认24小时（86400000ms）
+            maxImageSize: options.maxImageSize ?? 5, // 不使用代理时，单个图片最大尺寸（MB），默认5MB
+            skipLargeImages: options.skipLargeImages ?? true // 不使用代理时，是否跳过过大的图片，默认true（跳过）
         };
         this.setupMessageListener();
         this.setupVisibilityChangeListener();
@@ -7090,13 +7096,19 @@ class ScreenshotManager {
         }
         const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
         const isLowEndDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
-        const mobileQuality = isMobile || isLowEndDevice ? Math.max(this.options.quality * 0.7, 0.3) : this.options.quality;
-        // 不限制宽度和高度，让 modern-screenshot 自动处理完整内容
-        // 只在需要压缩时才应用尺寸限制
+        // 进一步降低质量以减少 base64 大小
+        // 桌面设备：使用配置的质量（默认 0.3）
+        // 移动设备/低端设备：进一步降低到 0.2（最低）
+        const finalQuality = isMobile || isLowEndDevice
+            ? Math.max(this.options.quality * 0.65, 0.2) // 移动设备：质量 * 0.65，最低 0.2
+            : this.options.quality; // 桌面设备：使用配置的质量（默认 0.3）
+        // 计算压缩后的尺寸（对所有元素都应用，包括 document.body）
+        // 这样可以避免生成过大的截图，减少 base64 大小
         const { width, height } = this.calculateCompressedSize(elementWidth, elementHeight, this.options.maxWidth, this.options.maxHeight);
-        // 如果计算后的尺寸小于元素实际尺寸，说明需要压缩，否则使用元素实际尺寸
-        const finalWidth = width < elementWidth ? width : undefined;
-        const finalHeight = height < elementHeight ? height : undefined;
+        // 对于所有元素都应用尺寸限制（包括 body），避免截图过大
+        // 如果计算后的尺寸小于元素实际尺寸，使用压缩尺寸；否则使用元素实际尺寸（但不超过最大值）
+        const finalWidth = width < elementWidth ? width : Math.min(elementWidth, this.options.maxWidth);
+        const finalHeight = height < elementHeight ? height : Math.min(elementHeight, this.options.maxHeight);
         // 处理跨域图片的函数
         const handleCrossOriginImage = async (url) => {
             // 如果是 data URL 或 blob URL，直接返回
@@ -7195,9 +7207,64 @@ class ScreenshotManager {
                     return url;
                 }
             }
-            // 如果没有配置代理，尝试使用 CORS
+            // 如果没有配置代理，需要添加内存保护机制
+            // 不使用代理时，modern-screenshot 会直接下载图片，可能导致内存问题
+            // 由于已配置 CORS，可以直接下载并检查大小
             if (this.options.enableCORS) {
-                return url;
+                // 对于不使用代理的情况，添加内存保护和缓存机制：
+                // 1. 先检查内存缓存（避免重复下载）
+                // 2. 检查 IndexedDB 缓存
+                // 3. 使用下载队列避免并发重复下载
+                // 4. 下载时检查大小，如果过大则使用占位符
+                // 先检查内存缓存（优先使用缓存，避免重复下载）
+                const cachedDataUrl = this.getCachedImage(url);
+                if (cachedDataUrl) {
+                    if (!this.options.silentMode) {
+                        console.log(`📸 ✅ 使用内存缓存图片（无代理模式）: ${url.substring(0, 50)}...`);
+                    }
+                    return cachedDataUrl;
+                }
+                // 检查 IndexedDB 缓存（如果启用）
+                if (this.options.useIndexedDB) {
+                    const indexedDBCache = await this.getIndexedDBCache(url);
+                    if (indexedDBCache) {
+                        // 同步到内存缓存
+                        this.setCachedImage(url, indexedDBCache);
+                        if (!this.options.silentMode) {
+                            console.log(`📸 ✅ 使用 IndexedDB 缓存图片（无代理模式）: ${url.substring(0, 50)}...`);
+                        }
+                        return indexedDBCache;
+                    }
+                }
+                // 检查是否正在下载（避免重复下载）
+                if (this.imageDownloadQueue.has(url)) {
+                    // 如果已经在下载队列中，等待现有下载完成
+                    if (!this.options.silentMode) {
+                        console.log(`📸 ⏳ 等待图片下载完成: ${url.substring(0, 50)}...`);
+                    }
+                    return await this.imageDownloadQueue.get(url);
+                }
+                // 检查并发下载数限制
+                if (this.activeDownloads.size >= this.maxConcurrentImageDownloads) {
+                    // 并发数已满，返回原 URL，让 modern-screenshot 自己处理（可能会失败，但不阻塞）
+                    if (!this.options.silentMode) {
+                        console.warn(`📸 ⚠️ 并发下载数已满（${this.activeDownloads.size}/${this.maxConcurrentImageDownloads}），跳过: ${url.substring(0, 50)}...`);
+                    }
+                    return url;
+                }
+                // 创建下载 Promise 并加入队列
+                const downloadPromise = this.downloadImageWithoutProxy(url);
+                this.imageDownloadQueue.set(url, downloadPromise);
+                this.activeDownloads.add(url);
+                try {
+                    const result = await downloadPromise;
+                    return result;
+                }
+                finally {
+                    // 下载完成后清理
+                    this.imageDownloadQueue.delete(url);
+                    this.activeDownloads.delete(url);
+                }
             }
             // 默认返回原 URL
             return url;
@@ -7218,11 +7285,14 @@ class ScreenshotManager {
             }
             this.screenshotContext = null;
         }
+        // Worker 数量配置：移动设备/低端设备使用 1 个 Worker，桌面设备使用 2 个
+        // workerNumber > 0 会启用 Worker 模式，截图处理在后台线程执行，不会阻塞主线程 UI
         const workerNumber = isMobile || isLowEndDevice ? 1 : 2;
         // 构建 createContext 配置
+        // 参考: https://github.com/qq15725/modern-screenshot/blob/main/src/options.ts
         const contextOptions = {
-            workerNumber,
-            quality: mobileQuality,
+            workerNumber, // Worker 数量，> 0 启用 Worker 模式
+            quality: finalQuality, // 图片质量（0-1），已优化为更低的值以减少 base64 大小
             fetchFn: handleCrossOriginImage, // 使用代理服务器处理跨域图片
             fetch: {
                 requestInit: {
@@ -7230,35 +7300,45 @@ class ScreenshotManager {
                 },
                 bypassingCache: true,
             },
+            // 设置最大 canvas 尺寸，防止生成过大的 canvas（避免内存问题）
+            // 参考: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
+            // 大多数浏览器限制为 16,777,216 像素（4096x4096），这里设置为更保守的值
+            maximumCanvasSize: 16777216, // 16M 像素（约 4096x4096）
         };
-        // 对于 document.body，不设置 width/height，让 modern-screenshot 自动处理完整页面
-        // 只有在需要压缩且不是 body 元素时才指定尺寸
-        if (element !== document.body && element !== document.documentElement) {
-            if (finalWidth && finalHeight && (finalWidth < elementWidth || finalHeight < elementHeight)) {
-                contextOptions.width = finalWidth;
-                contextOptions.height = finalHeight;
-                if (!this.options.silentMode) {
-                    console.log(`📸 使用压缩尺寸: ${finalWidth}x${finalHeight}`);
+        // 对所有元素都设置尺寸限制（包括 document.body），避免截图过大
+        // 这样可以减少 base64 大小，提高性能
+        if (finalWidth && finalHeight) {
+            contextOptions.width = finalWidth;
+            contextOptions.height = finalHeight;
+            if (!this.options.silentMode) {
+                if (element === document.body || element === document.documentElement) {
+                    console.log(`📸 截取完整页面（document.body），使用压缩尺寸: ${finalWidth}x${finalHeight}`);
                 }
-            }
-            else {
-                if (!this.options.silentMode) {
-                    console.log(`📸 使用元素实际尺寸: ${elementWidth}x${elementHeight}`);
+                else {
+                    console.log(`📸 使用压缩尺寸: ${finalWidth}x${finalHeight}`);
                 }
             }
         }
         else {
-            // 对于 body，不设置尺寸限制，让 modern-screenshot 自动截取完整页面
             if (!this.options.silentMode) {
-                console.log(`📸 截取完整页面（document.body），不设置尺寸限制（让 modern-screenshot 自动处理）`);
+                console.log(`📸 使用元素实际尺寸: ${elementWidth}x${elementHeight}`);
             }
         }
-        // 如果指定了缩放比例，添加缩放配置
+        // 缩放配置：移动设备使用更低的缩放比例，进一步减少图片大小
+        // scale < 1 会降低图片分辨率，减少 base64 大小
         if (this.options.scale !== 1) {
-            contextOptions.scale = isMobile ? 0.8 : this.options.scale;
+            contextOptions.scale = isMobile ? 0.7 : this.options.scale; // 移动设备：0.8 -> 0.7
         }
-        // modern-screenshot 会自动处理 worker URL，不需要手动设置
+        else if (isMobile) {
+            // 如果未指定 scale，移动设备默认使用 0.7
+            contextOptions.scale = 0.7;
+        }
+        // modern-screenshot 会自动处理 worker URL，不需要手动设置 workerUrl
+        // 当 workerNumber > 0 时，截图处理会在 Worker 线程中执行，不会阻塞主线程 UI
         // 创建 Worker 上下文（每次截图都创建新的，确保元素状态最新）
+        if (!this.options.silentMode) {
+            console.log(`📸 Worker 模式: ${workerNumber} 个 Worker，质量: ${finalQuality.toFixed(2)}，缩放: ${contextOptions.scale || 1}`);
+        }
         this.screenshotContext = await createContext$1(element, contextOptions);
         try {
             // 使用 Worker 上下文进行截图
@@ -7287,7 +7367,8 @@ class ScreenshotManager {
                     img.src = dataUrl;
                 });
                 let mimeType = 'image/jpeg';
-                let finalQuality = mobileQuality;
+                // 使用与 createContext 相同的质量设置
+                let conversionQuality = finalQuality;
                 if (this.options.outputFormat === 'webp' && !isMobile) {
                     try {
                         const testCanvas = document.createElement('canvas');
@@ -7302,9 +7383,10 @@ class ScreenshotManager {
                         mimeType = 'image/jpeg';
                     }
                 }
+                // 使用优化后的质量进行格式转换
                 const convertedDataUrl = mimeType === 'image/png'
                     ? canvas.toDataURL(mimeType)
-                    : canvas.toDataURL(mimeType, finalQuality);
+                    : canvas.toDataURL(mimeType, conversionQuality);
                 return convertedDataUrl;
             }
             return dataUrl;
@@ -7780,6 +7862,87 @@ class ScreenshotManager {
         }
         return dataUrl;
     }
+    /**
+     * 不使用代理时下载图片（带内存保护）
+     */
+    async downloadImageWithoutProxy(url) {
+        try {
+            // 直接下载图片并检查大小
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), this.options.imageLoadTimeout || 5000);
+            const response = await fetch(url, {
+                method: 'GET',
+                mode: 'cors',
+                credentials: 'omit',
+                cache: 'no-cache',
+                signal: controller.signal
+            }).catch(() => null).finally(() => {
+                clearTimeout(timeoutId);
+            });
+            if (response && response.ok) {
+                // 检查 Content-Length（如果可用）
+                const contentLength = response.headers.get('content-length');
+                if (contentLength) {
+                    const sizeMB = parseInt(contentLength, 10) / (1024 * 1024);
+                    const maxSizeMB = this.options.maxImageSize || 5;
+                    if (sizeMB > maxSizeMB) {
+                        if (this.options.skipLargeImages) {
+                            // 跳过过大的图片，返回占位符
+                            if (!this.options.silentMode) {
+                                console.warn(`📸 ⚠️ 跳过过大图片（${sizeMB.toFixed(2)}MB > ${maxSizeMB}MB）: ${url.substring(0, 100)}...`);
+                            }
+                            // 返回一个 1x1 的透明占位符，避免截图失败
+                            return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+                        }
+                        else {
+                            // 不跳过，但添加警告
+                            if (!this.options.silentMode) {
+                                console.warn(`📸 ⚠️ 图片较大（${sizeMB.toFixed(2)}MB），可能导致内存问题: ${url.substring(0, 100)}...`);
+                            }
+                        }
+                    }
+                }
+                // 如果大小检查通过或无法获取大小，下载图片并转换为 data URL
+                // 但为了进一步保护内存，在下载 blob 后也检查实际大小
+                const blob = await response.blob();
+                const blobSizeMB = blob.size / (1024 * 1024);
+                const maxSizeMB = this.options.maxImageSize || 5;
+                if (blobSizeMB > maxSizeMB) {
+                    if (this.options.skipLargeImages) {
+                        // 跳过过大的图片，返回占位符
+                        if (!this.options.silentMode) {
+                            console.warn(`📸 ⚠️ 跳过过大图片（实际大小 ${blobSizeMB.toFixed(2)}MB > ${maxSizeMB}MB）: ${url.substring(0, 100)}...`);
+                        }
+                        return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+                    }
+                    else {
+                        // 不跳过，但添加警告
+                        if (!this.options.silentMode) {
+                            console.warn(`📸 ⚠️ 图片较大（实际大小 ${blobSizeMB.toFixed(2)}MB），可能导致内存问题: ${url.substring(0, 100)}...`);
+                        }
+                    }
+                }
+                // 转换为 data URL
+                const dataUrl = await this.blobToDataUrl(blob);
+                // 缓存结果（带时间戳，10分钟有效）
+                this.setCachedImage(url, dataUrl);
+                // 如果启用 IndexedDB，也保存到 IndexedDB
+                if (this.options.useIndexedDB) {
+                    await this.setIndexedDBCache(url, dataUrl);
+                }
+                return dataUrl;
+            }
+            // 如果下载失败，返回原 URL，让 modern-screenshot 自己处理
+            return url;
+        }
+        catch (error) {
+            // 下载失败，返回原 URL，让 modern-screenshot 自己处理
+            if (!this.options.silentMode) {
+                console.warn(`📸 ⚠️ 下载图片失败: ${url.substring(0, 100)}...`, error);
+            }
+            return url;
+        }
+    }
     /**
      * 将 blob 转换为 data URL
      */