LivePusher功能在Android环境可以实现直播推流。
但是在iOS环境下,
1、使用addEventListener绑定事件都无效。
2、可以在手机上预览,但是推流到服务器,通过在线m3u8播放器播放,却只有音频,无视频画面.
3、Android和iOS环境代码如下,未做适配
<div id="MVVM">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title" id="page_title">直播推流</h1>
</header>
<div class="mui-content adtper-mui-content adtper-bottom" id="muiContent">
<div id='push'></div>
<div class="mui-btn" @click="preview">预览</div>
<div class="mui-btn" @click="start">开始推流</div>
<div class="mui-btn" @click="stop">停止推流</div>
<div class="mui-btn" @click="pause">暂停推流</div>
<div class="mui-btn" @click="resume">恢复推流</div>
<div class="mui-btn" @click="switchCamera">切换前后摄像头</div>
<div class="mui-btn" @click="snapshot">快照</div>
<div class="mui-btn" @click="close">关闭推流</div>
<div class="logs" v-if="bindEvent">
<ul>
<li v-for="(item, index) in logs" :key='index'>{{item}}</li>
</ul>
</div>
<div class="mui-btn" @click="clearLogs" v-if="bindEvent">清除日志</div>
<div>
<span class="label">{{publishUrl}}</span>
</div>
<div>
<span class="label">{{playUrl}}</span>
</div>
</div>
</div>
</div>
var vm = new Vue({
el:"#MVVM",
data:{
bindEvent: false, // 是否启用日志
logs: [],
publishUrl: '',
playUrl: ''
},
mounted:function() {
var that = this
mui.plusReady(function () {
var self = plus.webview.currentWebview();
if (self) {
that.publishUrl = self.publishUrl
that.playUrl = self.playUrl
mui.toast('that.publishUrl => ' + that.publishUrl)
}
that.createLivePusher()
})
},
methods:{
createLivePusher: function () {
var that = this
this.pusher = plus.video.createLivePusher('livepusher', {
// url: 'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb',
url: that.publishUrl,
mode: 'SD', // 可取值:SD(标清), HD(高清), FHD(超清)。
muted: false, // 默认值为false。
'enable-camera': true, // 默认值为true
'auto-focus': true, // 自动聚焦
aspect: '3:4', // 可取值:3:4, 9:16
top:'40px',
left:'0px',
width: '100%',
height: '300px',
position: 'static'
});
plus.webview.currentWebview().append(this.pusher);
// mui.alert(JSON.stringify(this.pusher))
if (this.bindEvent) {
that.pusher.addEventListener('statechange', function(e){
mui.toast('statechange => ')
vm.logs.unshift(vm.curTime() + ' <= statechange => ' + JSON.stringify(e.detail))
console.log('statechange => '+JSON.stringify(e.detail));
}, false);
that.pusher.addEventListener('netstatus', function(e){
vm.logs.unshift(vm.curTime() + ' <= netstatus => ' + JSON.stringify(e.detail))
console.log('netstatus => '+JSON.stringify(e.detail));
}, false);
that.pusher.addEventListener('error', function(e){
vm.logs.unshift(vm.curTime() + ' <= error => ' + JSON.stringify(e.detail))
console.log('error => '+JSON.stringify(e));
}, false);
}
that.preview()
setTimeout(function () {
// that.switchCamera()
}, 1000)
},
preview: function () {
this.pusher && this.pusher.preview()
},
start: function () {
this.pusher && this.pusher.start(function () {
plus.nativeUI.alert("start success");
},
function (err) {
plus.nativeUI.alert("start error: "+JSON.stringify(err));
})
},
stop: function () {
this.pusher && this.pusher.stop()
},
pause: function () {
this.pusher && this.pusher.pause()
},
resume: function () {
this.pusher && this.pusher.resume()
},
switchCamera: function () {
mui.toast('switchCamera ...')
this.pusher && this.pusher.switchCamera()
},
snapshot: function () {
this.pusher && this.pusher.snapshot(function(e){
plus.nativeUI.alert("snapshot success: "+JSON.stringify(e));
}, function(e) {
plus.nativeUI.alert("snapshot error: "+JSON.stringify(e));
});
},
close: function () {
this.pusher && this.pusher.close()
},
curTime: function () {
var date = new Date()
var h = date.getHours()
var m = date.getMinutes()
var s = date.getSeconds()
return (h < 9 ? '0' + h : h) + ':' + (m < 9 ? '0' + m : m) + ':' + (s < 9 ? '0' + s : s)
},
clearLogs: function () {
this.logs.splice(0)
}
}
});
CLP
你是说流播放器播放的时候,有声音,没有画面对吧。提供下稳定的流地址
2019-05-06 20:11
2***@qq.com (作者)
回复 CLP: 推流地址是通过接口生成的非固定地址,存在时效性。
2019-05-07 09:04
2***@qq.com (作者)
回复 CLP: 流地址:rtmp://48666.livepush.myqcloud.com/live/m?txSecret=01cec26599308c24d7c01022bd1aa342&txTime=5CD1AB7F,该流地址今天有效
2019-05-07 09:24
CLP
回复 2***@qq.com: 你是推流有问题,还是拉流有问题,你怎么确定的是推流的问题?
2019-05-07 12:08
2***@qq.com (作者)
回复 CLP: 查看服务器发现,iOS推流的文件明显比Android文件小(大约小了10倍)
2019-05-07 14:29