技术原理

1. 视频采集层：获取摄像头视频流

直播端通过HTML5的navigator.mediaDevices.getUserMedia() API直接访问设备摄像头，获取实时视频流，并将其绑定到<video>元素上进行本地预览。

<!-- 核心视频元素 -->
<video id="liveVideo" autoplay muted playsinline></video>

关键技术点：

• 使用getUserMedia获取媒体流权限
• playsinline属性确保在移动端正确播放

2. 数据转换层：视频帧捕获与编码

系统通过Canvas定时捕获视频帧，并将其转换为可传输的数据格式：

// 创建离屏Canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 定时捕获视频帧
setInterval(() => {
    ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
    const frameData = canvas.toDataURL('image/jpeg', 0.8);
    websocket.send(frameData);
}, 1000 / 30); // 30fps采集

关键技术点：

• Canvas的drawImage方法捕获视频当前帧
• toDataURL将图像转为Base64格式
• 通过帧率控制优化网络带宽

3. 数据传输层：WebSocket实时通信

基于Swoole构建的高性能WebSocket服务器负责实时数据传输：

服务端核心逻辑：

$server = new Swoole\WebSocket\Server("0.0.0.0", 9501);

$server->on('message', function($server, $frame) {
    // 广播视频帧到所有连接的客户端
    foreach($server->connections as $fd) {
        if($fd !== $frame->fd) {
            $server->push($fd, $frame->data);
        }
    }
});

完整数据流转路径

直播端数据流：

摄像头 → MediaStream → Video元素 → Canvas捕获 → Base64编码 → WebSocket发送

服务端数据流：

接收直播数据 → 验证消息格式 → 广播到所有观看客户端

观看端数据流：

WebSocket接收 → Base64解码 → Image元素渲染 → 连续播放形成视频