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实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
使用CSS实现音波加载效果
May 07 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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
建立文件交换功能的脚本(一)
2006/10/09 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
Js中sort()方法的用法
2006/11/04 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
js读写json文件实例代码
2014/10/21 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
javascript时间差插件分享
2016/07/18 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
python暴力解压rar加密文件过程详解
2019/07/05 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
python重要函数eval多种用法解析
2020/01/14 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
中间件分为哪几类
2016/09/18 面试题
经营管理策划方案
2014/05/22 职场文书
护士自我推荐信范文
2015/03/24 职场文书