🎤 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:

<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:

<!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:

# 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ị:

Hiển thị nút "Open in New Window" rõ ràng
Detect mobile và hiển thị thông báo phù hợp
Fallback to file upload nếu microphone không hoạt động

🚀 Best Practices

HTTPS Required: Deploy qua HTTPS để microphone hoạt động tốt nhất
User Feedback: Luôn hiển thị thông báo rõ ràng khi microphone bị block
Fallback Options: Cung cấp tùy chọn upload file thay thế
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.