技术原理:
1.客户端html5使用negavitor标签调取手机摄像头内容,将内容实时添加到video.src上.
2.canvas画布定时地从video获取内容来填充,然后将获取的图片内容 toDataUrl(转化成base64格式),通过websocket协议传递给服务端
3.服务端采用swoole+websocket,即是用swoole提供的websocket服务器,来接收客户端传输的图片内容,进行转发到其他的客户端
大致流程如下:
- 客户直播端:
negavitor获取手机摄像头内容,最终使用websocket协议,将图片内容传递到直播服务端
- 直播服务端:
接受直播端传送过的图片内容,使用swoole的websocket服务将消息转发到其他客户端
- 普通客户端:
使用websocket协议实时监听服务端传送回来的base64图片内容,赋值给img的src属性,达到每一帧图片快速替换,基本的直播demo就实现了.