这部分修饰代码,比如美颜啥的不能用,用了会无法推流还未找到具体原因
<!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 { 100%; height: 100%; } #appContent { 100%; height: 100%; position: relative; } #pusher { position: absolute; top: 0; left: 0; /* 100%; height: 100%; */ z-index: 0 !important; display: block; } .shadow-top { height: 54px; 100%; position: absolute; top: 540px; left: 0; opacity: 0.6; z-index: 999 !important; display: flex; align-items: center; } .shadow-top .top-left { 165px; height: 54px; } .shadow-top .top-right { 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 { 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 { 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="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=" 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', // '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()