公告列表
公告列表
收藏
回答

关于相机camera和canvas一起使用的问题？

在开发者工具中使用camera调用摄像头和canvas绘制webgl，是正常的。

真机预览Android中会出现黑屏的情况，将canvas注释后真机预览camera可以正常显示，或者打开调试模式camera和canvas可以正常显示。

真机预览iOS中camera正常但不显示canvas，打开调试模式后camera和canvas可以正常显示。

Android下wxml代码中camera内的dom结构在真机上没有显示，iOS显示。

我的canvas设置了背景透明。

请问这是什么问题导致的。

代码如下

wxml:

<view class="counter">
  <canvas type="webgl" id="webgl_3d"></canvas>
  <camera
    device-position="{{device_position_data}}"
    flash="{{flash_data}}"
    mode="normal"
    frame-size="small"
    bindinitdone="bindinitdone"
    binderror="binderror">
    <cover-view>
      <cover-view class="xiangce btn" bindtap="chooseImage">相册</cover-view>
      <cover-view class="kaideng btn" bindtouchstart="flashstart" bindtouchend="flashend">
        开灯
      </cover-view>
      <cover-view class="paizhao btn">
        <cover-view bindtap="paizhao"></cover-view>
      </cover-view>
      <cover-view class="qiehuan btn" bindtap="device_position">切换</cover-view>
    </cover-view>
  </camera>
</view>


wxss:

.counter {
  height: 100%;
  position: relative;
}
 
.counter #webgl_3d {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}
 
.counter camera {
  width: 100%;
  height: 100%;
}
 
.counter camera cover-view {
  width: 100%;
  height: 100%;
}
 
.counter camera cover-view .btn {
  width: 100rpx;
  height: 100rpx;
  border: 1rpx solid #fff;
  border-radius: 50%;
  position: absolute;
  z-index: 100000;
  color: #fff;
  line-height: 100rpx;
  text-align: center;
}
 
.counter camera cover-view .btn.xiangce {
  left: 30rpx;
  bottom: 60rpx;
}
 
.counter camera cover-view .btn.kaideng {
  left: 50%;
  bottom: 200rpx;
  transform: translate(-50%, 0);
}
 
.counter camera cover-view .btn.paizhao {
  left: 50%;
  bottom: 60rpx;
  transform: translate(-50%, 0);
}
 
.counter camera cover-view .btn.paizhao cover-view {
  width: 70rpx;
  height: 70rpx;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000000;
}
 
.counter camera cover-view .btn.qiehuan {
  right: 30rpx;
  bottom: 60rpx;
}


js:

Page({
  data: {
    device_position_data: 'back',
    flash_data: 'off'
  },
  onReady: function () {},
  onLoad: function () {
    this.ctx = wx.createCameraContext()
    wx.createSelectorQuery()
      .select('#webgl_3d')
      .node()
      .exec((res) => {
        const canvas = res[0].node
        const THREE = createScopedThreejs(canvas)
 
        renderMy(canvas, THREE)
        this.init()
      })
  },
  init(res) {
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.camera']) {
          wx.showModal({
            title: '同意摄像头权限'
          })
        }
      },
      fail: err => {
        console.error(err)
      }
    })
  }
})


最后一次编辑于  2019-10-21
回答关注问题邀请回答
收藏

1 个回答

请 登录 后发表内容
相关问题
相关文档
问题标签
canvas摄像头camera开发者工具绘制