Spaces:
Running
Running
| # 🎤 Voice Studio - iFrame Integration Guide | |
| ## Vấn đề Microphone trong iFrame | |
| Khi embed ứng dụng Voice Studio vào iframe, microphone có thể không hoạt động do chính sách bảo mật của trình duyệt. | |
| ## ✅ Giải pháp cho Website | |
| ### 1. Thêm Permissions Policy vào iframe tag: | |
| ```html | |
| <iframe | |
| src="http://localhost:7864" | |
| width="100%" | |
| height="800" | |
| allow="microphone *; camera *; display-capture *; autoplay *" | |
| permissions-policy="microphone=*, camera=*, display-capture=*, autoplay=*" | |
| sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-presentation" | |
| frameborder="0"> | |
| </iframe> | |
| ``` | |
| ### 2. Cấu hình HTTPS (Khuyến nghị): | |
| Microphone chỉ hoạt động tốt trên HTTPS. Nếu có thể, hãy deploy ứng dụng qua HTTPS. | |
| ### 3. Alternative HTML cho iframe: | |
| ```html | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Voice Studio Demo</title> | |
| </head> | |
| <body style="margin: 0; padding: 0; overflow: hidden;"> | |
| <iframe | |
| id="voice-studio" | |
| src="http://localhost:7864" | |
| width="100%" | |
| height="100vh" | |
| allow="microphone *; camera *; display-capture *; autoplay *" | |
| permissions-policy="microphone=*, camera=*, display-capture=*, autoplay=*" | |
| sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals" | |
| frameborder="0" | |
| style="border: none;"> | |
| </iframe> | |
| <script> | |
| // Handle microphone permission fallback | |
| window.addEventListener('message', function(event) { | |
| if (event.data.type === 'microphone_error') { | |
| const fallbackDiv = document.createElement('div'); | |
| fallbackDiv.innerHTML = ` | |
| <div style=" | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| background: #ff6b6b; | |
| color: white; | |
| padding: 15px; | |
| border-radius: 8px; | |
| z-index: 9999; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.2); | |
| "> | |
| <strong>🎤 Microphone Blocked</strong><br> | |
| <button onclick="window.open('${event.data.url}', '_blank')" | |
| style="margin-top: 10px; padding: 8px 16px; background: white; color: #ff6b6b; border: none; border-radius: 4px; cursor: pointer;"> | |
| Open in New Window | |
| </button> | |
| </div> | |
| `; | |
| document.body.appendChild(fallbackDiv); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| ``` | |
| ## 🔧 Server Configuration | |
| Nếu bạn host ứng dụng trên server riêng, thêm headers sau: | |
| ```python | |
| # Trong Flask/Django | |
| response.headers['Permissions-Policy'] = 'microphone=*, camera=*, display-capture=*' | |
| response.headers['Feature-Policy'] = 'microphone \'self\' *; camera \'self\' *' | |
| response.headers['X-Frame-Options'] = 'ALLOWALL' | |
| # Hoặc trong nginx.conf | |
| add_header Permissions-Policy "microphone=*, camera=*, display-capture=*"; | |
| add_header Feature-Policy "microphone 'self' *; camera 'self' *"; | |
| add_header X-Frame-Options "ALLOWALL"; | |
| ``` | |
| ## 📱 Mobile Considerations | |
| Trên mobile, microphone trong iframe có thể bị hạn chế nhiều hơn. Khuyến nghị: | |
| 1. Hiển thị nút "Open in New Window" rõ ràng | |
| 2. Detect mobile và hiển thị thông báo phù hợp | |
| 3. Fallback to file upload nếu microphone không hoạt động | |
| ## 🚀 Best Practices | |
| 1. **HTTPS Required**: Deploy qua HTTPS để microphone hoạt động tốt nhất | |
| 2. **User Feedback**: Luôn hiển thị thông báo rõ ràng khi microphone bị block | |
| 3. **Fallback Options**: Cung cấp tùy chọn upload file thay thế | |
| 4. **Test Cross-Browser**: Test trên Chrome, Firefox, Safari, Edge | |
| ## 🔍 Debugging | |
| Mở Developer Console để xem logs: | |
| - `Running in iframe - requesting microphone permissions` | |
| - `Microphone access granted/denied` | |
| Nếu vẫn có vấn đề, users có thể click "🔗 Open in New Window" để sử dụng đầy đủ tính năng. |