直播流组件在IPhone上黑屏

[xuya227939]

问题描述

LivePusher 组件在IPhone上黑屏，无任何报错，Android上表现正常。IPhone测试过的机型有IPhone 8、IPhone 6s、IPhone 6、IPhone x均黑屏。
web端看是正常得，小程序正常推流。

但是小程序自己本身的画面黑屏

Android正常

复现步骤

1、使用taro脚手架编写项目
2、npm run dev:weapp
3、使用腾讯的TRTC获取推流的url

import Taro, { Component } from '@tarojs/taro';
import { LivePusher } from '@tarojs/components';
<LivePusher
    id="rtcpusher"
    autopush
    mode="RTC"
    url={pushUrl}
    aspect="3:4"
waitingImage="https://mc.qcloudimg.com/static/img/daeed8616ac5df256c0591c22a65c4d3/pause_publish.jpg"
    backgroundMute={true}
    onStateChange={this.trtc.onPush}
    onError={this.trtc.onError}
>
</LivePusher>

requestSigServer() {
        return new Promise((resolve, reject) => {
            let self = this;
            let roomID = this.roomID;
            let userID = this.userId;
            let sdkAppID = this.sdkAppId;

            let url = this.useCloud ? 'https://official.opensso.tencent-cloud.com/v4/openim/jsonvideoapp' : 'https://yun.tim.qq.com/v4/openim/jsonvideoapp';
            url += '?sdkappid=' + sdkAppID + '&identifier=' + userID + '&usersig=' + this.userSig + '&random=' + Date.now() + '&contenttype=json';

            let reqHead = {
                'Cmd': 1,
                'SeqNo': 1,
                'BusType': 7,
                'GroupId': roomID
            };
            let reqBody = {
                'PrivMapEncrypt': '',
                'TerminalType': 1,
                'FromType': 3,
                'SdkVersion': 26280566
            };
            console.log('requestSigServer params:', url, reqHead, reqBody);
            requestPost(url, {
                'ReqHead': reqHead,
                'ReqBody': reqBody
            }, true).then((res) => {
                console.log('requestSigServer success:', res);
                if ((res.data && res.data['ErrorCode']) || (res.data && res.data['RspHead']['ErrorCode'] != 0)) {
                    console.error(res.data['ErrorInfo'] || res.data['RspHead']['ErrorInfo']);
                    this.requestSigFailCount++;
                    // 重试1次后还是错误，则抛出错误
                    if (this.requestSigFailCount <= 1) {
                        setTimeout(() => {
                            console.error('获取roomsig失败，重试~');
                            self.requestSigServer(userSig, privMapEncrypt);
                        }, 1000);
                    } else {
                        reject('获取roomsig失败', res);
                    }
                    return;
                }

                self.requestSigFailCount = 0;

                let roomSig = JSON.stringify(res['RspBody']);
                let pushUrl = 'room://cloud.tencent.com?sdkappid=' + sdkAppID + '&roomid=' + roomID + '&userid=' + userID + '&roomsig=' + encodeURIComponent(roomSig);

                // 如果有配置纯音频推流或者recordId参数
                if (self.pureAudioPushMod || self.recordId) {
                    let bizbuf = {
                        Str_uc_params: {
                            pure_audio_push_mod: 0,
                            record_id: 0
                        }
                    };
                    // 纯音频推流
                    if (self.pureAudioPushMod) {
                        bizbuf.Str_uc_params.pure_audio_push_mod = self.pureAudioPushMod;
                    } else {
                        delete bizbuf.Str_uc_params.pure_audio_push_mod;
                    }

                    // 自动录制时业务自定义id
                    if (self.recordId) {
                        bizbuf.Str_uc_params.record_id = self.recordId;
                    } else {
                        delete bizbuf.Str_uc_params.record_id;
                    }
                    pushUrl += '&bizbuf=' + encodeURIComponent(JSON.stringify(bizbuf));
                }
                console.log('roomSigInfo', roomID, userID, roomSig, pushUrl);

                resolve({
                    pushUrl,
                    userID
                });
            }).catch((res) => {
                console.log('requestSigServer fail:', res);
                Taro.showToast({
                    title: '获取房间签名失败',
                    icon: 'none',
                    duration: 2000
                });

                this.requestSigFailCount++;
                // 重试1次后还是错误，则抛出错误
                if (self.requestSigFailCount <= 1) {
                    setTimeout(() => {
                        console.error('获取roomsig失败，重试~');
                        self.requestSigServer(userSig, privMapEncrypt);
                    }, 1000);
                } else {
                    reject('获取roomsig失败', res);
                    console.log('获取roomsig失败');
                }
            });
        });
  }

期望行为

正常在IPhone上直播视频流

报错信息

没有报任何错误

系统信息

Taro CLI 1.3.13 environment info:
System:
OS: macOS 10.15.1
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.4.0 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
npmPackages:
nerv-devtools: ^1.4.0 => 1.5.6
nervjs: ^1.4.0 => 1.5.6
stylelint-config-taro-rn: 1.3.13 => 1.3.13
stylelint-taro-rn: 1.3.13 => 1.3.13
npmGlobalPackages:
typescript: 3.5.3

补充信息

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[taro-bot]

CC @Chen-jj

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[xuya227939]

问题已解决，原因在于组件没有设置样式宽高。