现在 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="width:1600;height:900px">
- </video>
- <canvasid="output" style="display:none">
- </canvas>
录像页面 JS
- <scripttype="text/javascript" charset="utf-8">
- // 创建一个 + 实例 varsocket=newWebSocket("ws://"+document.domain+":8080");
- varback=document.getElementById('output'); // 返回一个用于在画布上绘图的环境. varbackcontext=back.getContext('2d');
- varvideo=document.getElementsByTagName('video')[0]; varsuccess=function(stream){
- // 获取视屏流, 转换为 url video.src=Windows.URL.createObjectURL(stream); } // 打开
- socket socket.onopen=function(){ draw(); console.log("opensuccess") } //
- 将视频帧绘制到 Canvas 对象上, Canvas 每 100ms 切换帧, 形成肉眼视频效果 vardraw=function(){ try{
- backcontext.drawImage(video,0,0,back.width,back.height); }catch(e){ if(e.name=="NS_ERROR_NOT_AVAILABLE"){
- returnsetTimeout(draw,100); }else{ throwe; } } if(video.src){ //Canvas
- 的内容转化成 PNGdataURI 并发送到服务器, 0.5 为和压缩系数 socket.send(back.toDataURL("image/jpeg",0.5));
- } setTimeout(draw,100); } // 调用设备的摄像头, 并将资源放入 video 标签 navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||
- navigator.mozGetUserMedia||navigator.msGetUserMedia; navigator.getUserMedia({video:true,audio:false},success,console.log);
- </script>
直播页面 HTML 结构:
<imgid="receiver"style="width:1600px;height:900px"/>
直播页面 JS
- <scripttype="text/javascript" charset="utf-8">
- // 创建一个 socket 实例 varreceiver_socket=newWebSocket("ws://"+document.domain+":8008");
- alert("ws://"+document.domain+":8008") varimage=document.getElementById('receiver');
- // 监听消息 receiver_socket.onmessage=function(data) { image.src=data.data;
- }
- </script>
最后想要了解更多关于 Web 前端开发方面内容的小伙伴, 请关注小猿圈怎么上官网, 小猿圈竭力为你提供更全面更有竞争力的视频 Web 前端自学2群: 738735873, 希望对你有所帮助.
来源: http://www.jianshu.com/p/7930df4e77b7