这篇文章给大家介绍怎么在HTML5中使用websocket实现直播功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
站在用户的角度思考问题，与客户深入沟通，找到黑山网站设计与黑山网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站制作、成都做网站、外贸营销网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、虚拟空间、企业邮箱。业务覆盖黑山地区。
录像页面HTML结构
录像页面js
//创建一个+实例
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);
直播页面HTML结构：
直播页面JS
//创建一个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;
}
关于怎么在HTML5中使用websocket实现直播功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
分享题目：怎么在HTML5中使用websocket实现直播功能
网页路径：
http://jkwzsj.com/article/jcdepi.html
