115 lines
3.7 KiB
Markdown
115 lines
3.7 KiB
Markdown
# lime-camera 相机
|
||
- 参照小程序的`camera`组件和`createCameraContext`API实现。
|
||
|
||
## 安装
|
||
导入插件后，自定义基座再使用，请先试用后谨慎购买，一但购买没有退货。
|
||
|
||
### 基础使用
|
||
|
||
```html
|
||
<l-camera style="height:750rpx; background-color: aqua;" @error="onError" :flash="flash" :device-position="device"></l-camera>
|
||
<image v-if="imagePath" :src="imagePath"></image>
|
||
<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="startFrame">开启监听</button>
|
||
<button @click="stopFrame">关闭监听</button>
|
||
```
|
||
|
||
```js
|
||
import {
|
||
createCameraContext,
|
||
TakePhotoOption,
|
||
TakePhotoSuccessCallbackResult,
|
||
CameraContextSetZoomOption,
|
||
SetZoomSuccessCallbackResult,
|
||
CameraContextStartRecordOption,
|
||
GeneralCallbackResult,
|
||
CameraContextStopRecordOption,
|
||
StopRecordSuccessCallbackResult
|
||
} from '@/uni_modules/lime-camera'
|
||
const context = createCameraContext()
|
||
|
||
const flash = ref('off')
|
||
const device = ref('back')
|
||
const imagePath = ref('')
|
||
const onError = (err:any) => {
|
||
console.log('err', err)
|
||
}
|
||
|
||
const toggleFlash = ()=>{
|
||
flash.value = flash.value == 'on' ? 'off' : 'on'
|
||
}
|
||
const toggledevice = ()=>{
|
||
device.value = device.value == 'back' ? 'front' : 'back'
|
||
}
|
||
const takePhoto = ()=>{
|
||
let time = Date.now()
|
||
context.takePhoto({
|
||
success: (res:TakePhotoSuccessCallbackResult)=> {
|
||
console.log('takePhoto time', Date.now() - time)
|
||
imagePath.value = res.tempImagePath
|
||
console.log('takePhoto', res.tempImagePath)
|
||
}
|
||
} as TakePhotoOption)
|
||
}
|
||
const setZoom = ()=>{
|
||
context.setZoom({
|
||
zoom: Math.random() * 10,
|
||
success: (res:SetZoomSuccessCallbackResult)=> {
|
||
console.log('setZoom', res.errMsg, res.zoom)
|
||
}
|
||
} as CameraContextSetZoomOption)
|
||
}
|
||
|
||
const startRecord = ()=>{
|
||
context.startRecord({
|
||
success(res: GeneralCallbackResult){
|
||
console.log('startRecord')
|
||
}
|
||
} as CameraContextStartRecordOption)
|
||
}
|
||
const stopRecord = ()=>{
|
||
context.stopRecord({
|
||
success(result: StopRecordSuccessCallbackResult){
|
||
console.log('stopRecord', result.tempThumbPath)
|
||
}
|
||
} as CameraContextStopRecordOption)
|
||
}
|
||
let listener = context.onCameraFrame()
|
||
const startFrame = ()=>{
|
||
listener.start()
|
||
}
|
||
const stopFrame = ()=>{
|
||
listener.stop()
|
||
}
|
||
```
|
||
|
||
## Props
|
||
因为直接参照小程序`camera`组件，所以可以直接按[camera](https://uniapp.dcloud.net.cn/component/camera.html)文档来。但不支持扫码。扫码可以使用[lime-scan](https://ext.dcloud.net.cn/plugin?id=16452)
|
||
|
||
|
||
| 参数 | 说明 | 类型 | 默认值 |
|
||
| --------------------------| ------------------------------------------------------------ | ---------------- | ------------ |
|
||
| focus | 是否开启点击对焦 | <em>boolean</em> | `false` |
|
||
|
||
## 事件
|
||
|
||
| 参数 | 说明 | 类型 | 默认值 |
|
||
| --------------------------| ------------------------------------------------------------ | ---------------- | ------------ |
|
||
| @click | （event:UniEvent) => {} | <em>UniEvent</em> | |
|
||
|
||
|
||
## API
|
||
因为直接参照小程序`createcameracontext`API，所以可以直接按[createcameracontext](https://uniapp.dcloud.net.cn/api/media/camera-context.html#createcameracontext)文档来。<br>
|
||
但`onCameraFrame`里的回调中的data为`ImageProxy`
|
||
```ts
|
||
context.onCameraFrame((frame)=>{
|
||
// 这里是 ImageProxy
|
||
frame.data
|
||
})
|
||
```
|