mui做直播推流及时分秒计时器的实现用例
这部分修饰代码，比如美颜啥的不能用，用了会无法推流还未找到具体原因
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>录直播</title>
<link rel="stylesheet" href="css/mui.css" /><!-- 返回按钮 -->
<script src="js/mui.min.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/publicSql.js"></script>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#appContent {
width: 100%;
height: 100%;
position: relative;
}
#pusher {
position: absolute;
top: 0;
left: 0;
/* width: 100%;
height: 100%; */
z-index: 0 !important;
display: block;
}
.shadow-top {
height: 54px;
width: 100%;
position: absolute;
top: 540px;
left: 0;
opacity: 0.6;
z-index: 999 !important;
display: flex;
align-items: center;
}
.shadow-top .top-left {
width: 165px;
height: 54px;
}
.shadow-top .top-right {
width: 408px;
height: 54px;
display: flex;
align-items: center;
justify-content: space-around;
}
.xian {
height: 5px;
border-top: 1px solid #c9c9c9;
border-bottom: 1px solid #c9c9c9;
}
.mui-content {
font-size: 15px;
background-color: #fff;
padding-bottom: 4.9375rem;
}
.login {
width: 9.375rem;
height: 1.5625rem;
margin: 10px auto;
text-align: center;
font-size: 17px;
}
.mui-bar {
background: #fff;
padding-left: 0px;
padding-right: 0px;
}
.func {
display: flex;
justify-content: space-around;
}
/* tubiao */
.ing-icon {
width: 40px;
height: 40px;
}
.time {
padding: 10px;
margin: auto;
text-align: center;
}
.time p {
text-align: center;
}
</style>
<body>
<div class="mui-bar mui-bar-nav" style="border-bottom: 1px solid #fff;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: black;"></a>
<div class="login">直播间</div>
<div class="xian"></div>
</div>
<div id="appContent">
<div id="pusher" style="width:100%;height:500px;background-color:#000000;margin-top: 40px;"></div>
<br /><br /><br /><br />
<div class="shadow-top">
<div class="top-right">
<div class="time">
<img class="ing-icon" src="img/zb/guanzhong.png">
<p>50人观看</p>
</div>
<div class="time">
<img class="ing-icon" src="img/zb/shijian.png">
<p>{{showTime}}</p>
</div>
<div class="time" @click="startPusher()" v-if="showStart">
<img class="ing-icon" src="img/zb/bofang_2.png">
<p>开始</p>
</div>
<div class="time" @click="endPusher()" v-else>
<img class="ing-icon" src="img/zb/bofang_1.png">
<p>暂停</p>
</div>
<div class="time" @click="switchCamera()">
<img class="ing-icon" src="img/zb/qiehuanshexiangtou.png">
<p>摄像头</p>
</div>
</div>
</div>
</div>
<br />
<!-- <input type="text" id="pushurl" value="rtmp://voice.gzwakj.cn/app/app?token=7dcce8a7e293d9701c347cbe1b0d46656215ba6cd6bb4908670c281f2af979e2&expire=2020-12-12T09:34:16Z"
style="width: 500px;" /> <br><br>
<button @click="updatePusher()">更新推流服务器</button>
<br /><br>-->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// =========================================第二种方法vuejs+++++++++++++++++++++++++++++++++++++++++++++++++
var app = new Vue({
el: '#appContent',
data: {
showStart: false,
time: 0,
type: true,
showTime:'00:00:00',
timerId:null
},
created() {
mui.plusReady(function() {
var self = plus.webview.currentWebview();
console.log('你好。。。推流地址???传的什么鬼！！！》');
console.log(JSON.stringify(self.ags))
localStorage.setItem('url', self.ags)
plus.nativeUI.closeWaiting();
mui.currentWebview.show();
});
this.init();
},
watch:{
},
beforeDestroy(){
console.log('结束生命周期===============》beforeDestroy')
clearTimeout(this.timerId);
},
methods: {
// +——===================================以下代码计时器+++++++++++++++++++++++++++++++++++++++++++++++
/**
* 计时器
* @param {number} time 初始时间
* @param {boolean} type 默认为true正计时，false为倒计时
* @author 曲智超
*/
/**
* 初始化
*/
init() {
// this.time = this.time || parseInt(Math.random() * 3600)
this.time = this.time || 0
// this.timerId = null
console.log('this.time', this.time)
if (this.type === undefined) {
this.type = true
} else {
this.type = this.type
}
console.log('time=====> :' + this.time)
},
/*
开始、恢复
*/
start() {
!this.timerId && this.reTime()
console.log('time=====>erer:' + this.time)
},
/*
暂停/停止
*/
pause() {
if (this.timerId) {
clearTimeout(this.timerId)
this.timerId = null
}
console.log('this.timerId==>:', this.timerId)
},
/**
* 刷新时间
* @return {string} 时间
*/
reTime() {
if (this.type) {
this.time++
} else if (this.time > 0) {
this.time--
} else {
// 等于零结束计时
console.log('00:00:00')
return false
};
// 输出时间
this.formatOutput()
// 递归
this.timerId = setTimeout(this.reTime.bind(this), 1000)
},
/*
输出时间
*/
formatOutput() {
// 获取时分秒
let h = parseInt(this.time / 3600)
let m = parseInt((this.time - h * 3600) / 60)
let s = this.time - h * 3600 - m * 60
// 格式化
h < 10 ? h = `0${h}` : ''
m < 10 ? m = `0${m}` : ''
s < 10 ? s = `0${s}` : ''
console.log(`${h}:${m}:${s}`)
this.showTime = `${h}:${m}:${s}`;
},
// ================================直播推流++++++++++++++++++++++++++++++++++++++++++++++++
// 开始推流
startPusher() {
this.showStart = false;
pusher.start();
this.start();
// this.reTime();
mui.toast('开始直播了！', {
duration: 'long',
type: 'div'
})
},
//结束推流
endPusher() {
this.showStart = true;
pusher.stop();
this.pause();
mui.toast('已关闭摄像头！', {
duration: 'long',
type: 'div'
})
},
// 切换摄像头
switchCamera() {
pusher.switchCamera();
},
// 切换至全屏
fullscreenVideo() {
pusher.requestFullScreen();
},
// // 设置推流服务器
updatePusher() {
var url = document.getElementById('pushurl').value;
pusher.setOptions({
url: url
});
},
plusReady() {
// 创建直播推流控件
pusher = new plus.video.LivePusher('pusher', {
url: localStorage.getItem('url'),
mode: 'FHD',
muted: false,
// top: '0px',
// left: '0px',
// width: '100%',
// height: '540px',
// position: 'absolute',
// beauty: 1,
// whiteness: 3, //是否美白,0表示不使用美白；1,2,3,4,5值越大美白程度越大(这部分修饰代码，比如美颜啥的不能用，用了会无法推流还未找到具体原因)
});
pusher.preview();
// 监听状态变化事件
pusher.addEventListener('statechange', function(e) {
console.log('statechange: ' + JSON.stringify(e));
}, false);
},
}
})
document.addEventListener('plusready', function() {
app.plusReady();
app.startPusher();
}, false);
</script>
</body>
</html>
这里面最上面的时间计时器代码是参考别人的
// +——===================================以下代码计时器+++++++++++++++++++++++++++++++++++++++++++++++ /** * 计时器 * @param {number} time 初始时间 * @param {boolean} type 默认为true正计时，false为倒计时 * @author 曲智超 */ function Timer(time, type) { this.time = time; this.type = type; }; /** * 初始化 */ Timer.prototype.init = function(time, type) { this.time = time || parseInt(Math.random() * 3600) this.timerId = null console.log('this.time', this.time) if (type === undefined) { this.type = true } else { this.type = type } console.log('time=====> :' + this.time) }; /** * 开始/恢复 */ Timer.prototype.start = function() { !this.timerId && this.reTime() console.log('time=====>erer:' + this.time) }; /** * 暂停/停止 */ Timer.prototype.pause = function() { if (this.timerId) { clearTimeout(this.timerId) this.timerId = null } console.log('this.timerId==>:', this.timerId) }; /** * 刷新时间 * @return {string} 时间 */ Timer.prototype.reTime = function() { if (this.type) { this.time++ } else if (this.time > 0) { this.time-- } else { // 等于零结束计时 console.log('00:00:00') return false }; // 输出时间 this.formatOutput() // 递归 this.timerId = setTimeout(this.reTime.bind(this), 1000) }; /** * 输出时间 */ Timer.prototype.formatOutput = function() { // 获取时分秒 let h = parseInt(this.time / 3600) let m = parseInt((this.time - h * 3600) / 60) let s = this.time - h * 3600 - m * 60 // 格式化 h < 10 ? h = `0${h}` : '' m < 10 ? m = `0${m}` : '' s < 10 ? s = `0${s}` : '' console.log(`${h}:${m}:${s}`) }; const t = new Timer(); // t.start()
浙公网安备 33010602011771号