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 border-image使用说明
Jun 23 HTML / CSS
时尚的CSS3进度条效果
Feb 22 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 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
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
提高php编程效率技巧
2015/08/13 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
大学生入党思想汇报
2014/01/14 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
五年级下册复习计划
2015/01/19 职场文书
优秀团员自我评价
2015/03/10 职场文书
办公室管理规章制度
2015/08/04 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python