2***@qq.com
2***@qq.com
  • 发布:2019-05-06 17:53
  • 更新:2020-07-06 10:04
  • 阅读:2683

LivePusher在Android可以实现直播推流,在iOS下,只有音频推送成功,画面不显示,无法绑定事件

分类:HTML5+

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)  
				}  
			}  
		});
2019-05-06 17:53 负责人:无 分享
已邀请:
2***@qq.com

2***@qq.com (作者)

使用HbuilderX编辑,使用云平台打包。

  • 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

3***@qq.com

3***@qq.com

不只是你说的不显示,网上查了好多资料,都说ios不显示

bbg

bbg

创建完推流组件后,在用setStyles设置推流组件的样式和路径

8***@qq.com

8***@qq.com - 90

ios有点特别,创建livepusher后 settimeout()500毫秒调用 preview() 方法画面才出来

1***@qq.com

1***@qq.com

请问楼主这个问题有没有解决?怎么解决的,谢谢!

Kurobing

Kurobing

楼主我也是同样问题,请问解决了吗? 能否告知

2***@qq.com

2***@qq.com (作者)

基于业务,已经放弃iOS推流功能。

  • Kurobing

    您那边还是没有解决ios没有视频画面的问题吗?


    2019-09-23 11:05

  • 2***@qq.com (作者)

    回复 Kurobing: 没有


    2019-09-24 09:17

  • 1***@qq.com

    回复 Kurobing: 更新最新的SDK应该就可以看到画面了


    2019-09-26 16:39

  • 土豆鸡丁_o0

    回复 1***@qq.com: 老哥,你的直播可以看到画面吗?IOS操作系统是哪个版本,我的是12,还是只有声音


    2020-01-05 11:17

2***@qq.com

2***@qq.com

请问你们有遇到ios进入nvue推流页面白屏一会后重启

该问题目前已经被锁定, 无法添加新回复