视频监控流程图
录制端实现
视频录制端使用 H5 的 video 捕获电脑的摄像头流媒体,然后通过 canvas 将某个时间点的视频帧生成 base64编码的图片,通过 WebSocket 将base64编码的图片上传到服务器,经过服务器(信令服务器)中转到其它 WebSocket 播放端。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
服务端实现
服务端笔者采用 node 当下流行的 KOA 框架作为 Web 承载服务器,使用 koa-websocket 处理 websocket 连接,当做信令服务器。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
|
播放端实现
播放端相对简单,将 websocket 获取到的 base64图片渲染到 canvas 即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
|