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

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推流页面白屏一会后重启

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