init

xhs-mini-demos/component-case/camera-case/camera-case.css

@@ -0,0 +1,16 @@
+.preview-tips {
+  margin: 20rpx 0;
+  font-size: 16px;
+}
+
+.video {
+  margin: 50px auto;
+  width: 100%;
+  height: 300px;
+}
+
+.btn-area {
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}

xhs-mini-demos/component-case/camera-case/camera-case.js

@@ -0,0 +1,106 @@
+Page({
+  data: {
+    videoSrc: '',
+    src: '',
+    mode: 'normal',
+    zoom: 1,
+    devicePosition: 'back',
+    flash: 'auto',
+    flashArr: ['auto', 'on', 'off', 'torch'],
+    frameSize: 'medium',
+    frameSizeArr: ['small', 'medium', 'large'],
+  },
+  onLoad() {
+    this.ctx = xhs.createCameraContext();
+  },
+  takePhoto() {
+    this.ctx.takePhoto({
+      quality: 'high',
+      success: (res) => {
+        console.log("%c Line:21 takePhoto 🌮 takePhoto res", "color:#3f7cff", res);
+        this.setData({
+          src: res.tempImagePath
+        });
+      }
+    });
+  },
+  startRecord() {
+    this.ctx.startRecord({
+      success: (res) => {
+        console.log('startRecord');
+      }
+    });
+  },
+  changeFlash(e) {
+    this.setData({
+      flash: this.data.flashArr[e.detail.value]
+    });
+  },
+  changeFrameSize(e) {
+    this.setData({
+      frameSize: this.data.frameSizeArr[e.detail.value]
+    });
+  },
+  changeMode() {
+    this.setData({
+      mode: this.data.mode === 'normal' ? 'scanCode' : 'normal'
+    });
+  },
+  changeDevicePosition() {
+    this.setData({
+      devicePosition: this.data.devicePosition === 'back' ? 'front' : 'back'
+    });
+  },
+  stopRecord() {
+    this.ctx.stopRecord({
+      success: (res) => {
+        this.setData({
+          src: res.tempThumbPath,
+          videoSrc: res.tempVideoPath
+        });
+      }
+    });
+  },
+  setZoom() {
+    this.ctx.setZoom({
+      zoom: 2,
+      success(res) {
+        console.log('setZoom 成功', res);
+        this.setData({
+          zoom: res.zoom
+        });
+      },
+      fail(error) {
+        console.log('setZoom 失败', error);
+      }
+    });
+  },
+  error(e) {
+    xhs.showToast({
+      title: 'binderror',
+      content: JSON.stringify(e)
+    });
+    console.log('相机组件触发了 binderror', e.detail);
+  },
+  stop(e) {
+    xhs.showToast({
+      title: 'bindstop',
+      content: JSON.stringify(e)
+    });
+    console.log('相机组件触发了 bindstop', e.detail);
+  },
+  initdone(e) {
+    xhs.showToast({
+      title: 'initdone',
+      content: JSON.stringify(e)
+    });
+    console.log('相机组件触发了 bindinitdone', e.detail);
+  },
+  scancode(e) {
+    xhs.showToast({
+      title: 'scancode',
+      content: JSON.stringify(e)
+    });
+    console.log('相机组件触发了 bindscancode', e.detail);
+  }
+});

xhs-mini-demos/component-case/camera-case/camera-case.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "camera-case"
+}

xhs-mini-demos/component-case/camera-case/camera-case.xhsml

@@ -0,0 +1,44 @@
+<view class="page-body">
+  <view class="page-body-wrapper">
+    <camera xhs:if="{{mode ==='normal'}}" device-position="{{devicePosition}}" flash="{{flash}}" binderror="error"
+      bindscancode="scancode" bindstop="stop" bindinitdone="initdone" style="width: 100%; height: 300px;"></camera>
+    <camera xhs:if="{{mode==='scanCode'}}" device-position="{{devicePosition}}" flash="{{flash}}" binderror="error"
+      bindscancode="scancode" bindstop="stop" bindinitdone="initdone" style="width: 100%; height: 300px;"></camera>
+    <view class="btn-area">
+      <picker value="{{flash}}" bindchange="changeFlash" range="{{flashArr}}">
+        <view class="preview-tips">点击切换闪光灯模式，当前为{{flash}}</view>
+      </picker>
+    </view>
+    <view class="btn-area">
+      <picker value="{{frameSize}}" bindchange="changeFrameSize" range="{{frameSizeArr}}">
+        <view class="preview-tips">点击切换相机帧数据尺寸，当前为{{frameSize}}</view>
+      </picker>
+    </view>
+    <view class="btn-area">
+      <button type="primary" bindtap="changeMode">
+        切换模式为{{mode === 'normal' ? 'scanCode' : 'normal'}}
+      </button>
+    </view>
+    <view class="btn-area">
+      <button type="primary" bindtap="changeDevicePosition">
+        切换镜头朝向为{{devicePosition === 'back' ? 'front' : 'back'}}
+      </button>
+    </view>
+    <view class="btn-area">
+      <button type="primary" bindtap="takePhoto">拍照</button>
+    </view>
+    <view class="btn-area">
+      <button type="primary" bindtap="setZoom">设置缩放级别为 2</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="preview-tips">预览</view>
+    <image xhs:if="{{src}}" mode="widthFix" src="{{src}}"></image>
+    <video xhs:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
+  </view>
+</view>