在开发者工具中使用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_ 3 d { 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 : 100 rpx; height : 100 rpx; border : 1 rpx solid #fff ; border-radius: 50% ; position : absolute ; z-index : 100000 ; color : #fff ; line-height : 100 rpx; text-align : center ; } . counter camera cover-view .btn.xiangce { left : 30 rpx; bottom : 60 rpx; } . counter camera cover-view .btn.kaideng { left : 50% ; bottom : 200 rpx; transform: translate( -50% , 0 ); } . counter camera cover-view .btn.paizhao { left : 50% ; bottom : 60 rpx; transform: translate( -50% , 0 ); } . counter camera cover-view .btn.paizhao cover-view { width : 70 rpx; height : 70 rpx; 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 : 30 rpx; bottom : 60 rpx; } |
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) } }) } }) |
麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)