怎么在HTML5中使用websocket实现直播功能

这篇文章给大家介绍怎么在HTML5中使用websocket实现直播功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

录像页面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实现直播功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。