扣丁学堂HTML5培训简述HTML5中的websocket如何实现直播功能

本篇文章扣丁学堂HTML5培训小编给读者们分享一下HTML5中的websocket如何实现直播功能，对HTML5开发感兴趣或者是想要学习HTML5开发技术的小伙伴就随小编来了解一下吧。

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

在WebSocket API中，浏览器和服务器只须要作一个握手的动做，而后，浏览器和服务器之间就造成了一条快速通道。二者之间就直接能够数据互相传送。

浏览器经过 JavaScript 向服务器发出创建 WebSocket 链接的请求，链接创建之后，客户端和服务器端就能够经过 TCP 链接直接交换数据。

当你获取 Web Socket 链接后，你能够经过send()方法来向服务器发送数据，并经过onmessage事件来接收服务器返回的数据。

作的过程当中，主要的思惟是：在录像页面利用setTimeout()每隔固定的时间经过canvas将视频转化为一帧一帧的图像，而后用websocket的socket.send()将图片数据发送给服务器。在直播页面就是先建立一个<img>

的结构，经过websocket的socket.onmessage()获取到图像数据，并展现

need-to-insert-img

<img>标签上，造成直播。

need-to-insert-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开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。