html5手机视频直播

关键字：手机视频直播、视频直播、html5视频直播

本来想用WebRTC做视频直播，在用之前想了解下用比较原始的方式做出来是什么效果，所以就有了下面的程序。

实现原理：一个视频采集页面，一个视频播放页面，一个node.js服务端程序。视频采集页面采集视频数据通过WebSocket发送到服务端，服务端转发到视频播放页面。
视频采集页面在手机上需要Firefox浏览器才能支持，电脑上支持的浏览器比较多；视频播放页面在手机和电脑上浏览器都能用。

1、启动node.js服务端程序，node.js的安装网上比较多，此处不再阐述。

server.js代码：

var WebSocketServer = require('ws').Server;
//监听端口8888，客户端连接这个端口
var wss = new WebSocketServer({ port: 8888, verifyClient: socketVerify });

//连接验证，可以写验证语句
function socketVerify(info) {

    console.log(info.req.url); 
    return true;
}

wss.on('connection', function (ws) {
    //输出连接客户端信息
    console.log("connection");
    console.log(ws._ultron.ee._idleStart);
    
    ws.on('message', function (data, flags) {
        wss.clients.forEach(function each(client) {
            
            client.send(data); //读取到的数据发送给所有客户端
            //console.log(data);
        });
    });
    ws.on('close', function (e) {
        console.log('colse');
    });
});

2、通过浏览器请求视频采集页面，手机请求需要 Firefox浏览器。采集页面的实现方式是 通过video标签采集和播放视频，将视频图像绘制到canvas标签上，再通过WebSocket将canvas数据发送到服务端；本示例可通过改变canvas大小以改变发送数据的大小，发送数据较大对网络和服务端的处理能力要求较高。如果哪位同学有好的数据压缩和解析方案请给予指导，谢谢！

视频采集页面代码：

  
  
    


    

        
        
        
        发送大小：
        base64长度：

    
    

        

            
        
        

            
        
    
    

    

3、通过浏览器请求视频播放页面，手机和电脑上都可以通过大部分浏览器进行播放。实现原理是通过WebSocket连接视频转发地址，将接收到的数据显示到img标签上。

视频播放页面代码：

  
  
    


    
    

        
        
        
        图像大小：
    
    
    

        
    

示例源码下载地址：http://download.csdn.net/download/welliu/10104878

提供了多客户端的支持页面和服务端程序：