99 lines
2.2 KiB
Plaintext
99 lines
2.2 KiB
Plaintext
<template>
|
|
<view>
|
|
<view v-if="isPreviewing" class="live-container">
|
|
<cover-view class="pusher-container">
|
|
<live-pusher
|
|
id="livePusher"
|
|
class="livePusher"
|
|
:muted="true"
|
|
:enable-camera="true"
|
|
:auto-focus="true"
|
|
:beauty="0"
|
|
:whiteness="0"
|
|
aspect="9:16"
|
|
mode="SD"
|
|
></live-pusher>
|
|
</cover-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getPhoneEnvBool } from '@/common/common';
|
|
import { onMounted, ref, reactive, nextTick } from 'vue';
|
|
const livePusherContext = ref(null);
|
|
const isPreviewing = ref(false);
|
|
const init = (componentProxy) => {
|
|
livePusherContext.value = uni.createLivePusherContext('livePusher', componentProxy);
|
|
livePusherContext.value.switchCamera()
|
|
};
|
|
// 切换摄像头
|
|
const switchCamera = () => {
|
|
livePusherContext.value?.switchCamera({
|
|
success: (res) => {
|
|
console.log('livePusher.switchCamera:', JSON.stringify(res));
|
|
},
|
|
fail: (err) => {
|
|
console.error('切换摄像头失败:', err);
|
|
}
|
|
});
|
|
};
|
|
|
|
// 开启预览
|
|
const startPreview = () => {
|
|
console.log('摄像头开启预览');
|
|
isPreviewing.value = true;
|
|
nextTick(() => {
|
|
livePusherContext.value?.startPreview({
|
|
success: (res) => {
|
|
console.log('摄像头开启成功');
|
|
},
|
|
fail: (err) => {
|
|
console.error('开启预览失败:', err);
|
|
},
|
|
complete: (err) => {
|
|
console.error('complete预览:', err);
|
|
}
|
|
});
|
|
|
|
if (getPhoneEnvBool('AND')) {
|
|
console.log('切换前置');
|
|
}
|
|
});
|
|
};
|
|
|
|
// 关闭预览
|
|
const stopPreview = () => {
|
|
console.log('关闭预览');
|
|
livePusherContext.value?.stopPreview({
|
|
success: (res) => {
|
|
console.log('livePusher.stopPreview:', JSON.stringify(res));
|
|
},
|
|
fail: (err) => {
|
|
console.error('关闭预览失败:', err);
|
|
},
|
|
complete: (err) => {
|
|
console.error('complete预览:', err);
|
|
}
|
|
});
|
|
isPreviewing.value = false;
|
|
};
|
|
defineExpose({ init, switchCamera, stopPreview, startPreview });
|
|
</script>
|
|
|
|
<style scoped>
|
|
.live-container {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 150rpx;
|
|
overflow: hidden;
|
|
border-radius: 20rpx;
|
|
width: 270rpx;
|
|
height: 480rpx;
|
|
}
|
|
.pusher-container{
|
|
overflow: hidden;
|
|
border-radius: 20rpx;
|
|
}
|
|
</style>
|