mirror of
https://github.com/ossrs/srs.git
synced 2025-02-13 11:51:57 +00:00
402 lines
18 KiB
HTML
Executable file
402 lines
18 KiB
HTML
Executable file
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>SRS</title>
|
||
<meta charset="utf-8">
|
||
<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/swfobject.js"></script>
|
||
<script type="text/javascript" src="js/srs.js"></script>
|
||
<style>
|
||
body{
|
||
padding-top: 55px;
|
||
}
|
||
</style>
|
||
<script type="text/javascript">
|
||
var srs_publisher = null;
|
||
var remote_player = null;
|
||
|
||
$(function(){
|
||
// get the vhost and port to set the default url.
|
||
// for example: http://192.168.1.213/players/jwplayer6.html?port=1935&vhost=demo
|
||
// url set to: rtmp://demo:1935/live/livestream
|
||
srs_init("#txt_url", null, null);
|
||
|
||
$("#btn_video_settings").click(function(){
|
||
$("#video_modal").modal({show:true});
|
||
});
|
||
$("#btn_audio_settings").click(function(){
|
||
$("#audio_modal").modal({show:true});
|
||
});
|
||
|
||
$("#btn_publish").click(on_user_publish);
|
||
|
||
// for publish, we use randome stream name.
|
||
$("#txt_url").val($("#txt_url").val() + "." + new Date().getTime());
|
||
update_play_url();
|
||
|
||
// start the publisher.
|
||
srs_publisher = new SrsPublisher("local_publisher", 430, 185);
|
||
srs_publisher.on_publisher_ready = function(cameras, microphones) {
|
||
$("#sl_cameras").empty();
|
||
for (var i = 0; i < cameras.length; i++) {
|
||
$("#sl_cameras").append("<option value='" + i + "'>" + cameras[i] + "</option");
|
||
}
|
||
// optional: select the first no "virtual" signed.
|
||
for (var i = 0; i < cameras.length; i++) {
|
||
if (cameras[i].toLowerCase().indexOf("virtual") == -1) {
|
||
$("#sl_cameras option[value='" + i + "']").attr("selected", true);
|
||
break;
|
||
}
|
||
}
|
||
|
||
$("#sl_microphones").empty();
|
||
for (var i = 0; i < microphones.length; i++) {
|
||
$("#sl_microphones").append("<option value='" + i + "'>" + microphones[i] + "</option");
|
||
}
|
||
|
||
$("#sl_vcodec").empty();
|
||
var vcodecs = ["h264", "vp6"];
|
||
for (var i = 0; i < vcodecs.length; i++) {
|
||
$("#sl_vcodec").append("<option value='" + vcodecs[i] + "'>" + vcodecs[i] + "</option");
|
||
}
|
||
|
||
$("#sl_profile").empty();
|
||
var profiles = ["baseline", "main"];
|
||
for (var i = 0; i < profiles.length; i++) {
|
||
$("#sl_profile").append("<option value='" + profiles[i] + "'>" + profiles[i] + "</option");
|
||
}
|
||
|
||
$("#sl_level").empty();
|
||
var levels = ["1", "1b", "1.1", "1.2", "1.3",
|
||
"2", "2.1", "2.2", "3", "3.1", "3.2", "4", "4.1", "4.2", "5", "5.1"];
|
||
for (var i = 0; i < levels.length; i++) {
|
||
$("#sl_level").append("<option value='" + levels[i] + "'>" + levels[i] + "</option");
|
||
}
|
||
$("#sl_level option[value='4.1']").attr("selected", true);
|
||
|
||
$("#sl_gop").empty();
|
||
var gops = ["0.3", "0.5", "1", "2", "3", "4",
|
||
"5", "6", "7", "8", "9", "10", "15", "20"];
|
||
for (var i = 0; i < gops.length; i++) {
|
||
$("#sl_gop").append("<option value='" + gops[i] + "'>" + gops[i] + "秒</option");
|
||
}
|
||
$("#sl_gop option[value='5']").attr("selected", true);
|
||
|
||
$("#sl_size").empty();
|
||
var sizes = ["176x144", "320x240", "352x240",
|
||
"352x288", "460x240", "640x480", "720x480", "720x576", "800x600",
|
||
"1024x768", "1280x720", "1360x768", "1920x1080"];
|
||
for (i = 0; i < sizes.length; i++) {
|
||
$("#sl_size").append("<option value='" + sizes[i] + "'>" + sizes[i] + "</option");
|
||
}
|
||
$("#sl_size option[value='460x240']").attr("selected", true);
|
||
|
||
$("#sl_fps").empty();
|
||
var fpses = ["5", "10", "15", "20", "24", "25", "29.97", "30"];
|
||
for (i = 0; i < fpses.length; i++) {
|
||
$("#sl_fps").append("<option value='" + fpses[i] + "'>" + Number(fpses[i]).toFixed(2) + " 帧/秒</option");
|
||
}
|
||
$("#sl_fps option[value='15']").attr("selected", true);
|
||
|
||
$("#sl_bitrate").empty();
|
||
var bitrates = ["50", "200", "350", "500", "650", "800",
|
||
"950", "1000", "1200", "1500", "1800", "2000", "3000", "5000"];
|
||
for (i = 0; i < bitrates.length; i++) {
|
||
$("#sl_bitrate").append("<option value='" + bitrates[i] + "'>" + bitrates[i] + " kbps</option");
|
||
}
|
||
$("#sl_bitrate option[value='350']").attr("selected", true);
|
||
};
|
||
srs_publisher.on_publisher_error = function(code) {
|
||
if (code == srs_publisher.error_device_muted) {
|
||
error(code, "摄像头和麦克风被禁用，请右键flash播放器启用。");
|
||
} else {
|
||
error(code, "未知系统错误");
|
||
}
|
||
};
|
||
srs_publisher.start();
|
||
|
||
// start the player.
|
||
remote_player = new SrsPlayer("remote_player", 430, 185);
|
||
remote_player.on_player_ready = function() {
|
||
};
|
||
remote_player.start();
|
||
});
|
||
|
||
function update_play_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 = $("#txt_url").val().replace("rtmp://", "http://");
|
||
|
||
var url = "http://" + window.location.host;
|
||
url += window.location.pathname.substr(0, window.location.pathname.lastIndexOf("/"));
|
||
url += "/srs_player.html?";
|
||
|
||
url += "vhost=" + a.hostname;
|
||
url += "&port=" + a.port;
|
||
url += "&app=" + a.pathname.substr(1, a.pathname.lastIndexOf("/") - 1);
|
||
url += "&stream=" + a.pathname.substr(a.pathname.lastIndexOf("/") + 1);
|
||
|
||
// autostart
|
||
url += "&autostart=true";
|
||
|
||
$("#txt_play_url").text(url);
|
||
$("#txt_play_url").attr("href", url);
|
||
}
|
||
function on_user_publish() {
|
||
if ($("#btn_publish").text() == "停止发布") {
|
||
srs_publisher.stop();
|
||
$("#btn_publish").text("发布视频");
|
||
return;
|
||
}
|
||
|
||
$("#btn_publish").text("停止发布");
|
||
|
||
update_play_url();
|
||
|
||
var url = $("#txt_url").val();
|
||
var vcodec = {};
|
||
var acodec = {};
|
||
|
||
acodec.device_code = $("#sl_microphones").val();
|
||
acodec.device_name = $("#sl_microphones").text();
|
||
|
||
vcodec.device_code = $("#sl_cameras").find("option:selected").val();
|
||
vcodec.device_name = $("#sl_cameras").find("option:selected").text();
|
||
|
||
vcodec.codec = $("#sl_vcodec").find("option:selected").val();
|
||
vcodec.profile = $("#sl_profile").find("option:selected").val();
|
||
vcodec.level = $("#sl_level").find("option:selected").val();
|
||
vcodec.fps = $("#sl_fps").find("option:selected").val();
|
||
vcodec.gop = $("#sl_gop").find("option:selected").val();
|
||
vcodec.size = $("#sl_size").find("option:selected").val();
|
||
vcodec.bitrate = $("#sl_bitrate").find("option:selected").val();
|
||
|
||
info("开始推流到服务器");
|
||
srs_publisher.publish(url, vcodec, acodec);
|
||
|
||
// replay the url.
|
||
remote_player.stop();
|
||
remote_player.play(url);
|
||
}
|
||
|
||
function info(desc) {
|
||
$("#txt_log").removeClass("alert-error").addClass("alert-info");
|
||
$("#txt_log_title").text("Info:");
|
||
$("#txt_log_msg").text(desc);
|
||
}
|
||
function error(code, desc) {
|
||
$("#txt_log").removeClass("alert-info").addClass("alert-error");
|
||
$("#txt_log_title").text("Error:");
|
||
$("#txt_log_msg").text("code: " + code + ", " + desc);
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="navbar navbar-fixed-top">
|
||
<div class="navbar-inner">
|
||
<div class="container">
|
||
<a class="brand" href="#">SRS</a>
|
||
<div class="nav-collapse collapse">
|
||
<ul class="nav">
|
||
<li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
|
||
<li class="active"><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>
|
||
<li><a id="nav_srs_bwt" href="srs_bwt.html">SRS测网速</a></li>
|
||
<li><a id="nav_jwplayer6" href="jwplayer6.html">JWPlayer6播放器</a></li>
|
||
<li><a id="nav_osmf" href="osmf.html">AdobeOSMF播放器</a></li>
|
||
<li><a id="nav_vlc" href="vlc.html">VLC播放器</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container">
|
||
<div class="alert alert-info fade in" id="txt_log">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong><span id="txt_log_title">Usage:</span></strong>
|
||
<span id="txt_log_msg">允许Flash访问摄像头，设置编码参数，点“发布视频”即可推流</span>
|
||
</div>
|
||
<div class="control-group">
|
||
<div class="form-inline">
|
||
<button class="btn" id="btn_video_settings">视频编码配置</button>
|
||
<button class="btn" id="btn_audio_settings">音频编码配置</button>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<div class="form-inline">
|
||
发布地址:
|
||
<input type="text" id="txt_url" class="input-xxlarge" value=""></input>
|
||
<button class="btn btn-primary" id="btn_publish">发布视频</button>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<div class="form-inline">
|
||
观看地址:
|
||
<a id="txt_play_url" class="input-xxlarge" href="srs_player.html">srs_player.html</a>
|
||
</div>
|
||
</div>
|
||
<div id="video_modal" class="modal hide fade">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h3>视频编码</h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-horizontal">
|
||
<div class="control-group">
|
||
<label class="control-label" for="sl_cameras">
|
||
摄像头
|
||
<a id="sl_cameras_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
|
||
<img src="img/tooltip.png"/>
|
||
</a>
|
||
</label>
|
||
<div class="controls">
|
||
<select class="span4" id="sl_cameras"></select>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label class="control-label" for="sl_vcodec">
|
||
Codec
|
||
<a id="sl_cameras_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
|
||
<img src="img/tooltip.png"/>
|
||
</a>
|
||
</label>
|
||
<div class="controls">
|
||
<select class="span2" id="sl_vcodec"></select>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label class="control-label" for="sl_profile">
|
||
Profile
|
||
<a id="sl_profile_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
|
||
<img src="img/tooltip.png"/>
|
||
</a>
|
||
</label>
|
||
<div class="controls">
|
||
<select class="span2" id="sl_profile"></select>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label class="control-label" for="sl_level">
|
||
Level
|
||
<a id="sl_level_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
|
||
<img src="img/tooltip.png"/>
|
||
</a>
|
||
</label>
|
||
<div class="controls">
|
||
<select class="span2" id="sl_level"></select>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label class="control-label" for="sl_gop">
|
||
GOP
|
||
<a id="sl_gop_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
|
||
<img src="img/tooltip.png"/>
|
||
</a>
|
||
</label>
|
||
<div class="controls">
|
||
<select class="span2" id="sl_gop"></select>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label class="control-label" for="sl_size">
|
||
尺寸
|
||
<a id="sl_size_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
|
||
<img src="img/tooltip.png"/>
|
||
</a>
|
||
</label>
|
||
<div class="controls">
|
||
<select class="span2" id="sl_size"></select>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label class="control-label" for="sl_fps">
|
||
帧率
|
||
<a id="sl_fps_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
|
||
<img src="img/tooltip.png"/>
|
||
</a>
|
||
</label>
|
||
<div class="controls">
|
||
<select class="span2" id="sl_fps"></select>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label class="control-label" for="sl_bitrate">
|
||
码率
|
||
<a id="sl_bitrate_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
|
||
<img src="img/tooltip.png"/>
|
||
</a>
|
||
</label>
|
||
<div class="controls">
|
||
<select class="span2" id="sl_bitrate"></select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">设置</button>
|
||
</div>
|
||
</div>
|
||
<div id="audio_modal" class="modal hide fade">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h3>音频编码</h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-horizontal">
|
||
<div class="control-group">
|
||
<label class="control-label" for="sl_microphones">
|
||
麦克风
|
||
<a id="worker_id_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
|
||
<img src="img/tooltip.png"/>
|
||
</a>
|
||
</label>
|
||
<div class="controls">
|
||
<select class="span4" id="sl_microphones"></select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">设置</button>
|
||
</div>
|
||
</div>
|
||
<div class="container">
|
||
<div class="row-fluid">
|
||
<div class="span6">
|
||
<div class="accordion-group">
|
||
<div class="accordion-heading">
|
||
<span class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
|
||
<strong>本地摄像头</strong>
|
||
</span>
|
||
</div>
|
||
<div id="collapseOne" class="accordion-body collapse in">
|
||
<div class="accordion-inner">
|
||
<div id="local_publisher"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="span6">
|
||
<div class="accordion-group">
|
||
<div class="accordion-heading">
|
||
<span class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">
|
||
<strong>远程服务器</strong>
|
||
</span>
|
||
</div>
|
||
<div id="collapseTwo" class="accordion-body collapse in">
|
||
<div class="accordion-inner">
|
||
<div id="remote_player"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<hr>
|
||
<footer>
|
||
<p><a href="https://github.com/winlinvip/simple-rtmp-server">SRS Team © 2013</a></p>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
|