support fluency and stream empty count

trunk/research/players/js/srs.player.js

@@ -30,6 +30,32 @@ function SrsPlayer(container, width, height, private_object) {
     this.meatadata = {}; // for on_player_metadata
     this.time = 0; // current stream time.
     this.buffer_length = 0; // current stream buffer length.
+    this.kbps = 0; // current stream bitrate(video+audio) in kbps.
+    this.fps = 0; // current stream video fps.
+    this.rtime = 0; // flash relative time in ms.
+
+    this.__fluency = {
+        total_empty_count: 0,
+        total_empty_time: 0,
+        current_empty_time: 0
+    };
+    this.__fluency.on_stream_empty = function(time) {
+        this.total_empty_count++;
+        this.current_empty_time = time;
+    };
+    this.__fluency.on_stream_full = function(time) {
+        if (this.current_empty_time > 0) {
+            this.total_empty_time += time - this.current_empty_time;
+            this.current_empty_time = 0;
+        }
+    };
+    this.__fluency.calc = function(time) {
+        var den = this.total_empty_count * 4 + this.total_empty_time * 2 + time;
+        if (den > 0) {
+            return time * 100 / den;
+        }
+        return 0;
+    };
 }
 /**
 * user can set some callback, then start the player.
@@ -49,6 +75,8 @@ SrsPlayer.prototype.start = function(url) {
     flashvars.on_player_ready = "__srs_on_player_ready";
     flashvars.on_player_metadata = "__srs_on_player_metadata";
     flashvars.on_player_timer = "__srs_on_player_timer";
+    flashvars.on_player_empty = "__srs_on_player_empty";
+    flashvars.on_player_full = "__srs_on_player_full";
     
     var params = {};
     params.wmode = "opaque";
@@ -112,6 +140,18 @@ SrsPlayer.prototype.pause = function() {
 SrsPlayer.prototype.resume = function() {
     this.callbackObj.ref.__resume();
 }
+/**
+ * get the stream fluency, where 100 is 100%.
+ */
+SrsPlayer.prototype.fluency = function() {
+    return this.__fluency.calc(this.rtime);
+}
+/**
+ * get the stream empty count.
+ */
+SrsPlayer.prototype.empty_count = function() {
+    return this.__fluency.total_empty_count;
+}
 /**
 * to set the DAR, for example, DAR=16:9 where num=16,den=9.
 * @param num, for example, 16. 
@@ -148,7 +188,13 @@ SrsPlayer.prototype.on_player_ready = function() {
 SrsPlayer.prototype.on_player_metadata = function(metadata) {
     // ignore.
 }
-SrsPlayer.prototype.on_player_timer = function(time, buffer_length) {
+SrsPlayer.prototype.on_player_timer = function(time, buffer_length, kbps, fps, rtime) {
+    // ignore.
+}
+SrsPlayer.prototype.on_player_empty = function(time) {
+    // ignore.
+}
+SrsPlayer.prototype.on_player_full = function(time) {
     // ignore.
 }
 function __srs_find_player(id) {
@@ -177,7 +223,7 @@ function __srs_on_player_metadata(id, metadata) {
     
     player.on_player_metadata(metadata);
 }
-function __srs_on_player_timer(id, time, buffer_length) {
+function __srs_on_player_timer(id, time, buffer_length, kbps, fps, rtime) {
     var player = __srs_find_player(id);
     
     buffer_length = Math.max(0, buffer_length);
@@ -189,6 +235,19 @@ function __srs_on_player_timer(id, time, buffer_length) {
     // so set the data before invoke it.
     player.time = time;
     player.buffer_length = buffer_length;
-    
-    player.on_player_timer(time, buffer_length);
+    player.kbps = kbps;
+    player.fps = fps;
+    player.rtime = rtime;
+
+    player.on_player_timer(time, buffer_length, kbps, fps, rtime);
+}
+function __srs_on_player_empty(id, time) {
+    var player = __srs_find_player(id);
+    player.__fluency.on_stream_empty(time);
+    player.on_player_empty(time);
+}
+function __srs_on_player_full(id, time) {
+    var player = __srs_find_player(id);
+    player.__fluency.on_stream_full(time);
+    player.on_player_full(time);
 }

trunk/research/players/js/winlin.utility.js

@@ -5,7 +5,7 @@
  * depends: jquery1.10
  * https://code.csdn.net/snippets/147103
  * @see: http://blog.csdn.net/win_lin/article/details/17994347
- * v 1.0.10
+ * v 1.0.11
  */
 
 /**

trunk/research/players/srs_player.html

@@ -12,7 +12,7 @@
             margin-top: -20px;
             padding-top: 3px;
         }
-        #div_play_time {
+        .div_play_time {
             margin-top: 10px;
         }
         #pb_buffer_bg {
@@ -47,7 +47,7 @@
     </div>
     <div class="form-inline">
         URL:
-        <input type="text" id="txt_url" class="input-xxlarge" value=""></input>
+        <input type="text" id="txt_url" class="input-xxlarge" value="">
         <button class="btn btn-primary" id="btn_play">播放视频</button>
         <button class="btn" id="btn_generate_link">生成链接</button>
     </div>
@@ -281,57 +281,82 @@
             </div>
         </div>
         <div class="modal-footer" id="my_modal_footer">
-            <div class="input-prepend" id="div_play_time">
-              <span class="add-on" title="播放时长">@T</span>
-              <input class="span2" style="width:85px" id="txt_time" type="text" placeholder="天 时:分:秒">
+            <div>
+                <div class="btn-group dropup">
+                    <button class="btn dropdown-toggle" data-toggle="dropdown">
+                        设置全屏比例大小<span class="caret"></span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li><a id="btn_fs_size_screen_100" href="#">屏幕大小(100%)</a></li>
+                        <li><a id="btn_fs_size_screen_75" href="#">屏幕大小(75%)</a></li>
+                        <li><a id="btn_fs_size_screen_50" href="#">屏幕大小(50%)</a></li>
+                        <li><a id="btn_fs_size_video_100" href="#">视频大小(100%)</a></li>
+                        <li><a id="btn_fs_size_video_75" href="#">视频大小(75%)</a></li>
+                        <li><a id="btn_fs_size_video_50" href="#">视频大小(50%)</a></li>
+                    </ul>
+                </div>
+                <div class="btn-group dropup">
+                    <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>
+                        <li><a id="btn_dar_16_9" href="#">宽屏电视(16:9)</a></li>
+                        <li><a id="btn_dar_4_3" href="#">窄屏(4:3)</a></li>
+                        <li><a id="btn_dar_fill" href="#">填充(容器比例)</a></li>
+                    </ul>
+                </div>
+                <div class="btn-group dropup">
+                    <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>
+                    </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>
+                    <button id="btn_resume" class="btn hide">继续播放</button>
+                </div>
+                <div class="btn-group dropup">
+                    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">关闭播放器</button>
+                </div>
             </div>
-            <div class="btn-group dropup">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">
-                    <a id="fs_tips" href="#" data-toggle="tooltip" data-placement="top" title="">
-                        <img src="img/tooltip.png"/>
-                    </a>
-                    全屏大小<span class="caret"></span>
-                </button>
-                <ul class="dropdown-menu">
-                    <li><a id="btn_fs_size_screen_100" href="#">屏幕大小(100%)</a></li>
-                    <li><a id="btn_fs_size_screen_75" href="#">屏幕大小(75%)</a></li>
-                    <li><a id="btn_fs_size_screen_50" href="#">屏幕大小(50%)</a></li>
-                    <li><a id="btn_fs_size_video_100" href="#">视频大小(100%)</a></li>
-                    <li><a id="btn_fs_size_video_75" href="#">视频大小(75%)</a></li>
-                    <li><a id="btn_fs_size_video_50" href="#">视频大小(50%)</a></li>
-                </ul>
+            <div class="hide" id="fullscreen_tips">
+                请<font color="red">点击视频</font>进入全屏模式~<br/>
+                由于安全原因，Flash全屏无法使用JS触发
             </div>
-            <div class="btn-group dropup">
-                <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>
-                    <li><a id="btn_dar_16_9" href="#">宽屏电视(16:9)</a></li>
-                    <li><a id="btn_dar_4_3" href="#">窄屏(4:3)</a></li>
-                    <li><a id="btn_dar_fill" href="#">填充(容器比例)</a></li>
-                </ul>
-            </div>
-            <div class="btn-group dropup">
-                <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>
-                </ul>
-            </div>
-            <div class="btn-group dropup">
-                <button id="btn_pause" class="btn">暂停</button>
-            </div>
-            <div class="btn-group dropup">
-                <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">关闭</button>
+            <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">
+                </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">
+                </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">
+                </div>
+                <div class="input-prepend div_play_time" title="播放时长，格式：天 时:分:秒">
+                    <span class="add-on">@T</span>
+                    <input class="span2" style="width:85px" id="txt_time" type="text" placeholder="天 时:分:秒">
+                </div>
             </div>
         </div>
     </div>
@@ -398,10 +423,6 @@
         // url set to: rtmp://demo:1935/live/livestream
         srs_init_rtmp("#txt_url", "#main_modal");
 
-        $("#fs_tips").tooltip({
-            title: "点击视频进入或退出全屏"
-        });
-
         $("#main_modal").on("show", function(){
             if (srs_player) {
                 return;
@@ -427,7 +448,7 @@
                 select_dar("#btn_dar_original", 0, 0);
                 select_fs_size("#btn_fs_size_screen_100", "screen", 100);
             };
-            srs_player.on_player_timer = function(time, buffer_length) {
+            srs_player.on_player_timer = function(time, buffer_length, kbps, fps, rtime) {
                 var buffer = buffer_length / this.buffer_time * 100;
                 $("#pb_buffer").width(Number(buffer).toFixed(1) + "%");
 
@@ -435,6 +456,11 @@
                         "缓冲区长度:" + Number(buffer_length).toFixed(1) + "秒("
                         + Number(buffer).toFixed(1) + "%)");
 
+                $("#txt_bitrate").val(kbps.toFixed(1) + "kbps");
+                $("#txt_fps").val(fps.toFixed(1) + "fps");
+                $("#txt_empty_count").val(srs_player.empty_count() + "次卡顿");
+                $("#txt_fluency").val(srs_player.fluency().toFixed(2) + "%");
+
                 var time_str = "";
                 // day
                 time_str = padding(parseInt(time / 24 / 3600), 2, '0') + " ";
@@ -454,10 +480,6 @@
         });
 
         $("#main_modal").on("hide", function(){
-            if ($("#main_modal").is(":visible")) {
-                return;
-            }
-
             if (srs_player) {
                 srs_player.stop();
                 srs_player = null;
@@ -477,22 +499,27 @@
             $("#link_stream").text(rtmp.stream);
             $("#link_rtmp").text($("#txt_url").val());
             $("#link_url").attr("href", url);
-            $("#link_modal").modal({show:true, keyboard:false});
+            $("#link_modal").modal({show:true, keyboard:true});
         });
 
         $("#btn_play").click(function(){
             url = $("#txt_url").val();
-            $("#main_modal").modal({show:true, keyboard:false});
+            $("#main_modal").modal({show:true, keyboard:true});
         });
 
-        $("#btn_pause").click(function(){
-            if ($("#btn_pause").text() == "暂停") {
-                $("#btn_pause").text("继续");
-                srs_player.pause();
-            } else {
-                $("#btn_pause").text("暂停");
-                srs_player.resume();
-            }
+        $("#btn_fullscreen").click(function(){
+            $("#fullscreen_tips").toggle();
+        });
+
+        $("#btn_pause").click(function() {
+            $("#btn_resume").toggle();
+            $("#btn_pause").toggle();
+            srs_player.pause();
+        });
+        $("#btn_resume").click(function(){
+            $("#btn_resume").toggle();
+            $("#btn_pause").toggle();
+            srs_player.resume();
         });
 
         if (true) {

trunk/research/players/srs_player/src/srs_player.as

@@ -18,6 +18,7 @@ package
     import flash.ui.ContextMenu;
     import flash.ui.ContextMenuItem;
     import flash.utils.Timer;
+    import flash.utils.getTimer;
     import flash.utils.setTimeout;
     
     import flashx.textLayout.formats.Float;
@@ -30,7 +31,9 @@ package
         private var js_on_player_ready:String = null;
         private var js_on_player_metadata:String = null;
         private var js_on_player_timer:String = null;
-        
+        private var js_on_player_empty:String = null;
+		private var js_on_player_full:String = null;
+		
         // play param url.
         private var user_url:String = null;
         // play param, user set width and height
@@ -93,6 +96,8 @@ package
             this.js_on_player_ready = flashvars.on_player_ready;
             this.js_on_player_metadata = flashvars.on_player_metadata;
             this.js_on_player_timer = flashvars.on_player_timer;
+			this.js_on_player_empty = flashvars.on_player_empty;
+			this.js_on_player_full = flashvars.on_player_full;
             
             this.media_timer.addEventListener(TimerEvent.TIMER, this.system_on_timer);
             this.media_timer.start();
@@ -106,7 +111,7 @@ package
          */
         private function system_on_js_ready():void {
             if (!flash.external.ExternalInterface.available) {
-                trace("js not ready, try later.");
+                log("js not ready, try later.");
                 flash.utils.setTimeout(this.system_on_js_ready, 100);
                 return;
             }
@@ -114,7 +119,7 @@ package
             flash.external.ExternalInterface.addCallback("__play", this.js_call_play);
             flash.external.ExternalInterface.addCallback("__stop", this.js_call_stop);
             flash.external.ExternalInterface.addCallback("__pause", this.js_call_pause);
-            flash.external.ExternalInterface.addCallback("__resume", this.js_call_resume);
+			flash.external.ExternalInterface.addCallback("__resume", this.js_call_resume);
             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);
