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 选择器 属性选择器介绍
Jan 21 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 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
编译问题
2006/10/09 PHP
php 操作符与控制结构
2012/03/07 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
php简单复制文件的方法
2016/05/09 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
python实现股票历史数据可视化分析案例
2021/06/10 Python
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
Redis实战高并发之扣减库存项目
2022/04/14 Redis