html5中如何查看点击范围_小猿圈简述HTML5中的websocket如何实现直播功能

现在IT发展迅速，大多数朋友无论是什么行业或者岗位都在或多或少的学习一些IT方面的知识，而web前端又是最受欢迎的一种。今天小猿圈web前端老师为你分享一下websocket如何实现直播功能，感兴趣的朋友一起看看吧。

WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。

在WebSocketAPI中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。

当你获取WebSocket连接后，你可以通过send()方法来向服务器发送数据，并通过onmessage事件来接收服务器返回的数据。

做的过程中，主要的思维是：在录像页面利用setTimeout()每隔固定的时间通过canvas将视频转化为一帧一帧的图像，然后用websocket的socket.send()将图片数据发送给服务器。在直播页面就是先创建一个<img>的结构，通过websocket的socket.onmessage()获取到图像数据，并展示<img>标签上，形成直播。

录像页面HTML结构

<videoautoplayid="sourcevid"style="wi