refine srs player, support set the bufferTimeMax.

winlin
Commit b25c45c64377b3f758fdb3d2aa3669601339a31a b25c45c6 1 parent 74d4c964
trunk/research/players/js/srs.page.js
trunk/research/players/js/srs.player.js
trunk/research/players/srs_player.html
trunk/research/players/srs_player/release/srs_player.swf
trunk/research/players/srs_player/src/srs_player.as
--- a/trunk/research/players/js/srs.page.js
查看文件 @b25c45c
+++ b/trunk/research/players/js/srs.page.js
查看文件 @b25c45c
@@ -3,7 +3,7 @@
 //////////////////////////////////////////////////////////////////////////////////
 // to query the swf anti cache.
-function srs_get_version_code() { return "1.25"; }
+function srs_get_version_code() { return "1.26"; }
 /**
 * player specified size.
--- a/trunk/research/players/js/srs.player.js
查看文件 @b25c45c
+++ b/trunk/research/players/js/srs.player.js
查看文件 @b25c45c
@@ -23,6 +23,7 @@ function SrsPlayer(container, width, height, private_object) {
     this.id = SrsPlayer.__id++;
     this.stream_url = null;
     this.buffer_time = 0.3; // default to 0.3
+    this.max_buffer_time = this.buffer_time * 3; // default to 3 x bufferTime.
     this.volume = 1.0; // default to 100%
     this.callbackObj = null;
@@ -118,8 +119,11 @@ SrsPlayer.prototype.play = function(url, volume) {
         this.volume = volume;
     }
-    this.callbackObj.ref.__play(this.stream_url, this.width, this.height, this.buffer_time, this.volume);
+    this.callbackObj.ref.__play(this.stream_url, this.width, this.height, this.buffer_time, this.max_buffer_time, this.volume);
 }
+/**
+ * stop play stream.
+ */
 SrsPlayer.prototype.stop = function() {
     for (var i = 0; i < SrsPlayer.__players.length; i++) {
         var player = SrsPlayer.__players[i];
@@ -134,9 +138,15 @@ SrsPlayer.prototype.stop = function() {
     this.callbackObj.ref.__stop();
 }
+/**
+ * pause the play.
+ */
 SrsPlayer.prototype.pause = function() {
     this.callbackObj.ref.__pause();
 }
+/**
+ * resume the play.
+ */
 SrsPlayer.prototype.resume = function() {
     this.callbackObj.ref.__resume();
 }
@@ -180,23 +190,75 @@ SrsPlayer.prototype.set_fs = function(refer, percent) {
 * @buffer_time the buffer time in seconds.
 */
 SrsPlayer.prototype.set_bt = function(buffer_time) {
+    if (this.buffer_time == buffer_time) {
+        return;
+    }
+
     this.buffer_time = buffer_time;
     this.callbackObj.ref.__set_bt(buffer_time);
+
+    // reset the max buffer time to 3 x buffer_time.
+    this.set_mbt(buffer_time * 3);
+}
+/**
+ * set the stream max buffer time in seconds.
+ * @param max_buffer_time the max buffer time in seconds.
+ * @remark this is the key feature for realtime communication by flash.
+ */
+SrsPlayer.prototype.set_mbt = function(max_buffer_time) {
+    // we must atleast set the max buffer time to 0.6s.
+    max_buffer_time = Math.max(0.6, max_buffer_time);
+    // max buffer time always greater than buffer time.
+    max_buffer_time = Math.max(this.buffer_time, max_buffer_time);
+
+    if (parseInt(this.max_buffer_time * 10) == parseInt(max_buffer_time * 10)) {
+        return;
+    }
+
+    this.max_buffer_time = max_buffer_time;
+    this.callbackObj.ref.__set_mbt(max_buffer_time);
 }
+/**
+ * the callback when player is ready.
+ */
 SrsPlayer.prototype.on_player_ready = function() {
 }
+/**
+ * the callback when player got metadata.
+ * @param metadata the metadata which player got.
+ */
 SrsPlayer.prototype.on_player_metadata = function(metadata) {
     // ignore.
 }
+/**
+ * the callback when player timer event.
+ * @param time current stream time.
+ * @param buffer_length current buffer length.
+ * @param kbps current video plus audio bitrate in kbps.
+ * @param fps current video fps.
+ * @param rtime current relative time by flash.util.getTimer().
+ */
 SrsPlayer.prototype.on_player_timer = function(time, buffer_length, kbps, fps, rtime) {
     // ignore.
 }
+/**
+ * the callback when player got NetStream.Buffer.Empty
+ * @param time current relative time by flash.util.getTimer().
+ */
 SrsPlayer.prototype.on_player_empty = function(time) {
     // ignore.
 }
+/**
+ * the callback when player got NetStream.Buffer.Full
+ * @param time current relative time by flash.util.getTimer().
+ */
 SrsPlayer.prototype.on_player_full = function(time) {
     // ignore.
 }
+
+/**
+ * helpers.
+ */
 function __srs_find_player(id) {
     for (var i = 0; i < SrsPlayer.__players.length; i++) {
         var player = SrsPlayer.__players[i];
--- a/trunk/research/players/srs_player.html
查看文件 @b25c45c
+++ b/trunk/research/players/srs_player.html
查看文件 @b25c45c
@@ -284,7 +284,7 @@
             <div>
                 <div class="btn-group dropup">
                     <button class="btn dropdown-toggle" data-toggle="dropdown">
-                        设置全屏比例大小<span class="caret"></span>
+                        全屏比例大小<span class="caret"></span>
                     </button>
                     <ul class="dropdown-menu">
                         <li><a id="btn_fs_size_screen_100" href="#">屏幕大小(100%)</a></li>
@@ -296,7 +296,7 @@
                     </ul>
                 </div>
                 <div class="btn-group dropup">
-                    <button class="btn dropdown-toggle" data-toggle="dropdown">设置显示比例<span class="caret"></span></button>
+                    <button class="btn dropdown-toggle" data-toggle="dropdown">显示比例<span class="caret"></span></button>
                     <ul class="dropdown-menu">
                         <li><a id="btn_dar_original" href="#">视频原始比例</a></li>
                         <li><a id="btn_dar_21_9" href="#">宽屏影院(21:9)</a></li>
@@ -306,23 +306,38 @@
                     </ul>
                 </div>
                 <div class="btn-group dropup">
-                    <button class="btn dropdown-toggle" data-toggle="dropdown">设置缓冲区大小<span class="caret"></span></button>
+                    <button class="btn dropdown-toggle" data-toggle="dropdown">缓冲区大小<span class="caret"></span></button>
                     <ul class="dropdown-menu">
                         <li><a id="btn_bt_0_1" href="#">0.1秒(实时)</a></li>
                         <li><a id="btn_bt_0_2" href="#">0.2秒(实时)</a></li>
                         <li><a id="btn_bt_0_3" href="#">0.3秒(实时)</a></li>
                         <li><a id="btn_bt_0_5" href="#">0.5秒(实时)</a></li>
                         <li><a id="btn_bt_0_8" href="#">0.8秒(会议)</a></li>
-                        <li><a id="btn_bt_1" href="#">1秒(低延迟)</a></li>
-                        <li><a id="btn_bt_2" href="#">2秒(较低延时)</a></li>
-                        <li><a id="btn_bt_3" href="#">3秒(流畅播放)</a></li>
-                        <li><a id="btn_bt_5" href="#">5秒(网速较低)</a></li>
-                        <li><a id="btn_bt_10" href="#">10秒(无所谓延迟)</a></li>
-                        <li><a id="btn_bt_30" href="#">30秒(流畅第一)</a></li>
+                        <li><a id="btn_bt_1_0" href="#">1秒(低延迟)</a></li>
+                        <li><a id="btn_bt_2_0" href="#">2秒(较低延时)</a></li>
+                        <li><a id="btn_bt_3_0" href="#">3秒(流畅播放)</a></li>
+                        <li><a id="btn_bt_5_0" href="#">5秒(网速较低)</a></li>
+                        <li><a id="btn_bt_10_0" href="#">10秒(无所谓延迟)</a></li>
+                        <li><a id="btn_bt_30_0" href="#">30秒(流畅第一)</a></li>
                     </ul>
                 </div>
                 <div class="btn-group dropup">
-                    <a id="btn_fullscreen" class="btn">进入全屏</a>
+                    <button class="btn dropdown-toggle" data-toggle="dropdown">最大缓冲区<span class="caret"></span></button>
+                    <ul class="dropdown-menu">
+                        <li><a id="btn_mbt_0_6" href="#">0.6秒(实时)</a></li>
+                        <li><a id="btn_mbt_0_9" href="#">0.9秒(实时)</a></li>
+                        <li><a id="btn_mbt_1_5" href="#">1.5秒(实时)</a></li>
+                        <li><a id="btn_mbt_2_4" href="#">2.4秒(会议)</a></li>
+                        <li><a id="btn_mbt_3_0" href="#">3秒(低延迟)</a></li>
+                        <li><a id="btn_mbt_6_0" href="#">6秒(较低延时)</a></li>
+                        <li><a id="btn_mbt_9_0" href="#">9秒(流畅播放)</a></li>
+                        <li><a id="btn_mbt_15_0" href="#">15秒(网速较低)</a></li>
+                        <li><a id="btn_mbt_30_0" href="#">30秒(无所谓延迟)</a></li>
+                        <li><a id="btn_mbt_90_0" href="#">90秒(流畅第一)</a></li>
+                    </ul>
+                </div>
+                <div class="btn-group dropup">
+                    <a id="btn_fullscreen" class="btn">全屏</a>
                 </div>
                 <div class="btn-group dropup">
                     <button id="btn_pause" class="btn">暂停播放</button>
@@ -337,21 +352,25 @@
                 由于安全原因，Flash全屏无法使用JS触发
             </div>
             <div>
+                <div class="input-prepend div_play_time" title="BufferLength/BufferTime/MaxBufferTime">
+                    <span class="add-on">@B</span>
+                    <input class="span2" style="width:80px" id="txt_buffer" type="text" placeholder="0/0/0s">
+                </div>
                 <div class="input-prepend div_play_time" title="视频的播放流畅度">
                     <span class="add-on">@F</span>
                     <input class="span2" style="width:57px" id="txt_fluency" type="text" placeholder="100%">
                 </div>
                 <div class="input-prepend div_play_time" title="视频总共卡顿次数">
                     <span class="add-on">@E</span>
-                    <input class="span2" style="width:85px" id="txt_empty_count" type="text" placeholder="0">
+                    <input class="span2" style="width:45px" id="txt_empty_count" type="text" placeholder="0">
                 </div>
                 <div class="input-prepend div_play_time" title="视频当前的帧率FPS">
                     <span class="add-on">@F</span>
-                    <input class="span2" style="width:85px" id="txt_fps" type="text" placeholder="fps">
+                    <input class="span2" style="width:55px" id="txt_fps" type="text" placeholder="fps">
                 </div>
                 <div class="input-prepend div_play_time" title="视频当前的码率(视频+音频)，单位：Kbps">
                     <span class="add-on">@B</span>
-                    <input class="span2" style="width:85px" id="txt_bitrate" type="text" placeholder="kbps">
+                    <input class="span2" style="width:55px" id="txt_bitrate" type="text" placeholder="kbps">
                 </div>
                 <div class="input-prepend div_play_time" title="播放时长，格式：天 时:分:秒">
                     <span class="add-on">@T</span>
@@ -410,6 +429,17 @@
         __active_size.addClass("active");
     }
+    function select_buffer(buffer_time) {
+        var bt = buffer_time;
+        var bt_id = "#btn_bt_" + bt.toFixed(1).replace(".", "_");
+        select_buffer_time(bt_id, bt);
+    }
+    function select_max_buffer(max_buffer_time) {
+        var mbt = max_buffer_time;
+        var mbt_id = "#btn_mbt_" + mbt.toFixed(1).replace(".", "_");
+        select_max_buffer_time(mbt_id, mbt);
+    }
+
     var __active_bt = null;
     function select_buffer_time(bt_id, buffer_time) {
         srs_player.set_bt(buffer_time);
@@ -420,6 +450,20 @@
         __active_bt = $(bt_id).parent();
         __active_bt.addClass("active");
+
+        select_max_buffer(srs_player.max_buffer_time);
+    }
+
+    var __active_mbt = null;
+    function select_max_buffer_time(mbt_id, max_buffer_time) {
+        srs_player.set_mbt(max_buffer_time);
+
+        if (__active_mbt) {
+            __active_mbt.removeClass("active");
+        }
+
+        __active_mbt = $(mbt_id).parent();
+        __active_mbt.addClass("active");
     }
     $(function(){
@@ -447,7 +491,7 @@
             srs_player = new SrsPlayer("player_id", srs_get_player_width(), srs_get_player_height());
             srs_player.on_player_ready = function() {
-                select_buffer_time("#btn_bt_0_1", 0.1);
+                select_buffer(0.2);
                 this.play(url);
             };
             srs_player.on_player_metadata = function(metadata) {
@@ -456,16 +500,21 @@
                 select_fs_size("#btn_fs_size_screen_100", "screen", 100);
             };
             srs_player.on_player_timer = function(time, buffer_length, kbps, fps, rtime) {
-                var buffer = buffer_length / this.buffer_time * 100;
+                var buffer = buffer_length / this.max_buffer_time * 100;
                 $("#pb_buffer").width(Number(buffer).toFixed(1) + "%");
                 $("#pb_buffer_bg").attr("title",
-                        "缓冲区长度:" + Number(buffer_length).toFixed(1) + "秒("
-                        + Number(buffer).toFixed(1) + "%)");
+                        "缓冲区:" + buffer_length.toFixed(1) + "秒, 最大缓冲区:"
+                        + this.max_buffer_time.toFixed(1) + "秒, 当前:"
+                        + buffer.toFixed(1) + "%");
-                $("#txt_bitrate").val(kbps.toFixed(1) + "kbps");
+                var bts = this.buffer_time >= 1? this.buffer_time.toFixed(0) : this.buffer_time.toFixed(1);
+                var mbts = this.buffer_time >= 1? this.max_buffer_time.toFixed(0) : this.max_buffer_time.toFixed(1);
+                $("#txt_buffer").val(buffer_length.toFixed(1) + "/" + bts + "/" + mbts + "s");
+
+                $("#txt_bitrate").val(kbps.toFixed(0) + "kbps");
                 $("#txt_fps").val(fps.toFixed(1) + "fps");
-                $("#txt_empty_count").val(srs_player.empty_count() + "次卡顿");
+                $("#txt_empty_count").val(srs_player.empty_count() + "次");
                 $("#txt_fluency").val(srs_player.fluency().toFixed(2) + "%");
                 var time_str = "";
@@ -619,39 +668,32 @@
         }
         if (true) {
-            $("#btn_bt_0_1").click(function(){
-                select_buffer_time("#btn_bt_0_1", 0.1);
-            });
-            $("#btn_bt_0_2").click(function(){
-                select_buffer_time("#btn_bt_0_2", 0.2);
-            });
-            $("#btn_bt_0_3").click(function(){
-                select_buffer_time("#btn_bt_0_3", 0.3);
-            });
-            $("#btn_bt_0_5").click(function(){
-                select_buffer_time("#btn_bt_0_5", 0.5);
-            });
-            $("#btn_bt_0_8").click(function(){
-                select_buffer_time("#btn_bt_0_8", 0.8);
-            });
-            $("#btn_bt_1").click(function(){
-                select_buffer_time("#btn_bt_1", 1);
-            });
-            $("#btn_bt_2").click(function(){
-                select_buffer_time("#btn_bt_2", 2);
-            });
-            $("#btn_bt_3").click(function(){
-                select_buffer_time("#btn_bt_3", 3);
-            });
-            $("#btn_bt_5").click(function(){
-                select_buffer_time("#btn_bt_5", 5);
-            });
-            $("#btn_bt_10").click(function(){
-                select_buffer_time("#btn_bt_10", 10);
+            var bts = [0.1, 0.2, 0.3, 0.5, 0.8, 1, 2, 3, 5, 10, 30];
+            for (var i = 0; i < bts.length; i++) {
+                var bt = bts[i];
+                var bt_id = "#btn_bt_" + bt.toFixed(1).replace(".", "_");
+
+                var bt_fun = function(id, v){
+                    $(bt_id).click(function(){
+                        select_buffer_time(id, v);
                     });
-            $("#btn_bt_30").click(function(){
-                select_buffer_time("#btn_bt_30", 30);
+                };
+                bt_fun(bt_id, bt);
+            }
+        }
+        if (true) {
+            var mbts = [0.6, 0.9, 1.5, 2.4, 3, 6, 9, 15, 30, 90];
+            for (var i = 0; i < mbts.length; i++) {
+                var mbt = mbts[i];
+                var mbt_id = "#btn_mbt_" + mbt.toFixed(1).replace(".", "_");
+
+                var mbt_fun = function(id, v){
+                    $(mbt_id).click(function(){
+                        select_max_buffer_time(id, v);
                     });
+                };
+                mbt_fun(mbt_id, mbt);
+            }
         }
         var query = parse_query_string();
--- a/trunk/research/players/srs_player/release/srs_player.swf
查看文件 @b25c45c
+++ b/trunk/research/players/srs_player/release/srs_player.swf
查看文件 @b25c45c
--- a/trunk/research/players/srs_player/src/srs_player.as
查看文件 @b25c45c
+++ b/trunk/research/players/srs_player/src/srs_player.as
查看文件 @b25c45c
@@ -123,6 +123,7 @@ package
             flash.external.ExternalInterface.addCallback("__set_dar", this.js_call_set_dar);
             flash.external.ExternalInterface.addCallback("__set_fs", this.js_call_set_fs_size);
             flash.external.ExternalInterface.addCallback("__set_bt", this.js_call_set_bt);
+			flash.external.ExternalInterface.addCallback("__set_mbt", this.js_call_set_mbt);
             flash.external.ExternalInterface.call(this.js_on_player_ready, this.js_id);
         }
@@ -228,6 +229,7 @@ package
         private function js_call_pause():void {
             if (this.media_stream) {
                 this.media_stream.pause();
+				log("user pause play");
             }
         }
@@ -237,6 +239,7 @@ package
         private function js_call_resume():void {
             if (this.media_stream) {
                 this.media_stream.resume();
+				log("user resume play");
             }
         }
@@ -254,6 +257,7 @@ package
             user_dar_den = den;
             flash.utils.setTimeout(__execute_user_set_dar, 0);
+			log("user set dar to " + num + "/" + den);
         }
         /**
@@ -267,6 +271,7 @@ package
         private function js_call_set_fs_size(refer:String, percent:int):void {
             user_fs_refer = refer;
             user_fs_percent = percent;
+			log("user set refer to " + refer + ", percent to" + percent);
         }
         /**
@@ -276,6 +281,19 @@ package
         private function js_call_set_bt(buffer_time:Number):void {
             if (this.media_stream) {
                 this.media_stream.bufferTime = buffer_time;
+				log("user set bufferTime to " + buffer_time.toFixed(2) + "s");
+            }
+        }
+		
+		/**
+		 * set the max stream buffer time in seconds.
+		 * @max_buffer_time the max buffer time in seconds.
+		 * @remark this is the key feature for realtime communication by flash.
+		 */
+		private function js_call_set_mbt(max_buffer_time:Number):void {
+			if (this.media_stream) {
+				this.media_stream.bufferTimeMax = max_buffer_time;
+				log("user set bufferTimeMax to " + max_buffer_time.toFixed(2) + "s");
 			}
 		}
@@ -335,13 +353,16 @@ package
          * @param _width, the player width.
          * @param _height, the player height.
          * @param buffer_time, the buffer time in seconds. recommend to >=0.5
+		 * @param max_buffer_time, the max buffer time in seconds. recommend to 3 x buffer_time.
          * @param volume, the volume, 0 is mute, 1 is 100%, 2 is 200%.
          */
-        private function js_call_play(url:String, _width:int, _height:int, buffer_time:Number, volume:Number):void {
+        private function js_call_play(url:String, _width:int, _height:int, buffer_time:Number, max_buffer_time:Number, volume:Number):void {
             this.user_url = url;
             this.user_w = _width;
             this.user_h = _height;
-            log("start to play url: " + this.user_url + ", w=" + this.user_w + ", h=" + this.user_h);
+            log("start to play url: " + this.user_url + ", w=" + this.user_w + ", h=" + this.user_h
+				+ ", buffer=" + buffer_time.toFixed(2) + "s, max_buffer=" + max_buffer_time.toFixed(2) + "s, volume=" + volume.toFixed(2)
+			);
             js_call_stop();
@@ -349,7 +370,7 @@ package
             this.media_conn.client = {};
             this.media_conn.client.onBWDone = function():void {};
             this.media_conn.addEventListener(NetStatusEvent.NET_STATUS, function(evt:NetStatusEvent):void {
-                trace ("NetConnection: code=" + evt.info.code);
+                log("NetConnection: code=" + evt.info.code);
                 if (evt.info.hasOwnProperty("data") && evt.info.data) {
                     if (evt.info.data.hasOwnProperty("srs_server")) {
@@ -381,10 +402,11 @@ package
                 media_stream = new NetStream(media_conn);
                 media_stream.soundTransform = new SoundTransform(volume);
                 media_stream.bufferTime = buffer_time;
+				media_stream.bufferTimeMax = max_buffer_time;
                 media_stream.client = {};
                 media_stream.client.onMetaData = system_on_metadata;
                 media_stream.addEventListener(NetStatusEvent.NET_STATUS, function(evt:NetStatusEvent):void {
-                    trace ("NetStream: code=" + evt.info.code);
+                    log("NetStream: code=" + evt.info.code);
                     if (evt.info.code == "NetStream.Video.DimensionChange") {
                         system_on_metadata(media_metadata);