<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>直播间</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- <link rel="stylesheet" type="text/css" href="../../css/list-to-detail.css" /> -->
<link rel="stylesheet" href="../../css/mui.min.css">
<script src="../../js/mui.min.js"></script>
<script src="../../js/coordtransform.js"></script>
<script src="../../js/showmaps.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<link rel="stylesheet" href="../../css/common.css" type="text/css" charset="utf-8" />
<style>
.mui-table-view:first-child {
margin-top: 15px;
}
.mui-table-view:last-child {
margin-bottom: 30px;
}
.mui-table-view {
margin-bottom: 20px;
}
/* .mui-table-view span.mui-pull-right {
color: #999;
} */
.mui-table-view-divider {
background-color: #efeff4;
font-size: 14px;
}
.mui-table-view-divider:before,
.mui-table-view-divider:after {
height: 0;
}
.head {
height: 60px;
}
#head {
line-height: 60px;
}
.head-img {
max-height: 60px;
margin-right: 20px;
}
#span {
width: 100%;
font-size: 16px;
padding: .2em .2em;
border: 1px solid #00B100;
-webkit-user-select: text;
}
button {
width: 25%;
margin: 6px 0 6px 6px;
font-size: 16px;
color: #FFF;
background-color: #00CC00;
border: 1px solid #00B100;
padding: .2em 0em;
-webkit-border-radius: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title" id="MyTitle">直播间</h1>
</header>
<div style="text-align:center; margin:auto;margin-top: 20%;width: 80%;">
<div id="pusher" style="width:300px;height:400px;background-color:#000000;margin:auto"></div>
<!-- <input id="path" type="text" value="" placeholder="请输入直播服务器地址(rtmp)" /> -->
<br />
<span class="span">当前直播状态:<span id="span"></span></span>
<br />
<br />
<button id="begin" onclick="begin()">开启房间</button>
<button id="pp" onclick="ppPusher()">开始直播</button>
<button id="off" onclick="off()" style="background-color: red;">关闭房间</button>
<br />
<br />
<audio controls>
<source src="http://124.88.221.101:1080/Uploadfiles/audiofile/2200001.mp3" type="audio/mpeg">
</audio>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
window.addEventListener('myrefresh', function(e) { //执行刷新
mui.back();
// location.reload();
});
var item;
var users = JSON.parse(localStorage.getItem('$users') || "{}");
mui.init({
beforeback: function() {
//获得父页面的webview
var list = plus.webview.currentWebview().opener();
//触发父页面的自定义事件(refresh),从而进行刷新
mui.fire(list, 'myrefresh');
//返回true,继续页面关闭逻辑
return true;
}
});
//监听自定义事件
var RoomNo;
var RoomID;
var UserID;
var RoomTypes;
var users = JSON.parse(localStorage.getItem('$users') || "{}");
document.addEventListener('pageRefresh', function(event) {
RoomID = event.detail.item.RoomID;
var RoomName = event.detail.item.RoomName;
UserID = event.detail.item.UserID;
var UserName = event.detail.item.UserName;
RoomNo = event.detail.item.RoomNo;
RoomTypes =event.detail.item.RoomTypes;
document.getElementById('span').innerHTML=RoomTypes;
if (UserName != null) {
if (UserID != users.rows.p_UserID) {
alert('请认真检查直播间名称,上次直播用户不是您!上次直播用户为:' + UserName);
}
} else {
plus.nativeUI.toast('本直播间为新建直播间!请核验后在进行直播!');
}
document.getElementById("MyTitle").innerHTML = event.detail.item.RoomName;
});
// 开启直播间
function begin() {
mui.get(app.url + app.url_Live_Rooms, {
action: 'BeginLive',
RoomID: RoomID,
UseID: users.rows.p_UserID,
}, function(response) {
if (response.msg == 'success') {
RoomTypes = "使用中"
plus.nativeUI.toast("开启成功!");
document.getElementById('span').innerHTML=RoomTypes;
} else {
plus.nativeUI.alert(response.msg);
}
}, 'json');
}
// 关闭直播间
function off() {
if(RoomTypes == '空闲中'){
plus.nativeUI.toast("未开启房间!");
}else{
mui.get(app.url + app.url_Live_Rooms, {
action: 'CloseLive',
RoomID: RoomID,
UseID: users.rows.p_UserID,
}, function(response) {
if (response.msg == 'success') {
plus.nativeUI.toast("关闭成功!");
RoomTypes = "空闲中";
document.getElementById('span').innerHTML=RoomTypes;
pusher.close();
mui.back();
} else {
plus.nativeUI.alert(response.msg);
}
}, 'json');
}
}
var myimgurls = "";
var pusher = null;
var bstart = false;
// H5 plus事件处理
function plusReady() {
// 创建直播推流控件
pusher = new plus.video.LivePusher('pusher', {
url: 'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
});
// 监听状态变化事件
pusher.addEventListener('statechange', function(e) {
console.log('statechange: ' + JSON.stringify(e));
}, false);
}
document.addEventListener('plusready', plusReady, false);
// 开始/停止推流
function ppPusher() {
if(RoomTypes == '使用中'){
if (bstart) {
pusher.stop();
bstart = false;
} else {
// var path = document.getElementById('path').value;
// console.log(app.Liveurl+'live/'+RoomNo);
var path = app.Liveurl + ' live/' + RoomNo;
if (path && path.length > 0) {
pusher.setStyles({
url: path, //推流地址
muted: false, //声音是否关闭
'enable-camera': false, //摄像头是否开启
// mode:"FHD",
// auto-focus:true
});
pusher.start(function() {
console.log("直播开启成功!");
plus.nativeUI.toast('直播开启成功');
}, function(e) {
console.log("直播开启失败!" + JSON.stringify(e));
plus.nativeUI.toast('直播开启失败' + JSON.stringify(e));
});
bstart = true
} else {
plus.nativeUI.toast('请输入直播服务器地址');
}
}
var pp = document.getElementById('pp');
pp.innerText = bstart ? '停止直播' : '开始直播';
}else{
plus.nativeUI.toast("请先开启房间再进行直播!");
}
}
// mui.back = function() {
// if (users.rows.p_UserID == UserID && RoomTypes == "使用中") {
// alert('有问题')
// return false;
// } else {
// alert('没问题')
// }
// }
</script>
</body> </html>
1 个回复
小枫叶 - 外包接单加v:wlmk1234567 注明来意
请把能浮现的 demo 发一下