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 相关文章推荐
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 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
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
VBScript版代码高亮
2006/06/26 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
关于js中的鼠标事件总结
2017/07/11 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python的高级Git库 Gittle
2014/09/22 Python
快速了解python leveldb
2018/01/18 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
金智子午JAVA面试题
2015/09/04 面试题
好人好事事迹材料
2014/02/12 职场文书
2014年仓库工作总结
2014/11/20 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
导游词之西安骊山
2019/12/03 职场文书
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js