html5websocket教程,websocket 组播
对于视频直播，我前期研究了很多方案，包括websocket，但是因为各种原因没有走这个方案，但是我还是想记录一下我的学习经历。
WebSocket是单一TCP连接上的全双工通信协议，最初由HTML5提供。
在WebSocket API中，浏览器和服务器只需要握手，然后浏览器和服务器之间就形成了一个快速通道。两者可以直接相互传输数据。
浏览器通过JavaScript向服务器发送建立WebSocket连接的请求。连接建立后，客户端和服务器可以通过TCP连接直接交换数据。
获得Web Socket连接后，可以通过send()方法向服务器发送数据，并通过onmessage事件接收服务器返回的数据。
在这样做的过程中，主要的思路是：在视频页面上使用setTimeout()将视频隔一段时间通过canvas转换成一帧一帧的图像，然后使用websocket的socket.send()将图像数据发送到服务器。在直播页面上，我们首先创建一个img结构，通过websocket的socket.onmessage()获取图像数据，并在img标签上显示，形成直播。
附上代码。
视频页面的HTML结构
视频自动播放id= source vid style= width:1600；height:900 px /video canvas id= output style= display:none /canvas视频页面js
script type= text/JavaScript charset= utf-8 //Create a instance var socket=new web socket( ws:// document . domain :8080 )；var back=document . getelementbyid( output )；//返回一个在画布上绘图的环境。var back context=back . get context( 2d )；var video=document . getelementsbytagname( video )[0]；Var success=function(stream){ //获取视频流并转换成URL video . src=window . URL . createobject URL(stream)；}//Open socket socket . on Open=function(){ draw()；Console.log(打开成功)} //将视频帧绘制到画布对象，画布每100ms切换一次帧，形成视觉视频效果vardraw=function(){ try { back context . Draw image(video，0，0，back.width，back . height)；} catch(e){ if(e . name== NS _ ERROR _ NOT _ AVAILABLE ){ return setTimeout(draw，100)；} else {抛出e；} } if(video . src){//canvas的内容转换成PNG数据URI发送到服务器，0.5为和压缩系数socket . send(back . toda taurl( image/JPEG ，0.5))；} setTimeout(draw，100)；}//调用设备的摄像头，将资源放入视频标签navigator . getuser media=navigator . getuser media navigator . WebKit getuser media navigator . mozgetuser media navigator . msggetusermedia；navigator . get user media({ video:true，audio:false}，success，console . log)；/script live page HTML结构：
img id= receiver style= width:1600 px；高度：900px/活页JS
script type= text/JavaScript charset= utf-8 //Create socket实例var receiver _ socket=new web socket( ws:// document . domain :8008 )；alert( ws:// document . domain :8008 )var image=document . getelementbyid( receiver )；//监听receiver _ socket . on message=function(data){ image . src=data . data；}/脚本总结
以上是边肖给大家介绍的HTML5中的websocket实现直播功能。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。