温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-05-22 16:18:22 来源:亿速云 阅读:386 作者:Leah 栏目:web开发

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI