如何在Safari中无需HLS，通过WebSocket接收MediaSource数据并播放

不需要依赖HLS就能实现WebSocket视频流在Safari（iOS、Mac、Windows全版本）及其他浏览器的播放，下面提供两种可行方案，并附上适配代码及常见问题修正：

方案1：Blob 动态更新视频源（封装好的媒体片段） #

如果你的WebSocket传输的是带完整元数据的媒体片段（比如前置moov原子的MP4片段），可以直接将接收到的二进制数据拼接成Blob，通过URL.createObjectURL生成视频源动态更新。这种方案实现简单，无需额外转码。

方案2：MediaStream + WebRTC 转流（原始视频帧） #

如果WebSocket传输的是H.264裸帧这类原始数据，可通过RTCPeerConnection将帧数据转成MediaStream，直接绑定到video元素的srcObject，低延迟且适配所有Safari版本。

多浏览器适配代码示例 #

const video = document.getElementById('video-player');
let ws;
let mediaSource;
let blobChunkBuffer = [];
const SAFARI_DETECT = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
const BLOB_FLUSH_THRESHOLD = 5; // 每接收5个片段更新一次Blob
const BLOB_SIZE_THRESHOLD = 1024 * 1024; // 或达到1MB时更新

function initWebSocket() {
    ws = new WebSocket('ws://your-websocket-endpoint');
    ws.binaryType = 'arraybuffer'; // 必须设置为arraybuffer接收二进制数据

    ws.onopen = () => {
        console.log('WebSocket connected');
        SAFARI_DETECT ? initSafariPlayback() : initMediaSourcePlayback();
    };

    ws.onmessage = (event) => {
        SAFARI_DETECT ? handleSafariStream(event.data) : handleStandardStream(event.data);
    };

    ws.onerror = (err) => console.error('WebSocket error:', err);
}

// 非Safari：MediaSource方案
function initMediaSourcePlayback() {
    mediaSource = new MediaSource();
    video.src = URL.createObjectURL(mediaSource);

    mediaSource.addEventListener('sourceopen', () => {
        const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
        sourceBuffer.mode = 'sequence';
        window.sourceBuffer = sourceBuffer; // 调试用
    });
}

function handleStandardStream(data) {
    if (window.sourceBuffer && !window.sourceBuffer.updating) {
        try {
            window.sourceBuffer.appendBuffer(data);
        } catch (e) {
            console.error('Append buffer failed:', e);
        }
    }
}

// Safari：Blob拼接方案
function initSafariPlayback() {
    video.muted = true; // Safari强制要求静音才能自动播放
    video.preload = 'auto';
    // 必须绑定用户交互触发播放（比如点击按钮），否则会被浏览器拦截
    document.getElementById('play-btn')?.addEventListener('click', () => {
        video.play().catch(err => console.error('Play failed:', err));
    });
}

function handleSafariStream(data) {
    blobChunkBuffer.push(data);
    const totalSize = blobChunkBuffer.reduce((sum, chunk) => sum + chunk.byteLength, 0);

    // 满足任一阈值则更新视频源
    if (blobChunkBuffer.length >= BLOB_FLUSH_THRESHOLD || totalSize >= BLOB_SIZE_THRESHOLD) {
        const blob = new Blob(blobChunkBuffer, { type: 'video/mp4' });
        // 释放旧URL避免内存泄漏
        if (video.src) URL.revokeObjectURL(video.src);
        video.src = URL.createObjectURL(blob);
        blobChunkBuffer = [];
        video.play().catch(err => console.error('Play failed:', err));
    }
}

// 初始化
initWebSocket();

常见代码问题修正 #

1. Safari自动播放限制：必须设置video.muted = true，且播放动作必须由用户交互触发（比如点击按钮），否则会被浏览器拦截。
2. MediaSource误用：Safari完全不支持MediaSource，必须通过浏览器检测做分支处理，不能在Safari环境下实例化MediaSource。
3. 媒体格式不兼容：使用Blob方案时，WebSocket传输的MP4片段必须包含moov元数据原子（建议服务器先发送初始化片段，再发送媒体数据片段），否则Safari无法解码。
4. WebSocket数据类型错误：必须设置ws.binaryType = 'arraybuffer'，确保接收的是二进制数据而非字符串，否则无法用于媒体处理。
5. 内存泄漏：每次更新Blob源时，必须调用URL.revokeObjectURL(video.src)释放旧的URL对象，避免内存占用过高。

内容的提问来源于stack exchange，提问作者손지영