@@ -126,15 +131,39 @@ package
         * system callack event, timer to do some regular tasks.
         */
         private function system_on_timer(evt:TimerEvent):void {
-            if (!this.media_stream) {
-                trace("stream is null, ignore timer event.");
+			var ms:NetStream = this.media_stream;
+			
+            if (!ms) {
+                log("stream is null, ignore timer event.");
                 return;
             }
-            
-            trace("notify js the timer event.");
+			
+			var rtime:Number = flash.utils.getTimer();
+			var bitrate:Number = Number((ms.info.videoBytesPerSecond + ms.info.audioBytesPerSecond) * 8 / 1000);
+            log("on timer, time=" + ms.time.toFixed(2) + "s, buffer=" + ms.bufferLength.toFixed(2) + "s" 
+				+ ", bitrate=" + bitrate.toFixed(1) + "kbps"
+				+ ", fps=" + ms.currentFPS.toFixed(1)
+				+ ", rtime=" + rtime.toFixed(0)
+			);
             flash.external.ExternalInterface.call(
-                this.js_on_player_timer, this.js_id, this.media_stream.time, this.media_stream.bufferLength);
+                this.js_on_player_timer, this.js_id, ms.time, ms.bufferLength,
+				bitrate, ms.currentFPS, rtime
+			);
         }
