如何用WebRTC共享本地视频文件流？本地可用线上失效求解决

核心问题原因 #

线上环境失效主要源于以下浏览器安全限制和代码兼容性问题：

• 同源策略限制：线上环境中视频文件若与页面不同域，浏览器会阻止captureStream()获取媒体流，这是跨域资源的安全保护机制。
• HTTPS强制要求：除localhost外，现代浏览器要求WebRTC及媒体捕获相关API必须在HTTPS环境下运行，非HTTPS的线上站点会直接禁用这些功能。
• 代码兼容性问题：$.browser.mozilla是已废弃的jQuery API，可能导致浏览器判断错误，进而无法正确获取流；同时mozCaptureStream()已被标准的captureStream()替代。
• 视频加载时机不稳定：线上网络环境下，onloadeddata触发时视频可能未完全就绪，导致流获取失败。

具体修复步骤 #

1. 确保视频资源同源 #

线上部署时，将视频文件放在与页面相同的域名下，或配置服务器允许视频资源的跨域访问（如设置CORS响应头）。

2. 切换到HTTPS环境 #

线上站点必须部署在HTTPS协议下，这是浏览器允许WebRTC和媒体捕获API正常工作的前提。

3. 修复浏览器判断与API兼容问题 #

废弃旧的浏览器检测和前缀API，统一使用标准的captureStream()：

var video = document.getElementById('myVideo');
var stream;
var rTCPeerConnection;

video.onloadeddata = function(){
    // 直接使用标准API，现代浏览器均支持
    stream = this.captureStream();
}

video.src= "./myfile.webm";

function share_stream_to_peerConnection(){
    // 先判断stream是否存在，避免线上加载慢导致的报错
    if (!stream) {
        console.error("视频流未成功获取");
        return;
    }
    stream.getTracks().forEach(track => rTCPeerConnection.addTrack(track, stream));
}

4. 优化视频加载时机 #

改用canplaythrough事件替代onloadeddata，该事件触发时视频已足够加载到可流畅播放，能更稳定地获取流：

video.addEventListener('canplaythrough', function() {
    stream = this.captureStream();
}, false);

额外验证点 #

• 检查线上视频文件路径是否正确，确保./myfile.webm能正常访问（可在浏览器控制台查看网络请求状态）。
• 在浏览器控制台查看是否有跨域或权限相关的报错，根据提示进一步排查。

内容的提问来源于stack exchange，提问作者Mahdi