combination/miniprogram/packageComponent/pages/media/camera/camera.wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container page" data-weui-theme="{{theme}}">
  <template is="head" data="{{title: 'camera'}}"/>

  <view class="page-body">
    <view class="page-body-wrapper">
    <view style="margin-bottom: 10px"> camera 组件 </view>
      <camera
        flash="off"
        device-position="{{position}}"
        binderror="error"
      >
      </camera>
       <view wx:if="{{showCanvas}}" class="info-container">
          <view style="margin: 10px 0">使用实时数据帧在 canvas 组件的展示</view>
          <view>
            帧高度：{{ frameHeight }}  帧宽度：{{ frameWidth }}
          </view>
          <canvas
            id="webgl"
            type="webgl"
            canvas-id="canvas"
            style="width: {{width}}px; height: {{height}}px;"
          >
          </canvas>
        </view>
      <view class="btn-area first-btn">
        <button bindtap="handleShowCanvas" type="primary">{{showCanvas ? "关闭实时帧数据模式": "开启实时帧数据模式"}}</button>
      </view>
      <view class="btn-area">
      <button type="primary" bindtap="togglePosition">切换摄像头</button>
      </view>
      <view class="btn-area">
        <button type="primary" bindtap="takePhoto">拍照</button>
      </view>
      <view class="btn-area">
        <button type="primary" bindtap="startRecord">开始录像</button>
      </view>
      <view class="btn-area">
        <button type="primary" bindtap="stopRecord">结束录像</button>
      </view>
      <view class="btn-area">
        <navigator url="/packageComponent/pages/media/camera-scan-code/camera-scan-code" hover-class="none">
          <button type="primary">扫描一维码</button>
        </navigator>
      </view>
      <view class="preview-tips">点击录像或拍照即可在下方预览效果</view>
      <image wx:if="{{src}}" mode="widthFix" class="photo" src="{{src}}"></image>
      <video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
    </view>
  </view>

  <template is="foot" />
</view>