xsl/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add page

Browse Source
This commit is contained in:
xsl
2026-03-11 17:30:11 +08:00
parent dad30d1317
commit 8bb7a58b5e
1 changed files with 181 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/index.uvue
+178 -74
View File
@@ -1,84 +1,188 @@
<template>
<view class="container">
<text class="title">UniApp X 拍照测试</text>
<!-- #ifdef APP -->
<!-- <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>
<text v-if="errorMsg" class="error-text">{{ errorMsg }}</text>
</view>
<scroll-view class="page-scroll-view">
<!-- #endif -->
<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>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
export default {
data() {
return {
imageUrl: '' as string,
errorMsg: '' as string
}
},
methods: {
takePhoto() {
uni.chooseImage({
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) => {
console.error('拍照失败:', err);
this.errorMsg = '拍照失败: ' + (err.errMsg || '未知错误');
<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'
// 权限被拒绝时引导用户去设置
if (err.errMsg && err.errMsg.includes('permission')) {
uni.showModal({
title: '权限提示',
content: '您已拒绝摄像头权限，请在设置中开启',
confirmText: '去设置',
success: (res) => {
if (res.confirm) {
uni.openSetting();
}
}
});
}
}
});
}
}
}
// import {
// startVideo,
// StartVideoOption
// } from "@/uni_modules/XF-ijkplayerUTS";
export default {
data() {
return {
yanse: "red",
widthNum: 750,
heightNum: 200,
flash: "on",
device: "front",
imagePath: "",
videoPath: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
}
},
onLoad() {
},
methods: {
onError(res : any) {
console.log(res)
},
_toggleFlash() {
this.flash = this.flash == 'on' ? 'off' : 'on'
console.log(this.flash)
},
_toggledevice() {
this.device = this.device == 'back' ? 'front' : 'back'
console.log(this.device)
},
_takePhoto() {
takePhoto({
success: (res : TakePhotoSuccessCallbackResult) => {
console.log('takePhoto', res)
this.imagePath = res.tempImagePath;
// _previewImage();
},
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>
<style>
.container {
display: flex;
flex-direction: column;
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;
}
.video {
width: 100%;
height: 200px;
}
</style>