直播推流组件无法正常使用

[onekr-billy]

问题描述
小程序直播组件， 是否支持，通过taro-cli 转换为Taro， 无法正常使用直播，手机上打开直播页面就是黑屏，小程序开发工具可以显示摄像头图像，但是无法正常推流

复现步骤

1. 转换小程序原生代码为 Taro项目
2. 使用直播组件 推流 发现无法正常使用，手机上直播组件处于黑屏状态

[或者可以直接贴源代码，能贴文字就不要截图]

import {
  Block,
  View,
  LivePusher,
  CoverView,
  CoverImage
} from '@tarojs/components'
import Taro from '@tarojs/taro'
import withWeapp from '@tarojs/with-weapp'
import './push.scss'
// pages/push/push.js
const app = Taro.getApp()

@withWeapp('Page')
class _C extends Taro.Component {
  state = {
    frontCamera: true,
    cameraContext: {},
    pushUrl: 'rtmp://pusher.live.a.ichizai.com/test/test1?auth_key=1558496490-0-0-200b7ee36b3e6ead2672f7bd338b13a8',
    mode: 'SD',
    muted: false,
    enableCamera: true,
    orientation: 'vertical',
    beauty: 6.3,
    whiteness: 3.0,
    backgroundMute: false,
    hide: false,
    debug: false,
    headerHeight: app.globalData.headerHeight,
    statusBarHeight: app.globalData.statusBarHeight
  }
  onSwitchCameraClick = () => {
    this.data.frontCamera = !this.data.frontCamera
    this.setData({
      frontCamera: this.data.frontCamera
    })
    this.data.cameraContext.switchCamera()
  }
  onBeautyClick = () => {
    if (this.data.beauty != 0) {
      this.data.beauty = 0
      this.data.whiteness = 0
    } else {
      this.data.beauty = 6.3
      this.data.whiteness = 3.0
    }

    this.setData({
      beauty: this.data.beauty,
      whiteness: this.data.whiteness
    })
  }
  onLogClick = () => {
    this.setData({
      debug: !this.data.debug
    })
  }
  onMuteClick = () => {
    this.setData({
      muted: !this.data.muted
    })
  }
  onPushEvent = e => {
    console.log(e.detail.code)

    if (e.detail.code == -1307) {
      this.stop()
      Taro.showToast({
        title: '推流多次失败'
      })
    }
  }
  stop = () => {
    this.setData({
      playing: false,
      pushUrl: '',
      mode: 'SD',
      muted: false,
      enableCamera: true,
      orientation: 'vertical',
      beauty: 6.3,
      whiteness: 3.0,
      backgroundMute: false,
      debug: false
    })
    this.data.cameraContext.stop()
  }
  createContext = () => {
    var self = this
    this.setData(
      {
        cameraContext: Taro.createLivePusherContext('camera-push')
      },
      () => {
        self.data.cameraContext.start()
      }
    )
  }
  componentWillMount = options => {
    console.log('onLoad', options)
    // this.setData({
    //   mode: options.mode,
    //   orientation: options.orientation,
    //   enableCamera: options.enableCamera === 'false' ? false : true,
    //   pushUrl: decodeURIComponent(options.pushUrl)
    // })
  }
  componentDidMount = () => {
    console.log('onLoad onReady')
    this.createContext()

    Taro.setKeepScreenOn({
      keepScreenOn: true
    })
  }
  componentDidShow = () => {
    console.log('onLoad onShow')
    // 保持屏幕常亮
    Taro.setKeepScreenOn({
      keepScreenOn: true
    })
  }
  componentDidHide = () => {
    console.log('onLoad onHide')
  }
  componentWillUnmount = () => {
    console.log('onLoad onUnload')
    this.stop()

    Taro.setKeepScreenOn({
      keepScreenOn: false
    })
  }
  onShareAppMessage = () => {
    console.log('onLoad onShareAppMessage')
    return {
      title: '驰在360小助手',
      path: 'pages/assistant/index',
      imageUrl: 'http://m.chizai360.com/image/chizai-mini-program.png'
    }
  }
  onBack = () => {
    Taro.navigateBack({
      delta: 1
    })
  }
  config = {
    backgroundColor: '#000',
    backgroundTextStyle: 'light'
  }