+		
+		/**
+		 * system callback event, when stream is empty.
+		 */
+		private function system_on_buffer_empty():void {
+			var time:Number = flash.utils.getTimer();
+			log("stream is empty at " + time + "ms");
+			flash.external.ExternalInterface.call(this.js_on_player_empty, this.js_id, time);
+		}
+		private function system_on_buffer_full():void {
+			var time:Number = flash.utils.getTimer();
+			log("stream is full at " + time + "ms");
+			flash.external.ExternalInterface.call(this.js_on_player_full, this.js_id, time);
+		}
         
         /**
          * system callack event, when got metadata from stream.
@@ -181,7 +210,7 @@ package
          */
         private function user_on_click_video(evt:MouseEvent):void {
             if (!this.stage.allowsFullScreen) {
-                trace("donot allow fullscreen.");
+                log("donot allow fullscreen.");
                 return;
             }
             
@@ -266,6 +295,7 @@ package
                 this.media_conn.close();
                 this.media_conn = null;
             }
+			log("player stopped");
         }
         
         // srs infos
@@ -311,7 +341,7 @@ package
             this.user_url = url;
             this.user_w = _width;
             this.user_h = _height;
-            trace("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);
             
             js_call_stop();
             
@@ -358,7 +388,11 @@ package
                     
                     if (evt.info.code == "NetStream.Video.DimensionChange") {
                         system_on_metadata(media_metadata);
-                    }
+                    } else if (evt.info.code == "NetStream.Buffer.Empty") {
+						system_on_buffer_empty();
+					} else if (evt.info.code == "NetStream.Buffer.Full") {
+						system_on_buffer_full();
+					}
                     
                     // TODO: FIXME: failed event.
                 });
@@ -460,7 +494,11 @@ package
             }
             
             // rescale to fs
-            __update_video_size(num, den, obj.width * user_fs_percent / 100, obj.height * user_fs_percent / 100, this.stage.fullScreenWidth, this.stage.fullScreenHeight);
+            __update_video_size(num, den, 
+				obj.width * user_fs_percent / 100, 
+				obj.height * user_fs_percent / 100, 
+				this.stage.fullScreenWidth, this.stage.fullScreenHeight
+			);
         }
         
         /**
@@ -539,5 +577,18 @@ package
             this.control_fs_mask.graphics.drawRect(0, 0, _width, _height);
             this.control_fs_mask.graphics.endFill();
         }
+		
+		private function log(msg:String):void {
+			msg = "[" + new Date() +"][srs-player][" + js_id + "] " + msg;
+			
+			trace(msg);
+			
+			if (!flash.external.ExternalInterface.available) {
+				flash.utils.setTimeout(log, 300, msg);
+				return;
+			}
+			
+			ExternalInterface.call("console.log", msg);
+		}
     }
 }