384 lines
10 KiB
PHP
384 lines
10 KiB
PHP
<?php
|
||
include( "head.php" );
|
||
?>
|
||
<div id="alert"></div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="panel panel-default">
|
||
<div class="title">
|
||
<h3 class="panel-title">
|
||
<cn>视频预览</cn>
|
||
<en>Preview</en>
|
||
<small><cn>推流后可见</cn><en>visible when pushing</en></small>
|
||
</h3>
|
||
</div>
|
||
<div class="panel-body">
|
||
<video id="player" controls muted style="width:100%;height: 294px; background: #555;"></video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="panel panel-default">
|
||
<div class="title">
|
||
<h3 class="panel-title">
|
||
<cn>基本设置</cn>
|
||
<en>Basic config</en>
|
||
</h3>
|
||
</div>
|
||
<div class="panel-body">
|
||
<form class="form-horizontal" id="push" role="form">
|
||
<div class="form-group">
|
||
<label class="col-md-3 col-sm-4 control-label"><cn>视频源</cn><en>Video source</en></label>
|
||
<div class="col-md-6 col-sm-8">
|
||
<select id="srcV" zcfg="srcV" class="form-control"></select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-md-3 col-sm-4 control-label"><cn>音频源</cn><en>Audio source</en></label>
|
||
<div class="col-md-6 col-sm-8">
|
||
<select id="srcA" zcfg="srcA" class="form-control">
|
||
<option value="-1" cn="无" en="None"></option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-md-3 col-sm-4 control-label"><cn>自动运行</cn><en>Autorun</en></label>
|
||
<div class="col-md-6 col-sm-8">
|
||
<input zcfg="autorun" type="checkbox" class="switch form-control">
|
||
</div>
|
||
</div>
|
||
<hr style="margin-top:10px; margin-bottom: 10px;"/>
|
||
<div class="form-group">
|
||
<div class="text-center">
|
||
<button type="button" id="save" class="btn btn-warning col-xs-4 col-xs-offset-4 col-md-2 col-md-offset-5">
|
||
<cn>保存</cn>
|
||
<en>Save</en>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div id="recBar">
|
||
<div class="row">
|
||
<div class="col-sm-4 text-right" style="line-height: 34px;">
|
||
<strong id="time">[--:--]</strong>
|
||
</div>
|
||
<div class="col-sm-4 text-center">
|
||
<button type="button" id="start" class="btn btn-warning">
|
||
<i class="fa fa-video-camera"></i>
|
||
<cn>推流</cn>
|
||
<en>Push</en>
|
||
</button>
|
||
|
||
<button type="button" id="stop" class="btn btn-default disabled ">
|
||
<i class="fa fa-stop"></i>
|
||
<cn>停止</cn>
|
||
<en>Stop</en>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading">
|
||
<h3 class="panel-title">
|
||
<cn>推流设置</cn>
|
||
<en>Push config</en>
|
||
</h3>
|
||
</div>
|
||
<div class="panel-body">
|
||
<form class="form-horizontal" id="url" role="form">
|
||
<div class="row text-center" style="margin-top: 5px;">
|
||
<div class="col-md-2 col-xs-4">
|
||
<cn>描述</cn>
|
||
<en>Description</en>
|
||
</div>
|
||
<div class="col-md-7 col-xs-4">
|
||
URL
|
||
</div>
|
||
<div class="col-md-1 col-xs-2">
|
||
<cn>启用</cn>
|
||
<en>Enable</en>
|
||
</div>
|
||
<div class="col-md-1 col-xs-2">
|
||
<cn>操作</cn>
|
||
<en>Option</en>
|
||
</div>
|
||
<div class="col-md-1 col-xs-2">
|
||
<cn>速度</cn>
|
||
<en>Speed</en>
|
||
</div>
|
||
</div>
|
||
<hr style="margin-top:5px; margin-bottom: 10px;"/>
|
||
<div id="templetURL">
|
||
<div class="row" style="margin-top: 5px;">
|
||
<div class="col-md-2 col-xs-4">
|
||
<input zcfg="[#].des" type="text" class="form-control">
|
||
</div>
|
||
<div class="col-md-7 col-xs-4">
|
||
<input zcfg="[#].path" type="text" class="form-control">
|
||
</div>
|
||
<div class="col-md-1 col-xs-2 text-center">
|
||
<input type="checkbox" zcfg="[#].enable" class="switch form-control">
|
||
</div>
|
||
<div class="col-md-1 col-xs-2 text-center">
|
||
<button type="button" class="del btn btn-default">
|
||
<cn>删除</cn>
|
||
<en>Delete</en>
|
||
</button>
|
||
</div>
|
||
<div class="col-md-1 col-xs-2 text-center">
|
||
<p class="form-control-static speed"></p>
|
||
</div>
|
||
</div>
|
||
<hr style="margin-top:10px; margin-bottom: 10px;"/>
|
||
</div>
|
||
<div class="row" style="margin-top: 5px;" id="newUrl">
|
||
<div class="col-md-2 col-xs-4">
|
||
<input zcfg="des" type="text" class="form-control">
|
||
</div>
|
||
<div class="col-md-7 col-xs-4">
|
||
<input zcfg="path" type="text" class="form-control">
|
||
</div>
|
||
<div class="col-md-1 col-xs-2 text-center">
|
||
<input zcfg="enable" id="addEnable" type="checkbox" class="switch form-control">
|
||
</div>
|
||
<div class="col-md-1 col-xs-2 text-center">
|
||
<button id="add" type="button" class="btn btn-warning">
|
||
<cn>添加</cn>
|
||
<en>Add</en>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<hr style="margin-top:10px; margin-bottom: 10px;"/>
|
||
<div class="form-group">
|
||
<div class="text-center">
|
||
<button type="button" id="save2" class="btn btn-warning col-xs-4 col-xs-offset-4 col-md-2 col-md-offset-5">
|
||
<cn>保存</cn>
|
||
<en>Save</en>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script language="javascript" src="js/flv.js" ></script>
|
||
<script src="js/zcfg.js"></script>
|
||
<script src="vendor/switch/bootstrap-switch.js"></script>
|
||
<script>
|
||
$( function () {
|
||
navIndex( 4 );
|
||
|
||
|
||
$.fn.bootstrapSwitch.defaults.size = 'small';
|
||
$.fn.bootstrapSwitch.defaults.onColor = 'warning';
|
||
$( "#addEnable" ).bootstrapSwitch();
|
||
|
||
var player=null;
|
||
var playerLoad=false;
|
||
|
||
|
||
if (flvjs.isSupported()) {
|
||
player = flvjs.createPlayer({
|
||
type: 'flv',
|
||
hasAudio: true,
|
||
url: 'http://'+window.location.host+'/flv?app=live&stream=preview'
|
||
});
|
||
player.attachMediaElement(document.getElementById("player"));
|
||
|
||
}
|
||
|
||
function startPreview()
|
||
{
|
||
if(player==null)
|
||
return;
|
||
if(!playerLoad)
|
||
{
|
||
playerLoad=true;
|
||
player.load();
|
||
}
|
||
player.play();
|
||
}
|
||
|
||
function stopPreview()
|
||
{
|
||
if(player==null)
|
||
return;
|
||
player.pause();
|
||
|
||
if(playerLoad)
|
||
{
|
||
playerLoad=false;
|
||
player.unload();
|
||
}
|
||
}
|
||
|
||
var config;
|
||
|
||
|
||
$.getJSON( "config/config.json", function ( res ) {
|
||
var cfg = res;
|
||
for ( var i = 0; i < cfg.length; i++ ) {
|
||
if(cfg[i].enable){
|
||
$( "#srcV" ).append( '<option value="' + cfg[ i ].id + '">' + cfg[ i ].name + '</option>' );
|
||
$( "#srcA" ).append( '<option value="' + cfg[ i ].id + '">' + cfg[ i ].name + '</option>' );
|
||
}
|
||
}
|
||
|
||
$.getJSON( "config/push.json", function ( result ) {
|
||
config = result;
|
||
zcfg( "#push", config );
|
||
zctemplet( "#templetURL", config.url );
|
||
setDel();
|
||
} );
|
||
} );
|
||
|
||
function setDel()
|
||
{
|
||
$(".del").each(function(index,obj){
|
||
$(obj).click(function(){
|
||
$(".del").each(function(index2,obj2){
|
||
if(obj==obj2){
|
||
config.url.splice(index2,1);
|
||
zctemplet( "#templetURL", config.url );
|
||
setDel();
|
||
save();
|
||
return;
|
||
}
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
var newUrl={};
|
||
newUrl.enable=false;
|
||
newUrl.url="";
|
||
newUrl.des="";
|
||
zcfg( "#newUrl", newUrl );
|
||
|
||
$( "#add" ).click( function ( e ) {
|
||
var url={};
|
||
$.extend(true,url, newUrl);
|
||
config.url.push(url);
|
||
zctemplet( "#templetURL", config.url );
|
||
setDel();
|
||
save();
|
||
} );
|
||
|
||
|
||
|
||
|
||
var duration = 0;
|
||
var updateTime = 0;
|
||
var isPushing = false;
|
||
|
||
function getState() {
|
||
rpc( "push.getState", null, function ( data ) {
|
||
duration = data.duration / 1000;
|
||
var now = new Date();
|
||
updateTime = now.getTime() / 1000;
|
||
if(isPushing != data.pushing)
|
||
{
|
||
if(data.pushing)
|
||
setTimeout(startPreview,3000);
|
||
else
|
||
stopPreview();
|
||
}
|
||
isPushing = data.pushing;
|
||
if ( isPushing ) {
|
||
$( "#start" ).removeClass( "btn-warning" );
|
||
$( "#start" ).addClass( "btn-default" );
|
||
$( "#start" ).addClass( "disabled" );
|
||
$( "#stop" ).removeClass( "disabled" );
|
||
$( "#stop" ).removeClass( "btn-default" );
|
||
$( "#stop" ).addClass( "btn-warning" );
|
||
} else {
|
||
$( "#stop" ).removeClass( "btn-warning" );
|
||
$( "#stop" ).addClass( "btn-default" );
|
||
$( "#stop" ).addClass( "disabled" );
|
||
$( "#start" ).removeClass( "disabled" );
|
||
$( "#start" ).removeClass( "btn-default" );
|
||
$( "#start" ).addClass( "btn-warning" );
|
||
}
|
||
|
||
for(var i=0;i<data.speed.length;i++)
|
||
{
|
||
$(".speed").eq(i).text(data.speed[i]+"kb/s");
|
||
}
|
||
} );
|
||
}
|
||
|
||
function onTimer() {
|
||
if ( isPushing ) {
|
||
function fix( num ) {
|
||
if ( num < 10 )
|
||
return '0' + num;
|
||
else
|
||
return num;
|
||
}
|
||
var now = new Date();
|
||
var diff = now.getTime() / 1000 - updateTime + duration;
|
||
var m = Math.floor( diff / 60 );
|
||
var s = Math.floor( diff % 60 );
|
||
$( '#time' ).text( "[" + fix( m ) + ":" + fix( s ) + "]" );
|
||
} else {
|
||
$( '#time' ).text( "[--:--]" );
|
||
}
|
||
|
||
}
|
||
|
||
function init() {
|
||
|
||
getState();
|
||
setInterval( onTimer, 1000 );
|
||
setInterval( getState, 3000 );
|
||
}
|
||
init();
|
||
|
||
$( "#start" ).click( function ( e ) {
|
||
rpc( "push.start", null, function ( data ) {
|
||
getState();
|
||
} );
|
||
} );
|
||
|
||
$( "#stop" ).click( function ( e ) {
|
||
rpc( "push.stop", null, function ( data ) {
|
||
getState();
|
||
} );
|
||
} );
|
||
|
||
function save()
|
||
{
|
||
rpc( "push.update", [ JSON.stringify( config, null, 2 ) ], function ( res ) {
|
||
if ( typeof ( res.error ) != "undefined" ) {
|
||
htmlAlert( "#alert", "danger", "<cn>保存设置失败</cn><en>Save config failed</en>！", "", 2000 );
|
||
} else {
|
||
htmlAlert( "#alert", "success", "<cn>保存设置成功</cn><en>Save config success</en>！", "", 2000 );
|
||
}
|
||
} );
|
||
}
|
||
|
||
|
||
|
||
$( "#save" ).click( save );
|
||
$( "#save2" ).click( save );
|
||
|
||
|
||
} );
|
||
</script>
|
||
<?php
|
||
include( "foot.php" );
|
||
?>
|