HTML5中的websocket实现直播功能


Posted in HTML / CSS onMay 21, 2018

做视频直播这一块,前期研究了很多方案,包括websocket,因为各种原因最后没有采取这个方案,但还是想记录一下学习的心得。

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

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

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

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

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

附上代码

录像页面HTML结构

<video autoplay id="sourcevid" style="width:1600;height:900px"></video>  
    <canvas id="output" style="display:none"></canvas>

录像页面js

<script type="text/javascript" charset="utf-8">  
        //创建一个+实例  
        var socket = new WebSocket("ws://"+document.domain+":8080");  
        var back = document.getElementById('output');  
        //返回一个用于在画布上绘图的环境。  
        var backcontext = back.getContext('2d');  
        var video = document.getElementsByTagName('video')[0];  
        var success = function(stream){  
            //获取视屏流,转换为url  
            video.src = window.URL.createObjectURL(stream);  
        }  
        //打开socket  
        socket.onopen = function(){  
            draw();  
            console.log("open success")  
        }  
        // 将视频帧绘制到Canvas对象上,Canvas每100ms切换帧,形成肉眼视频效果    
        var draw = function(){  
            try{  
                backcontext.drawImage(video,0,0, back.width, back.height);  
            }catch(e){  
                if (e.name == "NS_ERROR_NOT_AVAILABLE") {  
                    return setTimeout(draw, 100);  
                } else {  
                    throw e;  
                }  
            }  
            if(video.src){  
                // Canvas的内容转化成PNG data URI并发送到服务器,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结构:

<img id="receiver" style="width:1600px;height:900px"/>

直播页面JS

<script type="text/javascript" charset="utf-8">  
        //创建一个socket实例  
        var receiver_socket = new WebSocket("ws://"+document.domain+":8008");  
        alert("ws://"+document.domain+":8008")  
        var image = document.getElementById('receiver');  
         // 监听消息  
        receiver_socket.onmessage = function(data)  
        {  
            image.src=data.data;  
        }  
    </script>

总结

以上所述是小编给大家介绍的HTML5中的websocket实现直播功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 #HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 #HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 #HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 #HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 #HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 #HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 #HTML / CSS
You might like
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
JSON.stringify 语法实例讲解
2012/03/14 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
网络安全方面的面试题
2015/11/04 面试题
现实表现材料范文
2014/12/23 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
在Python中如何使用yield
2021/06/07 Python