web实现视频监控技术原理

39 阅读1分钟

技术原理:

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就实现了.