diff --git a/trunk/research/players/js/srs.page.js b/trunk/research/players/js/srs.page.js
old mode 100644
new mode 100755
index fff3ccb97..e68ee30f9
--- a/trunk/research/players/js/srs.page.js
+++ b/trunk/research/players/js/srs.page.js
@@ -286,19 +286,19 @@ function srs_chat_initialize_page(
     
     //var gops = ["0.3", "0.5", "1", "2", "3", "4", 
     //    "5", "6", "7", "8", "9", "10", "15", "20"];
-    $(sl_gop + " option[value='0.5']").attr("selected", true);
+    $(sl_gop + " option[value='1']").attr("selected", true);
     
     //var sizes = ["176x144", "320x240", "352x240", 
     //    "352x288", "460x240", "640x480", "720x480", "720x576", "800x600", 
     //    "1024x768", "1280x720", "1360x768", "1920x1080"];
-    $(sl_size + " option[value='320x240']").attr("selected", true);
+    $(sl_size + " option[value='640x480']").attr("selected", true);
     
     //var fpses = ["5", "10", "15", "20", "24", "25", "29.97", "30"];
-    $(sl_fps + " option[value='10']").attr("selected", true);
+    $(sl_fps + " option[value='15']").attr("selected", true);
     
     //var bitrates = ["50", "200", "350", "500", "650", "800", 
     //    "950", "1000", "1200", "1500", "1800", "2000", "3000", "5000"];
-    $(sl_bitrate + " option[value='200']").attr("selected", true);
+    $(sl_bitrate + " option[value='350']").attr("selected", true);
 }
 /**
 * get the vcodec and acodec.
diff --git a/trunk/research/players/js/srs.publisher.js b/trunk/research/players/js/srs.publisher.js
index b46d51ef7..3dac341ec 100755
--- a/trunk/research/players/js/srs.publisher.js
+++ b/trunk/research/players/js/srs.publisher.js
@@ -87,6 +87,9 @@ SrsPublisher.prototype.start = function() {
 * @param acodec an object contains the audio codec info.
 */
 SrsPublisher.prototype.publish = function(url, vcodec, acodec) {
+    this.stop();
+    SrsPublisher.__publishers.push(this);
+    
     if (url) {
         this.url = url;
     }
@@ -100,6 +103,17 @@ SrsPublisher.prototype.publish = function(url, vcodec, acodec) {
     this.callbackObj.ref.__publish(this.url, this.width, this.height, this.vcodec, this.acodec);
 }
 SrsPublisher.prototype.stop = function() {
+    for (var i = 0; i < SrsPublisher.__publishers.length; i++) {
+        var player = SrsPublisher.__publishers[i];
+        
+        if (player.id != this.id) {
+            continue;
+        }
+        
+        SrsPublisher.__publishers.splice(i, 1);
+        break;
+    }
+    
     this.callbackObj.ref.__stop();
 }
 /**
diff --git a/trunk/research/players/srs_chat.html b/trunk/research/players/srs_chat.html
index 270322d91..f895c4e5d 100755
--- a/trunk/research/players/srs_chat.html
+++ b/trunk/research/players/srs_chat.html
@@ -86,6 +86,16 @@
                 realtime_player.start();
             }
             
+            // 2x8 users
+            for (var i = 0; i < 8; i++) {
+                var tr = $("<tr></tr>").hide();
+                $("#lst_chats").append(tr);
+                
+                for (var j = 0; j < 2; j++) {
+                    tr.append($("<td></td>").attr("id", "td_" + (i * 8 + j)));
+                }
+            }
+            
             api_server = "http://" + query.hostname + ":" + srs_get_api_server_port() + "/api/v1/chats";
             refresh();
         });
@@ -187,89 +197,44 @@
                 }
             });
         }
-        function render_chat_room(chats) {
+        function render_chat_room(original_chats) {
             if (!self_chat) {
                 return;
             }
             
+            var chats = [];
+            for (var i = 0; i < original_chats.length; i++) {
+                var chat = original_chats[i];
+                
+                // ignore the self.
+                if (self_chat && self_chat.id == chat.id) {
+                    continue;
+                }
+                
+                chats.push(chat);
+            }
+            
             // new added chat
             for (var i = 0; i < chats.length; i++) {
                 var chat = chats[i];
-                // ignore the self.
-                if (self_chat && self_chat.id == chat.id) {
-                    continue;
-                }
                 
                 // if previous exists, ignore, only add new here.
                 var previous_chat = get_previous_chat_user(previous_chats, chat.id);
                 if (previous_chat) {
                     // update reference.
+                    chat.ui = previous_chat.ui;
+                    chat.parent = previous_chat.parent;
                     chat.player = previous_chat.player;
-                    chat.player.private_object = chat;
+                    if (chat.player) {
+                        chat.player.private_object = chat;
+                    }
                     continue;
                 }
-                
-                global_chat_user_id++;
-                
-                // username: a str indicates the user name.
-                // url: a str indicates the url of user stream.
-                // join_date: a str indicates the join timestamp in seconds.
-                // join_date_str: friendly formated time.
-                var obj = $("<div/>").html($("#template").html());
-                $(obj).attr("chat_id", chat.id);
-                $(obj).attr("id", "div_" + chat.id); // for specifed chat: $("#div_" + chat_id)
-                $(obj).attr("class", "div_chat"); // for all chats: $(".div_chat")
-                $(obj).find("#chat_player").attr("id", "rp_" + chat.id); // for specifed player: $("#rp_" + chat_id)
-                $(obj).find("#chat_player_raw").attr("id", "rp_raw_" + chat.id); // for specifed player: $("#rp_raw_" + chat_id)
-                $(obj).find("#user_name").text(chat.username);
-                $(obj).find("#join_date").text(chat.join_date_str);
-                $(obj).find("#collapseM").attr("id", "collapse_" + global_chat_user_id);
-                $(obj).find("#headerN").attr("href", "#collapse_" + global_chat_user_id);
-                
-                $("#lst_chats").append(obj);
-            
-                if (!no_play) {
-                    // start the realtime player.
-                    var _player = new SrsPlayer("rp_raw_" + chat.id, 600, 300, chat);
-                    _player.on_player_ready = function() {
-                        this.set_bt(0.5);
-                    };
-                    _player.on_player_metadata = function(metadata) {
-                        this.set_dar(0, 0);
-                        this.set_fs("screen", 100);
-                    }
-                    _player.start(chat.url);
-                    
-                    chat.player = _player;
-                } else {
-                    chat.player = null;
-                }
-                
-                $(obj).find("#collapse_main").on('hidden', function(){
-                    var id = $(this).parent().attr("chat_id");
-                    var chat = get_previous_chat_user(previous_chats, id);
-                    if (!chat || !chat.player) {
-                        return;
-                    }
-                    chat.player.stop();
-                });
-                $(obj).find("#collapse_main").on('shown', function(){
-                    var id = $(this).parent().attr("chat_id");
-                    var chat = get_previous_chat_user(previous_chats, id);
-                    if (!chat || !chat.player) {
-                        return;
-                    }
-                    chat.player.play();
-                });
             }
             
             // removed chat
             for (var i = 0; i < previous_chats.length; i++) {
                 var chat = previous_chats[i];
-                // ignore the self.
-                if (self_chat && self_chat.id == chat.id) {
-                    continue;
-                }
                 
                 var new_chat = get_previous_chat_user(chats, chat.id);
                 if (new_chat) {
@@ -282,6 +247,117 @@
                 $("#div_" + chat.id).remove();
             }
             
+            // hide empty rows.
+            $("#lst_chats").find("tr").each(function(){
+                var empty = true;
+                
+                $(this).find("td").each(function(){
+                    if ($(this).html() != "") {
+                        empty = false;
+                        return false; // abort each
+                    }
+                    return true;
+                });
+                
+                if (empty) {
+                    $(this).hide();
+                }
+            });
+            
+            // render the chat
+            for (var i = 0; i < chats.length; i++) {
+                var chat = chats[i];
+                
+                // if redered, ignore.
+                if (chat.parent) {
+                    continue;
+                }
+                
+                // generate the ui of chat
+                if (!chat.ui) {
+                    global_chat_user_id++;
+                    
+                    // username: a str indicates the user name.
+                    // url: a str indicates the url of user stream.
+                    // join_date: a str indicates the join timestamp in seconds.
+                    // join_date_str: friendly formated time.
+                    var obj = $("<div/>").html($("#template").html());
+                    if (true) {
+                        // save current ui object to the chat.
+                        chat.ui = obj;
+                        
+                        $(obj).attr("chat_id", chat.id);
+                        $(obj).attr("id", "div_" + chat.id); // for specifed chat: $("#div_" + chat_id)
+                        $(obj).attr("class", "div_chat"); // for all chats: $(".div_chat")
+                        $(obj).find("#chat_player").attr("id", "rp_" + chat.id); // for specifed player: $("#rp_" + chat_id)
+                        $(obj).find("#chat_player_raw").attr("id", "rp_raw_" + chat.id); // for specifed player: $("#rp_raw_" + chat_id)
+                        $(obj).find("#user_name").text(chat.username);
+                        $(obj).find("#join_date").text(chat.join_date_str);
+                        $(obj).find("#collapseM").attr("id", "collapse_" + global_chat_user_id);
+                        $(obj).find("#headerN").attr("href", "#collapse_" + global_chat_user_id);
+                    }
+                }
+                
+                // find a idle td to render the chat.
+                var parent = null;
+                $("#lst_chats").find("td").each(function(){
+                    if ($(this).html() != "") {
+                        return true;
+                    }
+                    
+                    parent = $(this);
+                    return false; // abort each
+                });
+                
+                if (!parent) {
+                    warn("没有可用的位置展示流。");
+                    break;
+                }
+                $(parent).append(chat.ui);
+                $(parent).parent().show();
+                
+                // when ui elements appent to the page,
+                // create the player, or flash will failed.
+                if (!chat.parent) {
+                    chat.parent = $(parent);
+                    
+                    if (!no_play) {
+                        // start the realtime player.
+                        var _player = new SrsPlayer("rp_raw_" + chat.id, 430, 185, chat);
+                        _player.on_player_ready = function() {
+                            this.set_bt(0.5);
+                            this.play();
+                        };
+                        _player.on_player_metadata = function(metadata) {
+                            this.set_dar(0, 0);
+                            this.set_fs("screen", 100);
+                        }
+                        _player.start(chat.url);
+                        
+                        chat.player = _player;
+                    } else {
+                        chat.player = null;
+                    }
+                    
+                    $(obj).find("#collapse_main").on('hidden', function(){
+                        var id = $(this).parent().attr("chat_id");
+                        var chat = get_previous_chat_user(previous_chats, id);
+                        if (!chat || !chat.player) {
+                            return;
+                        }
+                        chat.player.stop();
+                    });
+                    $(obj).find("#collapse_main").on('shown', function(){
+                        var id = $(this).parent().attr("chat_id");
+                        var chat = get_previous_chat_user(previous_chats, id);
+                        if (!chat || !chat.player) {
+                            return;
+                        }
+                        chat.player.play();
+                    });
+                }
+            }
+            
             previous_chats = chats;
         }
         function get_previous_chat_user(arr, id) {
@@ -325,10 +401,6 @@
             // removed chat
             for (var i = 0; i < previous_chats.length; i++) {
                 var chat = previous_chats[i];
-                // ignore the self.
-                if (self_chat && self_chat.id == chat.id) {
-                    continue;
-                }
                 
                 if (chat.player) {
                     chat.player.stop();
@@ -517,26 +589,18 @@
                     <img src="img/tooltip.png"/>
                 </span>
             </div>
-            <div id="collapseM" class="accordion-body collapse">
+            <div id="collapseM" class="accordion-body collapse in">
                 <div class="accordion-inner">
-                    <div class="row-fluid">
-                        <div class="span2">
-                        </div>
-                        <div class="span8">
-                            <div id="chat_player">
-                                <div id="chat_player_raw">
-                                </div>
-                            </div>
-                        </div>
-                        <div class="span2">
+                    <div id="chat_player">
+                        <div id="chat_player_raw">
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    <div class="container" id="lst_chats">
-    </div>
+    <table id="lst_chats" class="table">
+    </table>
     <div id="video_modal" class="modal hide fade">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>