<!DOCTYPE html>
<html>
<head>
<title>SRS</title>
<meta charset="utf-8">
<style>
body{
padding-top: 30px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/"/>
<script type="text/javascript" src="js/jquery-1.12."></script>
<script type="text/javascript" src="js/adapter-7.4."></script>
<script type="text/javascript" src="js/"></script>
<script type="text/javascript" src="js/"></script>
<script type="text/javascript" src="js/"></script>
<script src="js/"></script>
<script src="/vue/2.2.2/"></script>
</head>
<body>
<div class="container">
<div class="form-inline">
URL:
<input type="text" class="input-xxlarge" value="">
<button class="btn btn-primary" >开始推流</button>
</div>
<label></label>
<video width="320" autoplay muted></video>
<label></label>
SessionID: <span id='sessionid'></span>
<div style="display:none">
<label></label>
Audio: <span id='acodecs'></span><br/>
Video: <span id='vcodecs'></span>
</div>
<div style="margin: 10px;" >
<div v-for="(item,i) in lists">
<img :src="item.scene_img" style="width:220px;height:220px; " />
<p style="font-size:14px">[视频创建时间：{{item.created_at}}]-[AI完成时间{{item.last_at}}]
<br> {{item.scene_msg}}</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var sdk = null; // Global handler to do cleanup when republishing.
$('#rtc_media_player').show();
// Close PC when user replay.
if (sdk) {
();
}
sdk = new SrsRtcPublisherAsync();
// User should set the stream when publish is done, @see /getting-started/media-devices
// However SRS SDK provides a consist API like /getting-started/remote-streams
$('#rtc_media_player').prop('srcObject', );
// Optional callback, SDK will add track to stream.
// = function (event) { ('Got track', event); (); };
// /en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
= function (event) {
if ( === "complete") {
$('#acodecs').html(SrsRtcFormatSenders((), "audio"));
$('#vcodecs').html(SrsRtcFormatSenders((), "video"));
}
};
// For example: webrtc:///live/livestream
var url = $("#txt_url").val(); //rtmp地址
(url).then(function(session){
$('#sessionid').html();
$('#simulator-drop').attr('href', + '?drop=1&username=' + );
}).catch(function (reason) {
// Throw by sdk.
if (reason instanceof SrsError) {
if ( === 'HttpsRequiredError') {
alert(`WebRTC推流必须是HTTPS或者localhost：${} ${}`);
} else {
alert(`${} ${}`);
}
}
// See /en-US/docs/Web/API/MediaDevices/getUserMedia#exceptions
if (reason instanceof DOMException) {
if ( === 'NotFoundError') {
alert(`找不到麦克风和摄像头设备：getUserMedia ${} ${}`);
} else if ( === 'NotAllowedError') {
alert(`你禁止了网页访问摄像头和麦克风：getUserMedia ${} ${}`);
} else if (['AbortError', 'NotAllowedError', 'NotFoundError', 'NotReadableError', 'OverconstrainedError', 'SecurityError', 'TypeError'].includes()) {
alert(`getUserMedia ${} ${}`);
}
}
();
$('#rtc_media_player').hide();
(reason);
});
};
$('#rtc_media_player').hide();
var query = parse_query_string();
srs_init_rtc("#txt_url", query);
$("#btn_publish").click(startPublish);
// Never play util windows loaded @see /ossrs/srs/issues/2732
if ( === 'true') {
("load", function(){ startPublish(); });
}
});
</script>
</body>
<script>
// 下面的代码是回流，显示数据到页面上
//换域名如果你的域名启用https，要使用wss://
//换域名如果你的域名启用http，要使用ws://
//如果使用http://127.0.0.1 ,就使用要使用ws://
//var client = ('wss://:15674/wss');
var client = ('wss://:15674/ws');
//订阅rabbmiq队列
var on_connect = function(x) {
id = ("/queue/rtc_publisher_queue", function(d) {
("d ===>",d)
(d);
});
};
var on_error = function() {
('error');
};
('guest', 'guest', on_connect, on_error, 'dou');
</script>
<script>
var _data ={
lists :[]
};
var vm=new Vue({
el:'#app',
data:_data,
onLoad:function(){
},
mounted:function(){
},
methods:{
addValueToFront(newValue) {
(newValue); //向数组添加数组
();
},
testprint(d) {
("57 >>>")
let jsonObject = ();
if (('scene_img')) {
let scene_img = '/upimgloads/'+
jsonObject.scene_img.replace("/www/srs5/output/images/",'')
let scene_msg =jsonObject.scene_msg
({'scene_img':scene_img,'scene_msg':scene_msg,'created_at':jsonObject.created_at,'last_at':jsonObject.last_at})
}
}
}
})
</script>
</html>