add page
This commit is contained in:
+162
-58
@@ -1,84 +1,188 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<!-- #ifdef APP -->
|
||||||
<text class="title">UniApp X 拍照测试</text>
|
<!-- <xf-ijk-view ref="ijkplayer" :style="{width:widthNum+'rpx',height:heightNum+'px',background:yanse}">
|
||||||
|
|
||||||
<image v-if="imageUrl" :src="imageUrl" mode="aspectFit" class="preview-image"></image>
|
</xf-ijk-view> -->
|
||||||
|
|
||||||
<button @click="takePhoto" type="primary">打开摄像头拍照</button>
|
<scroll-view class="page-scroll-view">
|
||||||
|
<!-- #endif -->
|
||||||
<text v-if="errorMsg" class="error-text">{{ errorMsg }}</text>
|
<view>
|
||||||
|
<!-- <video class="video" :src=videoPath :controls="true"></video> -->
|
||||||
|
<button @click="_toggleFlash">切换闪光灯</button>
|
||||||
|
<button @click="_toggledevice">切换前后置</button>
|
||||||
|
<button @click="_takePhoto">拍照</button>
|
||||||
|
<button @click="_setZoom">设置缩放</button>
|
||||||
|
<button @click="_startRecord">开始录像</button>
|
||||||
|
<button @click="_stopRecord">结束录像</button>
|
||||||
|
<button @click="_addFrameCallback">设置监听</button>
|
||||||
|
<button @click="_startFrame">开启监听</button>
|
||||||
|
<button @click="_stopFrame">关闭监听</button>
|
||||||
|
<xf-camera style="height:750rpx; background-color: red;" @error="onError" :flash="flash"
|
||||||
|
:position="device"></xf-camera>
|
||||||
|
<image v-if="imagePath" mode="aspectFit" :src="imagePath"></image>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- #ifdef APP -->
|
||||||
|
</scroll-view>
|
||||||
|
<!-- #endif -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="uts">
|
<script>
|
||||||
|
import {
|
||||||
|
//createCameraContext,
|
||||||
|
stopCameraFrame,
|
||||||
|
startCameraFrame,
|
||||||
|
onCameraFrameListener,
|
||||||
|
takePhoto,
|
||||||
|
startRecord,
|
||||||
|
stopRecord,
|
||||||
|
setZoom,
|
||||||
|
TakePhotoOption,
|
||||||
|
TakePhotoSuccessCallbackResult,
|
||||||
|
CameraContextSetZoomOption,
|
||||||
|
SetZoomSuccessCallbackResult,
|
||||||
|
CameraContextStartRecordOption,
|
||||||
|
GeneralCallbackResult,
|
||||||
|
CameraContextStopRecordOption,
|
||||||
|
StopRecordSuccessCallbackResult,
|
||||||
|
OnCameraFrameCallbackResult,
|
||||||
|
CameraFrameListenerStartOption,
|
||||||
|
StopOption,
|
||||||
|
OnCameraFrameListenerOption
|
||||||
|
} from '@/uni_modules/XF-cameraUTS'
|
||||||
|
|
||||||
|
// import {
|
||||||
|
// startVideo,
|
||||||
|
// StartVideoOption
|
||||||
|
// } from "@/uni_modules/XF-ijkplayerUTS";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
imageUrl: '' as string,
|
yanse: "red",
|
||||||
errorMsg: '' as string
|
widthNum: 750,
|
||||||
|
heightNum: 200,
|
||||||
|
|
||||||
|
flash: "on",
|
||||||
|
device: "front",
|
||||||
|
imagePath: "",
|
||||||
|
videoPath: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
takePhoto() {
|
onError(res : any) {
|
||||||
uni.chooseImage({
|
console.log(res)
|
||||||
count: 1,
|
|
||||||
sizeType: ['compressed'],
|
|
||||||
sourceType: ['camera'], // 只从相机选择
|
|
||||||
success: (res) => {
|
|
||||||
console.log('拍照成功:', res);
|
|
||||||
if (res.tempFilePaths && res.tempFilePaths.length > 0) {
|
|
||||||
this.imageUrl = res.tempFilePaths[0];
|
|
||||||
this.errorMsg = '';
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
fail: (err) => {
|
_toggleFlash() {
|
||||||
console.error('拍照失败:', err);
|
this.flash = this.flash == 'on' ? 'off' : 'on'
|
||||||
this.errorMsg = '拍照失败: ' + (err.errMsg || '未知错误');
|
console.log(this.flash)
|
||||||
|
},
|
||||||
|
_toggledevice() {
|
||||||
|
this.device = this.device == 'back' ? 'front' : 'back'
|
||||||
|
console.log(this.device)
|
||||||
|
|
||||||
// 权限被拒绝时引导用户去设置
|
},
|
||||||
if (err.errMsg && err.errMsg.includes('permission')) {
|
_takePhoto() {
|
||||||
uni.showModal({
|
takePhoto({
|
||||||
title: '权限提示',
|
success: (res : TakePhotoSuccessCallbackResult) => {
|
||||||
content: '您已拒绝摄像头权限，请在设置中开启',
|
console.log('takePhoto', res)
|
||||||
confirmText: '去设置',
|
this.imagePath = res.tempImagePath;
|
||||||
success: (res) => {
|
// _previewImage();
|
||||||
if (res.confirm) {
|
},
|
||||||
uni.openSetting();
|
fail: (res : GeneralCallbackResult) => {
|
||||||
|
console.log('takePhoto', res)
|
||||||
}
|
}
|
||||||
|
} as TakePhotoOption)
|
||||||
|
},
|
||||||
|
// _previewImage() {
|
||||||
|
// console.log('previewImage')
|
||||||
|
// // uni.previewImage({
|
||||||
|
// // urls: [this.imagePath],
|
||||||
|
// // complete(e : any) {
|
||||||
|
// // console.log(JSON.stringify(e))
|
||||||
|
// // }
|
||||||
|
// // });
|
||||||
|
// uni.previewImage({
|
||||||
|
// urls: ["https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"],
|
||||||
|
// current: 0,
|
||||||
|
// indicator: "number",
|
||||||
|
// loop: true,
|
||||||
|
// complete(e : any) {
|
||||||
|
// console.log(JSON.stringify(e))
|
||||||
|
// }
|
||||||
|
// } as PreviewImageOptions)
|
||||||
|
// },
|
||||||
|
_setZoom() {
|
||||||
|
setZoom({
|
||||||
|
zoom: Math.random() * 10,
|
||||||
|
success: (res : SetZoomSuccessCallbackResult) => {
|
||||||
|
console.log('setZoom', res.errMsg, res.zoom)
|
||||||
|
},
|
||||||
|
complete: (res : GeneralCallbackResult) => {
|
||||||
|
console.log('setZoom', res)
|
||||||
|
},
|
||||||
|
} as CameraContextSetZoomOption)
|
||||||
|
},
|
||||||
|
_startRecord() {
|
||||||
|
startRecord({
|
||||||
|
success(res : GeneralCallbackResult) {
|
||||||
|
console.log('startRecord', res)
|
||||||
|
},
|
||||||
|
complete(res : GeneralCallbackResult) {
|
||||||
|
console.log('startRecord', res)
|
||||||
|
},
|
||||||
|
} as CameraContextStartRecordOption)
|
||||||
|
},
|
||||||
|
_stopRecord() {
|
||||||
|
let that = this;
|
||||||
|
stopRecord({
|
||||||
|
success(result : StopRecordSuccessCallbackResult) {
|
||||||
|
console.log('stopRecord', result.tempVideoPath)
|
||||||
|
that.videoPath = result.tempVideoPath;
|
||||||
|
|
||||||
|
// startVideo({
|
||||||
|
// url: result.tempVideoPath,
|
||||||
|
// isAutoPlay: true,
|
||||||
|
// isLive: false,
|
||||||
|
// //headers: { "key1": 1, "key2": 2 },
|
||||||
|
// // options: { "op1": 1, "op2": 2 },
|
||||||
|
// success: (res) => {
|
||||||
|
// console.log(res)
|
||||||
|
// }
|
||||||
|
// } as StartVideoOption);
|
||||||
}
|
}
|
||||||
});
|
} as CameraContextStopRecordOption)
|
||||||
|
},
|
||||||
|
_addFrameCallback() {
|
||||||
|
onCameraFrameListener({
|
||||||
|
success: (res : OnCameraFrameCallbackResult) => {
|
||||||
|
console.log('onCameraFrame', res)
|
||||||
}
|
}
|
||||||
|
} as OnCameraFrameListenerOption)
|
||||||
|
},
|
||||||
|
_startFrame() {
|
||||||
|
startCameraFrame({
|
||||||
|
success: (res : GeneralCallbackResult) => {
|
||||||
|
console.log('startCameraFrame', res)
|
||||||
}
|
}
|
||||||
});
|
} as CameraFrameListenerStartOption)
|
||||||
|
},
|
||||||
|
_stopFrame() {
|
||||||
|
stopCameraFrame({
|
||||||
|
success: (res : GeneralCallbackResult) => {
|
||||||
|
console.log('stopCameraFrame', res)
|
||||||
|
}
|
||||||
|
} as StopOption)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.video {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
height: 200px;
|
||||||
align-items: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 36px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-image {
|
|
||||||
width: 500px;
|
|
||||||
height: 500px;
|
|
||||||
margin: 20px 0;
|
|
||||||
border: 2px solid #ddd;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-text {
|
|
||||||
color: #ff0000;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user