|
@@ -1,259 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="live-camera" :style="{ width: windowWidth, height: windowHeight }">
|
|
|
- <view class="preview" :style="{ width: windowWidth, height: windowHeight - 80 }">
|
|
|
- <live-pusher id="livePusher" ref="livePusher" class="livePusher" mode="FHD" beauty="0" whiteness="0"
|
|
|
- :aspect="aspect" min-bitrate="1000" audio-quality="16KHz" device-position="back" :auto-focus="true"
|
|
|
- :muted="true" :enable-camera="true" :enable-mic="false" :zoom="false" @statechange="statechange"
|
|
|
- :style="{ width: cameraWidth, height: cameraHeight }"></live-pusher>
|
|
|
-
|
|
|
- <!--提示语-->
|
|
|
- <cover-view class="remind">
|
|
|
- <text class="remind-text" style="">{{ message }}</text>
|
|
|
- </cover-view>
|
|
|
-
|
|
|
- <!--辅助线-->
|
|
|
- <cover-view class="outline-box" :style="{ width: windowWidth, height: windowHeight - 80 }">
|
|
|
- <cover-image class="outline-img"
|
|
|
- :src="dotype == 'idcardface' ? '/static/live-camera/outline/idcardface.png' : '/static/live-camera/outline/idcardbadge.png'"
|
|
|
- style=""></cover-image>
|
|
|
- </cover-view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="menu">
|
|
|
- <!--底部菜单区域背景-->
|
|
|
- <cover-image class="menu-mask" src="/static/live-camera/bar.png"></cover-image>
|
|
|
-
|
|
|
- <!--返回键-->
|
|
|
- <cover-image class="menu-back" @tap="back" src="/static/live-camera/back.png"></cover-image>
|
|
|
-
|
|
|
- <!--快门键-->
|
|
|
- <cover-image class="menu-snapshot" @tap="start" src="/static/live-camera/shutter.png"></cover-image>
|
|
|
- <cover-image class="menu-snapshot" @tap="stop" src="/static/live-camera/shutter.png"></cover-image>
|
|
|
-
|
|
|
- <!--反转键-->
|
|
|
- <cover-image class="menu-flip" @tap="flip" src="/static/live-camera/flip.png"></cover-image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- let _this = null;
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- poenCarmeInterval: null, //打开相机的轮询
|
|
|
- dotype: 'face', //操作类型
|
|
|
- message: '', //提示
|
|
|
- aspect: '2:3', //比例
|
|
|
- cameraWidth: '', //相机画面宽度
|
|
|
- cameraHeight: '', //相机画面宽度
|
|
|
- windowWidth: '', //屏幕可用宽度
|
|
|
- windowHeight: '', //屏幕可用高度
|
|
|
- camerastate: false, //相机准备好了
|
|
|
- livePusher: null, //流视频对象
|
|
|
- snapshotsrc: null //快照
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(e) {
|
|
|
- _this = this;
|
|
|
- this.dotype = e.dotype;
|
|
|
- this.initCamera();
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- this.livePusher = uni.createLivePusherContext('livePusher', this);
|
|
|
- this.startPreview(); //开启预览并设置摄像头
|
|
|
- this.poenCarme();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //轮询打开
|
|
|
- poenCarme() {
|
|
|
- //#ifdef APP-PLUS
|
|
|
- if (plus.os.name == 'Android') {
|
|
|
- this.poenCarmeInterval = setInterval(function() {
|
|
|
- console.log(_this.camerastate);
|
|
|
- if (!_this.camerastate) _this.startPreview();
|
|
|
- }, 2500);
|
|
|
- }
|
|
|
- //#endif
|
|
|
- },
|
|
|
- //初始化相机
|
|
|
- initCamera() {
|
|
|
- //处理安卓手机异步授权问题
|
|
|
- uni.getSystemInfo({
|
|
|
- success: function(res) {
|
|
|
- _this.windowWidth = res.windowWidth;
|
|
|
- _this.windowHeight = res.windowHeight;
|
|
|
- _this.cameraWidth = res.windowWidth;
|
|
|
- _this.cameraHeight = res.windowWidth * 1.5;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- //开始预览
|
|
|
- startPreview() {
|
|
|
- this.livePusher.startPreview({
|
|
|
- success: a => {
|
|
|
- console.log(a);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- //停止预览
|
|
|
- stopPreview() {
|
|
|
- this.livePusher.stopPreview({
|
|
|
- success: a => {
|
|
|
- _this.camerastate = false; //标记相机未启动
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- //状态
|
|
|
- statechange(e) {
|
|
|
- console.log('````````````````````````````````````')
|
|
|
- //状态改变
|
|
|
- console.log(e);
|
|
|
- if (e.detail.code == 1007) {
|
|
|
- _this.camerastate = true;
|
|
|
- } else if (e.detail.code == -1301) {
|
|
|
- _this.camerastate = false;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- //返回
|
|
|
- back() {
|
|
|
- uni.navigateBack();
|
|
|
- },
|
|
|
- start: function() {
|
|
|
- console.log('开启直播流')
|
|
|
- this.livePusher.start({
|
|
|
- success: (a) => {
|
|
|
- console.log("livePusher.start:" + JSON.stringify(a));
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- stop: function() {
|
|
|
- console.log('结束直播流')
|
|
|
- this.livePusher.stop({
|
|
|
- success: (a) => {
|
|
|
- console.log("livePusher.end:" + JSON.stringify(a));
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //抓拍
|
|
|
- snapshot() {
|
|
|
-
|
|
|
- // this.livePusher.snapshot({
|
|
|
- // success: e => {
|
|
|
- // _this.snapshotsrc = e.message.tempImagePath;
|
|
|
- // _this.stopPreview();
|
|
|
- // _this.setImage();
|
|
|
- // uni.navigateBack();
|
|
|
- // }
|
|
|
- // });
|
|
|
- },
|
|
|
-
|
|
|
- //反转
|
|
|
- flip() {
|
|
|
- this.livePusher.switchCamera();
|
|
|
- },
|
|
|
-
|
|
|
- //设置
|
|
|
- setImage() {
|
|
|
- let pages = getCurrentPages();
|
|
|
- let prevPage = pages[pages.length - 2]; //上一个页面
|
|
|
-
|
|
|
- //直接调用上一个页面的setImage()方法,把数据存到上一个页面中去
|
|
|
- prevPage.$vm.setImage({
|
|
|
- path: _this.snapshotsrc,
|
|
|
- dotype: this.dotype
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .live-camera {
|
|
|
- .preview {
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .outline-box {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 99;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .outline-img {
|
|
|
- width: 750rpx;
|
|
|
- height: 1125rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .remind {
|
|
|
- position: absolute;
|
|
|
- top: 880rpx;
|
|
|
- width: 750rpx;
|
|
|
- z-index: 100;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .remind-text {
|
|
|
- color: #dddddd;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- width: 750rpx;
|
|
|
- height: 180rpx;
|
|
|
- z-index: 98;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .menu-mask {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- width: 750rpx;
|
|
|
- height: 180rpx;
|
|
|
- z-index: 98;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-back {
|
|
|
- position: absolute;
|
|
|
- left: 30rpx;
|
|
|
- bottom: 50rpx;
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- z-index: 99;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-snapshot {
|
|
|
- width: 130rpx;
|
|
|
- height: 130rpx;
|
|
|
- z-index: 99;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-flip {
|
|
|
- position: absolute;
|
|
|
- right: 30rpx;
|
|
|
- bottom: 50rpx;
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- z-index: 99;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|