微信小程序 camera 系统相机组件

迈不过友情╰ 2021-09-08 06:20 801阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

系统相机。扫码二维码功能，需升级微信客户端至6.7.3。需要[用户授权][Link 1] `scope.camera`。 [2.10.0][]起 initdone 事件返回 maxZoom，最大变焦范围，相关接口 [CameraContext.setZoom][]。

相关api：[wx.createCameraContext][]

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">mode</td> 
   <td align="left">string</td> 
   <td align="left">normal</td> 
   <td align="left">否</td> 
   <td align="left">应用模式，只在初始化时有效，不能动态变更</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.1.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">resolution</td> 
   <td align="left">string</td> 
   <td align="left">medium</td> 
   <td align="left">否</td> 
   <td align="left">分辨率，不支持动态修改</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.10.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">device-position</td> 
   <td align="left">string</td> 
   <td align="left">back</td> 
   <td align="left">否</td> 
   <td align="left">摄像头朝向</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">flash</td> 
   <td align="left">string</td> 
   <td align="left">auto</td> 
   <td align="left">否</td> 
   <td align="left">闪光灯，值为auto, on, off</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">frame-size</td> 
   <td align="left">string</td> 
   <td align="left">medium</td> 
   <td align="left">否</td> 
   <td align="left">指定期望的相机帧数据尺寸</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.7.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindstop</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">摄像头在非正常终止时触发，如退出后台等情况</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">binderror</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">用户不允许使用摄像头时触发</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindinitdone</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">相机初始化完成时触发，<code>e.detail = {maxZoom}</code></td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.7.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindscancode</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">在扫码识别成功时触发，仅在 mode=“scanCode” 时生效</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.1.0</a></td> 
  </tr> 
 </tbody> 
</table>

**mode 的合法值**

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">normal</td> 
   <td align="left">相机模式</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">scanCode</td> 
   <td align="left">扫码模式</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**resolution 的合法值**

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">low</td> 
   <td align="left">低</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">medium</td> 
   <td align="left">中</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">high</td> 
   <td align="left">高</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**device-position 的合法值**

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">front</td> 
   <td align="left">前置</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">back</td> 
   <td align="left">后置</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**flash 的合法值**

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">auto</td> 
   <td align="left">自动</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">on</td> 
   <td align="left">打开</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">off</td> 
   <td align="left">关闭</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">torch</td> 
   <td align="left">常亮</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.8.0</a></td> 
  </tr> 
 </tbody> 
</table>

**frame-size 的合法值**

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">small</td> 
   <td align="left">小尺寸帧数据</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">medium</td> 
   <td align="left">中尺寸帧数据</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">large</td> 
   <td align="left">大尺寸帧数据</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**Bug & Tip**

1.  `tip`: 同一页面只能插入一个 `camera` 组件
2.  `tip`:请注意[原生组件使用限制][Link 2]
3.  `tip`:onCameraFrame 接口根据 frame-size 返回不同尺寸的原始帧数据，与 Camera 组件展示的图像不同，其实际像素值由系统决定

**示例代码**

[在开发者工具中预览效果][Link 3]

index.xml

index.js

Page({ 
      onLoad() { 
        this.ctx = wx.createCameraContext()
      },
      takePhoto() { 
        this.ctx.takePhoto({ 
          quality: 'high',
          success: (res) => { 
            this.setData({ 
              src: res.tempImagePath
            })
          }
        })
      },
      startRecord() { 
        this.ctx.startRecord({ 
          success: (res) => { 
            console.log('startRecord')
          }
        })
      },
      stopRecord() { 
        this.ctx.stopRecord({ 
          success: (res) => { 
            this.setData({ 
              src: res.tempThumbPath,
              videoSrc: res.tempVideoPath
            })
          }
        })
      },
      error(e) { 
        console.log(e.detail)
      }
    })

运行效果截图（要真机调试）

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0dntCDIY-1623153924610)(image-20210608112310023.png)\]][img-0dntCDIY-1623153924610_image-20210608112310023.png]

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html
[2.10.0]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[CameraContext.setZoom]: https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.setZoom.html
[wx.createCameraContext]: https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/wx.createCameraContext.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html#%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8%E9%99%90%E5%88%B6
[Link 3]: https://developers.weixin.qq.com/s/VBZ3Jim26zYu
[img-0dntCDIY-1623153924610_image-20210608112310023.png]: /images/20210716/373ee27755924085adeac10c8e540da2.png