在开发基于Janus Gateway的WebRTC应用时，跨域访问问题常常成为拦路虎。今天我就来分享一下如何解决这些问题的实战经验。

背景与痛点

WebRTC应用通常会遇到以下几个跨域问题：

1. 信令通道建立失败：由于浏览器的同源策略(Same-Origin Policy)，跨域WebSocket连接会被阻止
2. CORS预检请求受阻：Janus的HTTP API接口如果没有正确的CORS头，会导致OPTIONS请求失败
3. 媒体流传输中断：ICE候选(ICE Candidates)可能包含私有IP地址，在跨域环境下会被某些浏览器拦截

技术方案对比

我们主要考虑三种跨域解决方案：

• JSONP：适用于老式浏览器，但不支持WebSocket
• postMessage：需要iframe嵌套，实现复杂
• CORS：现代浏览器的标准方案，是我们的首选

Nginx配置实战

下面是Nginx的关键配置示例，同时处理CORS和WebSocket代理：

server {
    listen 443 ssl;
    server_name your.domain.com;

    # SSL配置
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    ssl_protocols TLSv1.2 TLSv1.3;

    # CORS配置
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,Content-Type,Authorization' always;

    # WebSocket代理
    location /janus {
        proxy_pass http://localhost:8188;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }
}

Janus API调用优化

在JavaScript端，我们需要处理Origin校验和WebSocket连接：

// 创建带Token的WebSocket连接
const socket = new WebSocket('wss://your.domain.com/janus');

// 连接建立后发送认证信息
socket.onopen = () => {
    const authMsg = {
        janus: "create",
        token: "your_secret_token",
        apisecret: "your_api_secret"
    };
    socket.send(JSON.stringify(authMsg));
};

// 错误处理
socket.onerror = (error) => {
    console.error('WebSocket错误:', error);
    // 实现重连逻辑
};

媒体流传输优化

对于ICE候选策略，我们可以这样配置：

const pc = new RTCPeerConnection({
    iceServers: [
        { urls: "stun:stun.l.google.com:19302" },
        { 
            urls: "turn:turn.yourdomain.com:3478",
            username: "user",
            credential: "password"
        }
    ],
    iceTransportPolicy: "relay" // 强制使用TURN服务器
});

生产环境注意事项

1. TLS加密：必须使用TLS 1.2+加密信令通道
2. STUN/TURN部署：
3. 避免单点故障
4. 考虑地理分布部署
5. 监控服务器负载
6. 浏览器兼容性：
7. Chrome 110+对私有IP限制：需要配置正确ICE策略
8. Safari的特殊处理：需要额外的媒体权限请求

最佳实践建议

1. 所有WebSocket操作都要有错误处理和重试机制
2. 媒体流传输完成后要正确释放资源
3. 实现心跳机制保持长连接
4. 监控关键指标：连接建立时间、ICE失败率等

// 资源释放示例
function cleanup() {
    if (pc) {
        pc.close();
        pc = null;
    }
    if (socket) {
        socket.close();
        socket = null;
    }
}

// 页面卸载时清理
window.addEventListener('beforeunload', cleanup);

通过以上方案，我们成功解决了Janus WebRTC的跨域问题。实际部署时，还需要根据具体业务需求调整配置参数。希望这篇笔记对正在处理类似问题的开发者有所帮助。