  render() {
    const {
      mode,
      orientation,
      beauty,
      whiteness,
      muted,
      backgroundMute,
      pushUrl,
      enableCamera,
      debug,
      hide,
      headerHeight,
      statusBarHeight
    } = this.state
    console.log('this.state', this.state);

    return (
      <View style="width:100%;height: 100%; background-color: black;">
        <View style="width:100%;height:100%;">
          <LivePusher
            style="width:100%; height: 50%;"
            id="camera-push"
            mode={mode}
            orientation={orientation}
            beauty={beauty}
            whiteness={whiteness}
            muted={muted}
            waitingImage="https://mc.qcloudimg.com/static/img/daeed8616ac5df256c0591c22a65c4d3/pause_publish.jpg"
            backgroundMute={backgroundMute}
            url={pushUrl}
            enableCamera={enableCamera}
            debug={debug}
            hidden={hide}
            onStateChange={this.onPushEvent}
          >
            <CoverView style="width:100%; height: 70px; position:absolute;bottom:30px;">
              <CoverView className="bottom_box">
                <CoverImage
                  className="bottom_button"
                  src={require('../../../Resources/camera.png')}
                  onClick={this.onSwitchCameraClick}
                />
                <CoverView className="bottom_text">翻转</CoverView>
              </CoverView>
              <CoverView className="bottom_box">
                <CoverImage
                  className="bottom_button"
                  src={
                    '/Resources/' +
                    (beauty == 0 ? 'beauty-dis' : 'beauty') +
                    '.png'
                  }
                  onClick={this.onBeautyClick}
                />
                <CoverView className="bottom_text">美颜</CoverView>
              </CoverView>
              <CoverView className="bottom_box">
                <CoverImage
                  className="bottom_button"
                  src={
                    '/Resources/' + (muted ? 'mic-dis' : 'mic') + '.png'
                  }
                  onClick={this.onMuteClick}
                />
                <CoverView className="bottom_text">声音</CoverView>
              </CoverView>
              <CoverView className="bottom_box">
                <CoverImage
                  className="bottom_button"
                  src={'/Resources/' + (debug ? 'log' : 'log2') + '.png'}
                  onClick={this.onLogClick}
                />
                <CoverView className="bottom_text">日志</CoverView>
              </CoverView>
            </CoverView>
            <CoverImage
              className="close"
              style={'top:' + (headerHeight + statusBarHeight - 26) + 'rpx'}
              src={require('../../../Resources/back.png')}
              onClick={this.onBack}
            />
          </LivePusher>
        </View>
      </View>
    )
  }
}

export default _C

期望行为
正常在小程序中使用直播推流和直播播放组件

报错信息
没有报任何错误

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

• 操作系统: [e.g. Windows 10]
• Taro 版本 [e.g. v.1.2.26]
• Node.js 版本 [e.g. v10.15.1]
• 报错平台 [ weapp]

补充信息
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[onekr-billy]

我使用 原生组件和taro混写方案是可以使用 只是这个 单位转换是不是又问题?
我查看了转换后的代码， 我建议原生组件的所有文件都不要做重新编译，我目前发现了是 wxss文件跟原生的文件不一样

增加了很多 样式

[Garfield550]

左边红框的东西在 postCSS 里配置，rpx 和 px 在 pxtransform 配置

  weapp: {
    module: {
      postcss: {
        autoprefixer: {
          enable: true,
          config: {
            browsers: ['last 3 versions', 'Android >= 4.1', 'ios >= 8'],
          },
        },
        pxtransform: {
          enable: true,
          config: {},
        },
      },
    },
  },

[tourze]

如果是拿腾讯云的demo来转的话，我记得还会有大量setData不规范的问题。。。

[onekr-billy]

@tourze setDate 看taro 官网的说明， 可以通过 @WithApp 来解决， 不过这个是小问题了， 主要是直播组件无法使用

[haoyinag]

@zhang5171291 遇到相同的问题，请问解决了吗

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[xuya227939]

@zhang5171291 你好，请问这个问题解决了吗？我现在遇到了苹果上推流黑屏的情况，安卓不会。