胡斌 / srs

转到一个项目
Toggle navigation Toggle navigation pinning
winlin
dfecfb65 1 parent fcd2d3d4

support fluency and stream empty count

内嵌 并排对比
正在显示 5 个修改的文件 包含 224 行增加 和 87 行删除
... ... @@ -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";
... ... @@ -113,6 +141,18 @@ 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.
* use metadata width if 0.
... ... @@ -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);
}
... ...
... ... @@ -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
*/
/**
... ...
... ... @@ -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">
<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>
<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 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 id="btn_pause" class="btn">暂停</button>
<div class="hide" id="fullscreen_tips">
请<font color="red">点击视频</font>进入全屏模式~<br/>
由于安全原因，Flash全屏无法使用JS触发
</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) {
... ...
... ... @@ -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);
}
}
}
\ No newline at end of file
... ...