|
|
@@ -1,263 +0,0 @@
|
|
|
-<template>
|
|
|
- <view style="flex: 1;">
|
|
|
- <camera style="width: 100%; height: 300px;" :resolution="'medium'" :device-position="devicePosition"
|
|
|
- :flash="flash" :frame-size="frameSize" @stop="handleStop" @error="handleError" @initdone="handleInitDone">
|
|
|
- </camera>
|
|
|
-
|
|
|
- <scroll-view style="flex: 1;">
|
|
|
- <view>
|
|
|
- <!--
|
|
|
- <button type="default" @click="handleScanCode">扫码</button>
|
|
|
- <button type="default" @click="switchDevicePosition">切换前后摄像头</button>-->
|
|
|
- <button type="default" @click="switchFlash">闪光灯</button>
|
|
|
- <!--
|
|
|
- <button type="default" @click="setOnFrameListener">设置帧数据监听</button>
|
|
|
- <button type="default" @click="startFrameListener">开始捕捉帧数据</button>
|
|
|
- <button type="default" @click="stopFrameListener">停止捕捉帧数据</button> -->
|
|
|
- <view>
|
|
|
- <view class="uni-title">
|
|
|
- <text class="uni-title-text">设置预览缩放</text>
|
|
|
- </view>
|
|
|
- <view class="uni-camera-wrapper">
|
|
|
- <slider class="uni-camera-test-host" :disabled="maxZoom == 0" :show-value="true" :min="1"
|
|
|
- :max="maxZoom" :value="1" @change="zoomSliderChange" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view>
|
|
|
- <view class="uni-title">
|
|
|
- <text class="uni-title-text">拍摄照片示例</text>
|
|
|
- <button type="default" @click="handleTakePhoto">拍摄照片</button>
|
|
|
- <radio-group style="flex-direction: row;" name="成像质量" @change="takePhotoQualityChange">
|
|
|
- <radio value="normal">普通质量</radio>
|
|
|
- <radio value="low">低质量</radio>
|
|
|
- <radio value="high" :checked="true">高质量</radio>
|
|
|
- <radio value="original" >原图</radio>
|
|
|
- </radio-group>
|
|
|
- </view>
|
|
|
- <view class="uni-camera-wrapper">
|
|
|
- <image class="uni-camera-test-host-without-flex" style="width: 150px;height: 150px;"
|
|
|
- v-if="imageSrc != ''" :src="imageSrc"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- devicePosition: "back",
|
|
|
- flash: "off",
|
|
|
- frameSize: "medium",
|
|
|
- listener: null as CameraContextCameraFrameListener | null,
|
|
|
- maxZoom: 0,
|
|
|
- imageSrc: "",
|
|
|
- quality: "high",
|
|
|
- timeout: 30,
|
|
|
- compressed: false,
|
|
|
- videoSrc: "",
|
|
|
- startRecordStatus: false,
|
|
|
- remain: 0,
|
|
|
- intervalId: -1,
|
|
|
- timeoutStr: '30'
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- handleScanCode() {
|
|
|
- uni.navigateTo({
|
|
|
- url:"/pages/component/camera/camera-scan-code"
|
|
|
- })
|
|
|
- },
|
|
|
- switchDevicePosition() {
|
|
|
- this.devicePosition = this.devicePosition == "back" ? "front" : "back"
|
|
|
- },
|
|
|
-
|
|
|
- switchFlash() {
|
|
|
- this.flash = this.flash == "torch" ? "off" : "torch"
|
|
|
- },
|
|
|
-
|
|
|
- handleStop(e : UniCameraStopEvent) {
|
|
|
- console.log("stop", e.detail);
|
|
|
- },
|
|
|
- handleError(e : UniCameraErrorEvent) {
|
|
|
- console.log("error", e.detail);
|
|
|
- },
|
|
|
- handleInitDone(e : UniCameraInitDoneEvent) {
|
|
|
- console.log("initdone", e.detail);
|
|
|
- this.maxZoom = e.detail.maxZoom ?? 0
|
|
|
- },
|
|
|
- zoomSliderChange(event : UniSliderChangeEvent) {
|
|
|
- const value = event.detail.value
|
|
|
- const context = uni.createCameraContext();
|
|
|
- context?.setZoom({
|
|
|
- zoom: value,
|
|
|
- success: (e : any) => {
|
|
|
- console.log(e);
|
|
|
- }
|
|
|
- } as CameraContextSetZoomOptions)
|
|
|
- },
|
|
|
- handleTakePhoto() {
|
|
|
- const context = uni.createCameraContext();
|
|
|
- context?.takePhoto({
|
|
|
- quality: this.quality,
|
|
|
- selfieMirror: false,
|
|
|
- success: (res : CameraContextTakePhotoResult) => {
|
|
|
- console.log("res.tempImagePath", res.tempImagePath);
|
|
|
- this.imageSrc = res.tempImagePath ?? ''
|
|
|
- },
|
|
|
- fail: (e : any) => {
|
|
|
- console.log("take photo", e);
|
|
|
- }
|
|
|
- } as CameraContextTakePhotoOptions)
|
|
|
- },
|
|
|
- takePhotoQualityChange(event : UniRadioGroupChangeEvent) {
|
|
|
- this.quality = event.detail.value
|
|
|
- console.log("quality", this.quality);
|
|
|
- },
|
|
|
-
|
|
|
- setOnFrameListener() {
|
|
|
- const context = uni.createCameraContext();
|
|
|
- this.listener = context?.onCameraFrame((frame : CameraContextOnCameraFrame) => {
|
|
|
- console.log("OnFrame :", frame);
|
|
|
- })
|
|
|
- },
|
|
|
- startFrameListener() {
|
|
|
- this.listener?.start({
|
|
|
- success: (res : any) => {
|
|
|
- console.log("startFrameListener success", res);
|
|
|
- }
|
|
|
- } as CameraContextCameraFrameListenerStartOptions)
|
|
|
-
|
|
|
- },
|
|
|
- stopFrameListener() {
|
|
|
- this.listener?.stop({
|
|
|
- success: (res : any) => {
|
|
|
- console.log("stopFrameListener success", res);
|
|
|
- }
|
|
|
- } as CameraContextCameraFrameListenerStopOptions)
|
|
|
- },
|
|
|
- startRecord() {
|
|
|
- const context = uni.createCameraContext();
|
|
|
- let timeout = this.getTimeout()
|
|
|
- this.timeout = timeout
|
|
|
- context?.startRecord({
|
|
|
- timeout: timeout,
|
|
|
- selfieMirror: false,
|
|
|
- timeoutCallback: (res : any) => {
|
|
|
- console.log("timeoutCallback", res);
|
|
|
- this.startRecordStatus = false
|
|
|
- if (typeof res != "string") {
|
|
|
- const result = res as CameraContextStartRecordTimeoutResult
|
|
|
- this.videoSrc = result.tempVideoPath ?? ''
|
|
|
- }
|
|
|
- clearInterval(this.intervalId)
|
|
|
- },
|
|
|
- success: (res : any) => {
|
|
|
- this.startRecordStatus = true
|
|
|
- console.log("start record success", res);
|
|
|
- this.remain = timeout
|
|
|
- this.intervalId = setInterval(() => {
|
|
|
- if (this.remain <= 0) {
|
|
|
- clearInterval(this.intervalId)
|
|
|
- } else {
|
|
|
- this.remain--
|
|
|
- }
|
|
|
- }, 1000)
|
|
|
- },
|
|
|
- fail: (res : any) => {
|
|
|
- console.log("start record fail", res);
|
|
|
- this.startRecordStatus = false
|
|
|
- this.remain = 0
|
|
|
- clearInterval(this.intervalId)
|
|
|
- }
|
|
|
- } as CameraContextStartRecordOptions)
|
|
|
- },
|
|
|
- stopRecord() {
|
|
|
- this.startRecordStatus = false
|
|
|
- const context = uni.createCameraContext();
|
|
|
- context?.stopRecord({
|
|
|
- compressed: this.compressed,
|
|
|
- success: (res : CameraContextStopRecordResult) => {
|
|
|
- console.log("stop record success", res);
|
|
|
- this.videoSrc = res.tempVideoPath ?? ''
|
|
|
- },
|
|
|
- fail: (res : any) => {
|
|
|
- console.log("stop record fail", res);
|
|
|
- }
|
|
|
- } as CameraContextStopRecordOptions)
|
|
|
- clearInterval(this.intervalId)
|
|
|
- this.remain = 0
|
|
|
- },
|
|
|
- startRecordCompressChange(event : UniRadioGroupChangeEvent) {
|
|
|
- this.compressed = parseInt(event.detail.value) == 1
|
|
|
- },
|
|
|
- timeoutInput(event : UniInputEvent) {
|
|
|
- this.timeoutStr = event.detail.value
|
|
|
- },
|
|
|
- getTimeout() : number {
|
|
|
- let value = parseInt(this.timeoutStr)
|
|
|
- // #ifdef APP-ANDROID
|
|
|
- if (value == NaN) {
|
|
|
- // #endif
|
|
|
- // #ifndef APP-ANDROID
|
|
|
- if (value !== value) {
|
|
|
- // #endif
|
|
|
- return 30
|
|
|
- } else {
|
|
|
- if (value < 1) {
|
|
|
- return 1
|
|
|
- } else if (value > 60 * 5) {
|
|
|
- return 60 * 5
|
|
|
- } else {
|
|
|
- return value
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
- .uni-title {
|
|
|
- padding: 10px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .uni-title-text {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .uni-camera-wrapper {
|
|
|
- display: flex;
|
|
|
- padding: 8px 13px;
|
|
|
- margin: 5px 0;
|
|
|
- flex-direction: row;
|
|
|
- flex-wrap: nowrap;
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .uni-camera-test-host {
|
|
|
- height: 28px;
|
|
|
- padding: 0px;
|
|
|
- flex: 1;
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .uni-camera-test-host-without-flex {
|
|
|
- height: 28px;
|
|
|
- padding: 0px;
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .uni-title-size {
|
|
|
- font-size: 22px;
|
|
|
- }
|
|
|
-</style>
|
|
|
-
|