diff --git a/trunk/research/players/index.html b/trunk/research/players/index.html
index f017d418a..b9938c0f6 100755
--- a/trunk/research/players/index.html
+++ b/trunk/research/players/index.html
@@ -7,8 +7,7 @@
     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
     <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/swfobject.js"></script>
-    <script type="text/javascript" src="js/srs.js"></script>
-    <script type="text/javascript" src="js/srs.log.js"></script>
+    <script type="text/javascript" src="js/srs.page.js"></script>
     <style>
         body{
             padding-top: 55px;
diff --git a/trunk/research/players/js/srs.js b/trunk/research/players/js/srs.page.js
similarity index 50%
rename from trunk/research/players/js/srs.js
rename to trunk/research/players/js/srs.page.js
index 0a9a28d47..709c9728e 100755
--- a/trunk/research/players/js/srs.js
+++ b/trunk/research/players/js/srs.page.js
@@ -26,18 +26,6 @@ function srs_get_player_chat_vhost(src_vhost) { return (src_vhost != srs_get_pla
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////
-/**
-* padding the output.
-* padding(3, 5, '0') is 00003
-* padding(3, 5, 'x') is xxxx3
-* @see http://blog.csdn.net/win_lin/article/details/12065413
-*/
-function padding(number, length, prefix) {
-    if(String(number).length >= length){
-        return String(number);
-    }
-    return padding(prefix+number, length, prefix);
-}
 
 /**
 * update the navigator, add same query string.
@@ -52,40 +40,6 @@ function update_nav() {
     $("#nav_vlc").attr("href", "vlc.html" + window.location.search);
 }
 
-/**
-* parse the query string to object.
-*/
-function parse_query_string(){
-    var obj = {};
-    
-    // parse the host(hostname:http_port), pathname(dir/filename)
-    obj.host = window.location.host;
-    obj.hostname = window.location.hostname;
-    obj.http_port = (window.location.port == "")? 80:window.location.port;
-    obj.pathname = window.location.pathname;
-    if (obj.pathname.lastIndexOf("/") <= 0) {
-        obj.dir = "/";
-        obj.filename = "";
-    } else {
-        obj.dir = obj.pathname.substr(0, obj.pathname.lastIndexOf("/"));
-        obj.filename = obj.pathname.substr(obj.pathname.lastIndexOf("/"));
-    }
-    
-    // parse the query string.
-    var query_string = String(window.location.search).replace(" ", "").split("?")[1];
-    if(query_string == undefined){
-        return obj;
-    }
-    
-    var queries = query_string.split("&");
-    $(queries).each(function(){
-        var query = this.split("=");
-        obj[query[0]] = query[1];
-    });
-    
-    return obj;
-}
-
 /**
 @param server the ip of server. default to window.location.hostname
 @param vhost the vhost of rtmp. default to window.location.hostname
@@ -156,43 +110,6 @@ function build_default_hls_url() {
     return "http://" + server + ":" + port + "/" + app + "/" + stream + ".m3u8";
 }
 
-/**
-* parse the rtmp url,
-* for example: rtmp://demo.srs.com:1935/live...vhost...players/livestream
-* @return object {server, port, vhost, app, stream}
-*/
-function srs_parse_rtmp_url(rtmp_url) {
-    // @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
-    var a = document.createElement("a");
-    a.href = rtmp_url.replace("rtmp://", "http://");
-    
-    var vhost = a.hostname;
-    var port = (a.port == "")? "1935":a.port;
-    var app = a.pathname.substr(1, a.pathname.lastIndexOf("/") - 1);
-    var stream = a.pathname.substr(a.pathname.lastIndexOf("/") + 1);
-
-    // parse the vhost in the params of app, that srs supports.
-    app = app.replace("...vhost...", "?vhost=");
-    if (app.indexOf("?") >= 0) {
-        var params = app.substr(app.indexOf("?"));
-        app = app.substr(0, app.indexOf("?"));
-        
-        if (params.indexOf("vhost=") > 0) {
-            vhost = params.substr(params.indexOf("vhost=") + "vhost=".length);
-            if (vhost.indexOf("&") > 0) {
-                vhost = vhost.substr(0, vhost.indexOf("&"));
-            }
-        }
-    }
-    
-    var ret = {
-        server: a.hostname, port: port, 
-        vhost: vhost, app: app, stream: stream
-    };
-    
-    return ret;
-}
-
 /**
 * initialize the page.
 * @param rtmp_url the div id contains the rtmp stream url to play
@@ -404,351 +321,3 @@ function srs_publiser_get_codec(
     vcodec.size     = $(sl_size).find("option:selected").val();
     vcodec.bitrate  = $(sl_bitrate).find("option:selected").val();
 }
-
-//////////////////////////////////////////////////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////////
-/**
-* the SrsPlayer object.
-* @param container the html container id.
-* @param width a float value specifies the width of player.
-* @param height a float value specifies the height of player.
-* @param private_object [optional] an object that used as private object, 
-*       for example, the logic chat object which owner this player.
-*/
-function SrsPlayer(container, width, height, private_object) {
-    if (!SrsPlayer.__id) {
-        SrsPlayer.__id = 100;
-    }
-    if (!SrsPlayer.__players) {
-        SrsPlayer.__players = [];
-    }
-    
-    SrsPlayer.__players.push(this);
-    
-    this.private_object = private_object;
-    this.container = container;
-    this.width = width;
-    this.height = height;
-    this.id = SrsPlayer.__id++;
-    this.stream_url = null;
-    this.buffer_time = 0.8; // default to 0.8
-    this.volume = 1.0; // default to 100%
-    this.callbackObj = null;
-    
-    // callback set the following values.
-    this.meatadata = {}; // for on_player_metadata
-    this.time = 0; // current stream time.
-    this.buffer_length = 0; // current stream buffer length.
-}
-/**
-* user can set some callback, then start the player.
-* @param url the default url.
-* callbacks:
-*      on_player_ready():int, when srs player ready, user can play.
-*      on_player_metadata(metadata:Object):int, when srs player get metadata.
-*/
-SrsPlayer.prototype.start = function(url) {
-    if (url) {
-        this.stream_url = url;
-    }
-    
-    // embed the flash.
-    var flashvars = {};
-    flashvars.id = this.id;
-    flashvars.on_player_ready = "__srs_on_player_ready";
-    flashvars.on_player_metadata = "__srs_on_player_metadata";
-    flashvars.on_player_timer = "__srs_on_player_timer";
-    
-    var params = {};
-    params.wmode = "opaque";
-    params.allowFullScreen = "true";
-    params.allowScriptAccess = "always";
-    
-    var attributes = {};
-    
-    var self = this;
-    
-    swfobject.embedSWF(
-        "srs_player/release/srs_player.swf?_version="+srs_get_version_code(), 
-        this.container,
-        this.width, this.height,
-        "11.1", "js/AdobeFlashPlayerInstall.swf",
-        flashvars, params, attributes,
-        function(callbackObj){
-            self.callbackObj = callbackObj;
-        }
-    );
-    
-    return this;
-}
-/**
-* play the stream.
-* @param stream_url the url of stream, rtmp or http.
-* @param volume the volume, 0 is mute, 1 is 100%, 2 is 200%.
-*/
-SrsPlayer.prototype.play = function(url, volume) {
-    if (url) {
-        this.stream_url = url;
-    }
-    
-    // volume maybe 0, so never use if(volume) to check its value.
-    if (volume != null && volume != undefined) {
-        this.volume = volume;
-    }
-    
-    this.callbackObj.ref.__play(this.stream_url, this.width, this.height, this.buffer_time, this.volume);
-}
-SrsPlayer.prototype.stop = function() {
-    for (var i = 0; i < SrsPlayer.__players.length; i++) {
-        var player = SrsPlayer.__players[i];
-        
-        if (player.id != this.id) {
-            continue;
-        }
-        
-        SrsPlayer.__players.splice(i, 1);
-        break;
-    }
-    
-    this.callbackObj.ref.__stop();
-}
-SrsPlayer.prototype.pause = function() {
-    this.callbackObj.ref.__pause();
-}
-SrsPlayer.prototype.resume = function() {
-    this.callbackObj.ref.__resume();
-}
-/**
-* to set the DAR, for example, DAR=16:9
-* @param num, for example, 9. 
-*       use metadata height if 0.
-*       use user specified height if -1.
-* @param den, for example, 16. 
-*       use metadata width if 0.
-*       use user specified width if -1.
-*/
-SrsPlayer.prototype.dar = function(num, den) {
-    this.callbackObj.ref.__dar(num, den);
-}
-/**
-* set the fullscreen size data.
-* @refer the refer fullscreen mode. it can be:
-*       video: use video orignal size.
-*       screen: use screen size to rescale video.
-* @param percent, the rescale percent, where
-*       100 means 100%.
-*/
-SrsPlayer.prototype.set_fs = function(refer, percent) {
-    this.callbackObj.ref.__set_fs(refer, percent);
-}
-/**
-* set the stream buffer time in seconds.
-* @buffer_time the buffer time in seconds.
-*/
-SrsPlayer.prototype.set_bt = function(buffer_time) {
-    this.buffer_time = buffer_time;
-    this.callbackObj.ref.__set_bt(buffer_time);
-}
-SrsPlayer.prototype.on_player_ready = function() {
-}
-SrsPlayer.prototype.on_player_metadata = function(metadata) {
-    // ignore.
-}
-SrsPlayer.prototype.on_player_timer = function(time, buffer_length) {
-    // ignore.
-}
-function __srs_find_player(id) {
-    for (var i = 0; i < SrsPlayer.__players.length; i++) {
-        var player = SrsPlayer.__players[i];
-        
-        if (player.id != id) {
-            continue;
-        }
-        
-        return player;
-    }
-    
-    throw new Error("player not found. id=" + id);
-}
-function __srs_on_player_ready(id) {
-    var player = __srs_find_player(id);
-    player.on_player_ready();
-}
-function __srs_on_player_metadata(id, metadata) {
-    var player = __srs_find_player(id);
-    
-    // user may override the on_player_metadata, 
-    // so set the data before invoke it.
-    player.metadata = metadata;
-    
-    player.on_player_metadata(metadata);
-}
-function __srs_on_player_timer(id, time, buffer_length) {
-    var player = __srs_find_player(id);
-    
-    buffer_length = Math.max(0, buffer_length);
-    buffer_length = Math.min(player.buffer_time, buffer_length);
-    
-    time = Math.max(0, time);
-    
-    // user may override the on_player_timer, 
-    // so set the data before invoke it.
-    player.time = time;
-    player.buffer_length = buffer_length;
-    
-    player.on_player_timer(time, buffer_length);
-}
-
-//////////////////////////////////////////////////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////////
-/**
-* the SrsPublisher object.
-* @param container the html container id.
-* @param width a float value specifies the width of publisher.
-* @param height a float value specifies the height of publisher.
-* @param private_object [optional] an object that used as private object, 
-*       for example, the logic chat object which owner this publisher.
-*/
-function SrsPublisher(container, width, height, private_object) {
-    if (!SrsPublisher.__id) {
-        SrsPublisher.__id = 100;
-    }
-    if (!SrsPublisher.__publishers) {
-        SrsPublisher.__publishers = [];
-    }
-    
-    SrsPublisher.__publishers.push(this);
-    
-    this.private_object = private_object;
-    this.container = container;
-    this.width = width;
-    this.height = height;
-    this.id = SrsPublisher.__id++;
-    this.callbackObj = null;
-    
-    // set the values when publish.
-    this.url = null;
-    this.vcodec = {};
-    this.acodec = {};
-    
-    // callback set the following values.
-    this.cameras = [];
-    this.microphones = [];
-    this.code = 0;
-    
-    // error code defines.
-    this.errors = {
-        "100": "无法获取指定的摄像头", //error_camera_get 
-        "101": "无法获取指定的麦克风", //error_microphone_get 
-        "102": "摄像头为禁用状态，推流时请允许flash访问摄像头" //error_camera_muted 
-    };
-}
-/**
-* user can set some callback, then start the publisher.
-* callbacks:
-*      on_publisher_ready(cameras, microphones):int, when srs publisher ready, user can publish.
-*      on_publisher_error(code, desc):int, when srs publisher error, callback this method.
-*      on_publisher_warn(code, desc):int, when srs publisher warn, callback this method.
-*/
-SrsPublisher.prototype.start = function() {
-    // embed the flash.
-    var flashvars = {};
-    flashvars.id = this.id;
-    flashvars.on_publisher_ready = "__srs_on_publisher_ready";
-    flashvars.on_publisher_error = "__srs_on_publisher_error";
-    flashvars.on_publisher_warn = "__srs_on_publisher_warn";
-    
-    var params = {};
-    params.wmode = "opaque";
-    params.allowFullScreen = "true";
-    params.allowScriptAccess = "always";
-    
-    var attributes = {};
-    
-    var self = this;
-    
-    swfobject.embedSWF(
-        "srs_publisher/release/srs_publisher.swf?_version="+srs_get_version_code(), 
-        this.container,
-        this.width, this.height,
-        "11.1", "js/AdobeFlashPlayerInstall.swf",
-        flashvars, params, attributes,
-        function(callbackObj){
-            self.callbackObj = callbackObj;
-        }
-    );
-    
-    return this;
-}
-/**
-* publish stream to server.
-* @param url a string indicates the rtmp url to publish.
-* @param vcodec an object contains the video codec info.
-* @param acodec an object contains the audio codec info.
-*/
-SrsPublisher.prototype.publish = function(url, vcodec, acodec) {
-    this.url = url;
-    this.vcodec = vcodec;
-    this.acodec = acodec;
-    
-    this.callbackObj.ref.__publish(url, this.width, this.height, vcodec, acodec);
-}
-SrsPublisher.prototype.stop = function() {
-    this.callbackObj.ref.__stop();
-}
-/**
-* when publisher ready.
-* @param cameras a string array contains the names of cameras.
-* @param microphones a string array contains the names of microphones.
-*/
-SrsPublisher.prototype.on_publisher_ready = function(cameras, microphones) {
-}
-/**
-* when publisher error.
-* @code the error code.
-* @desc the error desc message.
-*/
-SrsPublisher.prototype.on_publisher_error = function(code, desc) {
-    throw new Error("publisher error. code=" + code + ", desc=" + desc);
-}
-SrsPublisher.prototype.on_publisher_warn = function(code, desc) {
-    throw new Error("publisher warn. code=" + code + ", desc=" + desc);
-}
-function __srs_find_publisher(id) {
-    for (var i = 0; i < SrsPublisher.__publishers.length; i++) {
-        var publisher = SrsPublisher.__publishers[i];
-        
-        if (publisher.id != id) {
-            continue;
-        }
-        
-        return publisher;
-    }
-    
-    throw new Error("publisher not found. id=" + id);
-}
-function __srs_on_publisher_ready(id, cameras, microphones) {
-    var publisher = __srs_find_publisher(id);
-    
-    publisher.cameras = cameras;
-    publisher.microphones = microphones;
-    
-    publisher.on_publisher_ready(cameras, microphones);
-}
-function __srs_on_publisher_error(id, code) {
-    var publisher = __srs_find_publisher(id);
-    
-    publisher.code = code;
-    
-    publisher.on_publisher_error(code, publisher.errors[""+code]);
-}
-function __srs_on_publisher_warn(id, code) {
-    var publisher = __srs_find_publisher(id);
-    
-    publisher.code = code;
-    
-    publisher.on_publisher_warn(code, publisher.errors[""+code]);
-}
-
diff --git a/trunk/research/players/js/srs.player.js b/trunk/research/players/js/srs.player.js
new file mode 100755
index 000000000..2896d5649
--- /dev/null
+++ b/trunk/research/players/js/srs.player.js
@@ -0,0 +1,191 @@
+/**
+* the SrsPlayer object.
+* @param container the html container id.
+* @param width a float value specifies the width of player.
+* @param height a float value specifies the height of player.
+* @param private_object [optional] an object that used as private object, 
+*       for example, the logic chat object which owner this player.
+*/
+function SrsPlayer(container, width, height, private_object) {
+    if (!SrsPlayer.__id) {
+        SrsPlayer.__id = 100;
+    }
+    if (!SrsPlayer.__players) {
+        SrsPlayer.__players = [];
+    }
+    
+    SrsPlayer.__players.push(this);
+    
+    this.private_object = private_object;
+    this.container = container;
+    this.width = width;
+    this.height = height;
+    this.id = SrsPlayer.__id++;
+    this.stream_url = null;
+    this.buffer_time = 0.8; // default to 0.8
+    this.volume = 1.0; // default to 100%
+    this.callbackObj = null;
+    
+    // callback set the following values.
+    this.meatadata = {}; // for on_player_metadata
+    this.time = 0; // current stream time.
+    this.buffer_length = 0; // current stream buffer length.
+}
+/**
+* user can set some callback, then start the player.
+* @param url the default url.
+* callbacks:
+*      on_player_ready():int, when srs player ready, user can play.
+*      on_player_metadata(metadata:Object):int, when srs player get metadata.
+*/
+SrsPlayer.prototype.start = function(url) {
+    if (url) {
+        this.stream_url = url;
+    }
+    
+    // embed the flash.
+    var flashvars = {};
+    flashvars.id = this.id;
+    flashvars.on_player_ready = "__srs_on_player_ready";
+    flashvars.on_player_metadata = "__srs_on_player_metadata";
+    flashvars.on_player_timer = "__srs_on_player_timer";
+    
+    var params = {};
+    params.wmode = "opaque";
+    params.allowFullScreen = "true";
+    params.allowScriptAccess = "always";
+    
+    var attributes = {};
+    
+    var self = this;
+    
+    swfobject.embedSWF(
+        "srs_player/release/srs_player.swf?_version="+srs_get_version_code(), 
+        this.container,
+        this.width, this.height,
+        "11.1", "js/AdobeFlashPlayerInstall.swf",
+        flashvars, params, attributes,
+        function(callbackObj){
+            self.callbackObj = callbackObj;
+        }
+    );
+    
+    return this;
+}
+/**
+* play the stream.
+* @param stream_url the url of stream, rtmp or http.
+* @param volume the volume, 0 is mute, 1 is 100%, 2 is 200%.
+*/
+SrsPlayer.prototype.play = function(url, volume) {
+    if (url) {
+        this.stream_url = url;
+    }
+    
+    // volume maybe 0, so never use if(volume) to check its value.
+    if (volume != null && volume != undefined) {
+        this.volume = volume;
+    }
+    
+    this.callbackObj.ref.__play(this.stream_url, this.width, this.height, this.buffer_time, this.volume);
+}
+SrsPlayer.prototype.stop = function() {
+    for (var i = 0; i < SrsPlayer.__players.length; i++) {
+        var player = SrsPlayer.__players[i];
+        
+        if (player.id != this.id) {
+            continue;
+        }
+        
+        SrsPlayer.__players.splice(i, 1);
+        break;
+    }
+    
+    this.callbackObj.ref.__stop();
+}
+SrsPlayer.prototype.pause = function() {
+    this.callbackObj.ref.__pause();
+}
+SrsPlayer.prototype.resume = function() {
+    this.callbackObj.ref.__resume();
+}
+/**
+* to set the DAR, for example, DAR=16:9
+* @param num, for example, 9. 
+*       use metadata height if 0.
+*       use user specified height if -1.
+* @param den, for example, 16. 
+*       use metadata width if 0.
+*       use user specified width if -1.
+*/
+SrsPlayer.prototype.dar = function(num, den) {
+    this.callbackObj.ref.__dar(num, den);
+}
+/**
+* set the fullscreen size data.
+* @refer the refer fullscreen mode. it can be:
+*       video: use video orignal size.
+*       screen: use screen size to rescale video.
+* @param percent, the rescale percent, where
+*       100 means 100%.
+*/
+SrsPlayer.prototype.set_fs = function(refer, percent) {
+    this.callbackObj.ref.__set_fs(refer, percent);
+}
+/**
+* set the stream buffer time in seconds.
+* @buffer_time the buffer time in seconds.
+*/
+SrsPlayer.prototype.set_bt = function(buffer_time) {
+    this.buffer_time = buffer_time;
+    this.callbackObj.ref.__set_bt(buffer_time);
+}
+SrsPlayer.prototype.on_player_ready = function() {
+}
+SrsPlayer.prototype.on_player_metadata = function(metadata) {
+    // ignore.
+}
+SrsPlayer.prototype.on_player_timer = function(time, buffer_length) {
+    // ignore.
+}
+function __srs_find_player(id) {
+    for (var i = 0; i < SrsPlayer.__players.length; i++) {
+        var player = SrsPlayer.__players[i];
+        
+        if (player.id != id) {
+            continue;
+        }
+        
+        return player;
+    }
+    
+    throw new Error("player not found. id=" + id);
+}
+function __srs_on_player_ready(id) {
+    var player = __srs_find_player(id);
+    player.on_player_ready();
+}
+function __srs_on_player_metadata(id, metadata) {
+    var player = __srs_find_player(id);
+    
+    // user may override the on_player_metadata, 
+    // so set the data before invoke it.
+    player.metadata = metadata;
+    
+    player.on_player_metadata(metadata);
+}
+function __srs_on_player_timer(id, time, buffer_length) {
+    var player = __srs_find_player(id);
+    
+    buffer_length = Math.max(0, buffer_length);
+    buffer_length = Math.min(player.buffer_time, buffer_length);
+    
+    time = Math.max(0, time);
+    
+    // user may override the on_player_timer, 
+    // so set the data before invoke it.
+    player.time = time;
+    player.buffer_length = buffer_length;
+    
+    player.on_player_timer(time, buffer_length);
+}
diff --git a/trunk/research/players/js/srs.publisher.js b/trunk/research/players/js/srs.publisher.js
new file mode 100755
index 000000000..43823b744
--- /dev/null
+++ b/trunk/research/players/js/srs.publisher.js
@@ -0,0 +1,148 @@
+/**
+* the SrsPublisher object.
+* @param container the html container id.
+* @param width a float value specifies the width of publisher.
+* @param height a float value specifies the height of publisher.
+* @param private_object [optional] an object that used as private object, 
+*       for example, the logic chat object which owner this publisher.
+*/
+function SrsPublisher(container, width, height, private_object) {
+    if (!SrsPublisher.__id) {
+        SrsPublisher.__id = 100;
+    }
+    if (!SrsPublisher.__publishers) {
+        SrsPublisher.__publishers = [];
+    }
+    
+    SrsPublisher.__publishers.push(this);
+    
+    this.private_object = private_object;
+    this.container = container;
+    this.width = width;
+    this.height = height;
+    this.id = SrsPublisher.__id++;
+    this.callbackObj = null;
+    
+    // set the values when publish.
+    this.url = null;
+    this.vcodec = {};
+    this.acodec = {};
+    
+    // callback set the following values.
+    this.cameras = [];
+    this.microphones = [];
+    this.code = 0;
+    
+    // error code defines.
+    this.errors = {
+        "100": "无法获取指定的摄像头", //error_camera_get 
+        "101": "无法获取指定的麦克风", //error_microphone_get 
+        "102": "摄像头为禁用状态，推流时请允许flash访问摄像头" //error_camera_muted 
+    };
+}
+/**
+* user can set some callback, then start the publisher.
+* callbacks:
+*      on_publisher_ready(cameras, microphones):int, when srs publisher ready, user can publish.
+*      on_publisher_error(code, desc):int, when srs publisher error, callback this method.
+*      on_publisher_warn(code, desc):int, when srs publisher warn, callback this method.
+*/
+SrsPublisher.prototype.start = function() {
+    // embed the flash.
+    var flashvars = {};
+    flashvars.id = this.id;
+    flashvars.on_publisher_ready = "__srs_on_publisher_ready";
+    flashvars.on_publisher_error = "__srs_on_publisher_error";
+    flashvars.on_publisher_warn = "__srs_on_publisher_warn";
+    
+    var params = {};
+    params.wmode = "opaque";
+    params.allowFullScreen = "true";
+    params.allowScriptAccess = "always";
+    
+    var attributes = {};
+    
+    var self = this;
+    
+    swfobject.embedSWF(
+        "srs_publisher/release/srs_publisher.swf?_version="+srs_get_version_code(), 
+        this.container,
+        this.width, this.height,
+        "11.1", "js/AdobeFlashPlayerInstall.swf",
+        flashvars, params, attributes,
+        function(callbackObj){
+            self.callbackObj = callbackObj;
+        }
+    );
+    
+    return this;
+}
+/**
+* publish stream to server.
+* @param url a string indicates the rtmp url to publish.
+* @param vcodec an object contains the video codec info.
+* @param acodec an object contains the audio codec info.
+*/
+SrsPublisher.prototype.publish = function(url, vcodec, acodec) {
+    this.url = url;
+    this.vcodec = vcodec;
+    this.acodec = acodec;
+    
+    this.callbackObj.ref.__publish(url, this.width, this.height, vcodec, acodec);
+}
+SrsPublisher.prototype.stop = function() {
+    this.callbackObj.ref.__stop();
+}
+/**
+* when publisher ready.
+* @param cameras a string array contains the names of cameras.
+* @param microphones a string array contains the names of microphones.
+*/
+SrsPublisher.prototype.on_publisher_ready = function(cameras, microphones) {
+}
+/**
+* when publisher error.
+* @code the error code.
+* @desc the error desc message.
+*/
+SrsPublisher.prototype.on_publisher_error = function(code, desc) {
+    throw new Error("publisher error. code=" + code + ", desc=" + desc);
+}
+SrsPublisher.prototype.on_publisher_warn = function(code, desc) {
+    throw new Error("publisher warn. code=" + code + ", desc=" + desc);
+}
+function __srs_find_publisher(id) {
+    for (var i = 0; i < SrsPublisher.__publishers.length; i++) {
+        var publisher = SrsPublisher.__publishers[i];
+        
+        if (publisher.id != id) {
+            continue;
+        }
+        
+        return publisher;
+    }
+    
+    throw new Error("publisher not found. id=" + id);
+}
+function __srs_on_publisher_ready(id, cameras, microphones) {
+    var publisher = __srs_find_publisher(id);
+    
+    publisher.cameras = cameras;
+    publisher.microphones = microphones;
+    
+    publisher.on_publisher_ready(cameras, microphones);
+}
+function __srs_on_publisher_error(id, code) {
+    var publisher = __srs_find_publisher(id);
+    
+    publisher.code = code;
+    
+    publisher.on_publisher_error(code, publisher.errors[""+code]);
+}
+function __srs_on_publisher_warn(id, code) {
+    var publisher = __srs_find_publisher(id);
+    
+    publisher.code = code;
+    
+    publisher.on_publisher_warn(code, publisher.errors[""+code]);
+}
diff --git a/trunk/research/players/js/srs.utility.js b/trunk/research/players/js/srs.utility.js
new file mode 100755
index 000000000..19b715859
--- /dev/null
+++ b/trunk/research/players/js/srs.utility.js
@@ -0,0 +1,83 @@
+/**
+* padding the output.
+* padding(3, 5, '0') is 00003
+* padding(3, 5, 'x') is xxxx3
+* @see http://blog.csdn.net/win_lin/article/details/12065413
+*/
+function padding(number, length, prefix) {
+    if(String(number).length >= length){
+        return String(number);
+    }
+    return padding(prefix+number, length, prefix);
+}
+
+/**
+* parse the query string to object.
+*/
+function parse_query_string(){
+    var obj = {};
+    
+    // parse the host(hostname:http_port), pathname(dir/filename)
+    obj.host = window.location.host;
+    obj.hostname = window.location.hostname;
+    obj.http_port = (window.location.port == "")? 80:window.location.port;
+    obj.pathname = window.location.pathname;
+    if (obj.pathname.lastIndexOf("/") <= 0) {
+        obj.dir = "/";
+        obj.filename = "";
+    } else {
+        obj.dir = obj.pathname.substr(0, obj.pathname.lastIndexOf("/"));
+        obj.filename = obj.pathname.substr(obj.pathname.lastIndexOf("/"));
+    }
+    
+    // parse the query string.
+    var query_string = String(window.location.search).replace(" ", "").split("?")[1];
+    if(query_string == undefined){
+        return obj;
+    }
+    
+    var queries = query_string.split("&");
+    $(queries).each(function(){
+        var query = this.split("=");
+        obj[query[0]] = query[1];
+    });
+    
+    return obj;
+}
+
+/**
+* parse the rtmp url,
+* for example: rtmp://demo.srs.com:1935/live...vhost...players/livestream
+* @return object {server, port, vhost, app, stream}
+*/
+function srs_parse_rtmp_url(rtmp_url) {
+    // @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
+    var a = document.createElement("a");
+    a.href = rtmp_url.replace("rtmp://", "http://");
+    
+    var vhost = a.hostname;
+    var port = (a.port == "")? "1935":a.port;
+    var app = a.pathname.substr(1, a.pathname.lastIndexOf("/") - 1);
+    var stream = a.pathname.substr(a.pathname.lastIndexOf("/") + 1);
+
+    // parse the vhost in the params of app, that srs supports.
+    app = app.replace("...vhost...", "?vhost=");
+    if (app.indexOf("?") >= 0) {
+        var params = app.substr(app.indexOf("?"));
+        app = app.substr(0, app.indexOf("?"));
+        
+        if (params.indexOf("vhost=") > 0) {
+            vhost = params.substr(params.indexOf("vhost=") + "vhost=".length);
+            if (vhost.indexOf("&") > 0) {
+                vhost = vhost.substr(0, vhost.indexOf("&"));
+            }
+        }
+    }
+    
+    var ret = {
+        server: a.hostname, port: port, 
+        vhost: vhost, app: app, stream: stream
+    };
+    
+    return ret;
+}
diff --git a/trunk/research/players/jwplayer6.html b/trunk/research/players/jwplayer6.html
index e8daafc1f..91eebbf82 100755
--- a/trunk/research/players/jwplayer6.html
+++ b/trunk/research/players/jwplayer6.html
@@ -6,8 +6,11 @@
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
     <script type="text/javascript" src="js/bootstrap.min.js"></script>
-    <script type="text/javascript" src="js/srs.js"></script>
+    <script type="text/javascript" src="js/srs.page.js"></script>
     <script type="text/javascript" src="js/srs.log.js"></script>
+    <script type="text/javascript" src="js/srs.player.js"></script>
+    <script type="text/javascript" src="js/srs.publisher.js"></script>
+    <script type="text/javascript" src="js/srs.utility.js"></script>
     <style>
         body{
             padding-top: 55px;
diff --git a/trunk/research/players/osmf.html b/trunk/research/players/osmf.html
index 5b56d5b2f..9a4244e74 100755
--- a/trunk/research/players/osmf.html
+++ b/trunk/research/players/osmf.html
@@ -7,8 +7,11 @@
     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
     <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/swfobject.js"></script>
-    <script type="text/javascript" src="js/srs.js"></script>
+    <script type="text/javascript" src="js/srs.page.js"></script>
     <script type="text/javascript" src="js/srs.log.js"></script>
+    <script type="text/javascript" src="js/srs.player.js"></script>
+    <script type="text/javascript" src="js/srs.publisher.js"></script>
+    <script type="text/javascript" src="js/srs.utility.js"></script>
     <style>
         body{
             padding-top: 55px;
diff --git a/trunk/research/players/srs_bwt.html b/trunk/research/players/srs_bwt.html
index 0eabae206..095c910b7 100755
--- a/trunk/research/players/srs_bwt.html
+++ b/trunk/research/players/srs_bwt.html
@@ -7,8 +7,12 @@
     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
     <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/swfobject.js"></script>
-    <script type="text/javascript" src="js/srs.js"></script>
+    <script type="text/javascript" src="js/srs.page.js"></script>
     <script type="text/javascript" src="js/srs.log.js"></script>
+    <script type="text/javascript" src="js/srs.player.js"></script>
+    <script type="text/javascript" src="js/srs.publisher.js"></script>
+    <script type="text/javascript" src="js/srs.utility.js"></script>
+    <script type="text/javascript" src="js/srs.utility.js"></script>
     <style>
         body{
             padding-top: 55px;
diff --git a/trunk/research/players/srs_chat.html b/trunk/research/players/srs_chat.html
index 19637fe0e..046964aff 100755
--- a/trunk/research/players/srs_chat.html
+++ b/trunk/research/players/srs_chat.html
@@ -7,8 +7,11 @@
     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
     <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/swfobject.js"></script>
-    <script type="text/javascript" src="js/srs.js"></script>
+    <script type="text/javascript" src="js/srs.page.js"></script>
     <script type="text/javascript" src="js/srs.log.js"></script>
+    <script type="text/javascript" src="js/srs.player.js"></script>
+    <script type="text/javascript" src="js/srs.publisher.js"></script>
+    <script type="text/javascript" src="js/srs.utility.js"></script>
     <style>
         body{
             padding-top: 55px;
@@ -415,7 +418,7 @@
                     
                     $("#btn_join").text("退出会议");
                 
-                    info("开始推流到服务器");
+                    info("开始推流到服务器。请戴耳机聊天，否则音箱的声音会进入麦克风");
                     srs_publisher.publish(url, vcodec, acodec);
                 
                     if (realtime_player) {
diff --git a/trunk/research/players/srs_player.html b/trunk/research/players/srs_player.html
index d1d6c5767..64b5ab4b2 100755
--- a/trunk/research/players/srs_player.html
+++ b/trunk/research/players/srs_player.html
@@ -7,8 +7,11 @@
     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
     <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/swfobject.js"></script>
-    <script type="text/javascript" src="js/srs.js"></script>
+    <script type="text/javascript" src="js/srs.page.js"></script>
     <script type="text/javascript" src="js/srs.log.js"></script>
+    <script type="text/javascript" src="js/srs.player.js"></script>
+    <script type="text/javascript" src="js/srs.publisher.js"></script>
+    <script type="text/javascript" src="js/srs.utility.js"></script>
     <style>
         body{
             padding-top: 55px;
diff --git a/trunk/research/players/srs_publisher.html b/trunk/research/players/srs_publisher.html
index 9deb86ebe..c48df777f 100755
--- a/trunk/research/players/srs_publisher.html
+++ b/trunk/research/players/srs_publisher.html
@@ -7,8 +7,11 @@
     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
     <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/swfobject.js"></script>
-    <script type="text/javascript" src="js/srs.js"></script>
+    <script type="text/javascript" src="js/srs.page.js"></script>
     <script type="text/javascript" src="js/srs.log.js"></script>
+    <script type="text/javascript" src="js/srs.player.js"></script>
+    <script type="text/javascript" src="js/srs.publisher.js"></script>
+    <script type="text/javascript" src="js/srs.utility.js"></script>
     <style>
         body{
             padding-top: 55px;
diff --git a/trunk/research/players/vlc.html b/trunk/research/players/vlc.html
index f9644d013..2cd976676 100755
--- a/trunk/research/players/vlc.html
+++ b/trunk/research/players/vlc.html
@@ -7,8 +7,7 @@
     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
     <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/swfobject.js"></script>
-    <script type="text/javascript" src="js/srs.js"></script>
-    <script type="text/javascript" src="js/srs.log.js"></script>
+    <script type="text/javascript" src="js/srs.page.js"></script>
     <style>
         body{
             padding-top: 55px;