HTML5中的websocket实现直播,扣丁学堂HTML5培训简述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;

}