解决摄像头问题

center/scan.vue

@@ -6,7 +6,8 @@
 		    <view class="video-container">
 		      <video class="video" id="video_nav_id" :controls="false"></video>
 		    </view>
-		    <view class="camera-container" v-if="videoInputDevices.length>1">
+			<!-- v-if="videoInputDevices.length>1" -->
+		    <view class="camera-container" >
 		      <label>摄像头：</label>
 		      <select v-model="currentVideoInputDevice">
 		        <option
@@ -43,7 +44,11 @@
 		},
 		beforeDestroy() {
 			this.codeReader.reset(); //关闭摄像头
-			alert('销毁')
+			// alert('销毁')
+		},
+		onHide(){
+			// alert('销毁')
+			this.codeReader.reset(); //关闭摄像头
 		},
 		mounted() {
 			var video = document.getElementById('video_nav_id').getElementsByTagName('video')[0]
@@ -73,8 +78,11 @@
 			        .then((videoInputDevices) => {
 			          if (videoInputDevices && videoInputDevices.length) {
 			            if (videoInputDevices.length > 1) {
-			              videoInputDevices.reverse();
-			            } //防止先唤出前摄像头
+			              // videoInputDevices.reverse();
+						  // 把前置摄像头设置默认
+						  let secondElement = videoInputDevices.splice(1, 1)[0]; // 从索引为 1 的位置删除一个元素并返回它
+						  videoInputDevices.splice(0, 0, secondElement); // 在索引为 0 的位置插入第二个元素
+			            } //有多个摄像头的情况
 			            _this.videoInputDevices = videoInputDevices;
 			            _this.currentVideoInputDevice = videoInputDevices[0];
 			          }else{
@@ -136,7 +144,7 @@
 
 <style lang="scss" scoped>
 #video_nav_id {
-	height: 100%;
+	height: 80vh;
 	width: 100%;
 }
 /deep/.uni-video-cover {
@@ -156,8 +164,9 @@ z-index: 9999;
   height: 100vh;
   background: #000;
   .video-container {
+	  margin-top: 20px;
 	width: 100%;
-	height: 100%;
+	height: 75vh;
     display: flex;
     justify-content: center;
     /deep/ #video-1{
@@ -167,13 +176,14 @@ z-index: 9999;
     @media (min-width: 500px) {
       video {
         // width: 80vh;
-        max-width: 96vw;
+        // max-width: 96vw;
         height: 80vh;
       }
     }
   }
   .camera-container {
-    margin-top: 5vh;
+	  position: relative;
+    margin-top: 10px;
     width: 80%;
     height: 50px;
     line-height: 44px;
@@ -181,13 +191,16 @@ z-index: 9999;
     border: 3px solid #ff9900;
     display: flex;
     justify-content: center;
+	align-items: center;
+	padding-left: 8px;
     select {
-      width: calc(100% - 80px);
+      width: calc(100% - 90px);
       color: #ff9900;
       background: transparent;
       border: none;
       outline: none;
     }
+	z-index: 100;
   }
   .close{
 	  position: absolute;

pages/index/index.vue

@@ -43,25 +43,6 @@
 			</view>
 			<u-empty mode="data" :text="emptyText" v-if="showEmpty&&!showResult"></u-empty>
 			
-			<view class="scan" v-show="showScan">
-				<!-- <view class="loop_line"></view> -->
-				<u-icon class="close" name="close-circle" color="#fff" size="30" @click="closeScan"></u-icon>
-			    <view class="video-container">
-			      <video class="video" id="video_nav_id" :controls="false"></video>
-			    </view>
-			    <view class="camera-container" v-if="videoInputDevices.length">
-			      <label>摄像头：</label>
-			      <select v-model="currentVideoInputDevice">
-			        <option
-			          v-for="(videoInputDevice, index) in videoInputDevices"
-			          :key="index"
-			          :value="videoInputDevice"
-			        >
-			          {{ videoInputDevice.label }}
-			        </option>
-			      </select>
-			    </view>
-			  </view>
 
 			<tabbar :tabbarIndexProps='0' />
 		</view>
@@ -86,11 +67,6 @@ import { LOG } from "@zxing/library/esm/core/datamatrix/encoder/constants";
 		data() {
 			return {
 			  exchangeCode:'',
-			  codeReader: null,
-			  videoInputDevices: [],
-			  currentVideoInputDevice: {},
-			  decodeResult: undefined,
-			  showScan:false,
 			  checkGoods:{},
 			  showResult:false,
 			  emptyText:'',
@@ -105,24 +81,14 @@ import { LOG } from "@zxing/library/esm/core/datamatrix/encoder/constants";
 
 		},
 		mounted() {
-			var video = document.getElementById('video_nav_id').getElementsByTagName('video')[0]
-			video.setAttribute('id','video-1')
-			video.setAttribute('class','video_calss')
-			this.codeReader = new BrowserMultiFormatReader();
 		},
 		onShow() {
 			
 		},
 		beforeDestroy() {
-			this.codeReader.reset(); //关闭摄像头
+			
 		},
 		 watch: {
-		    currentVideoInputDevice: function () {
-		      this.decodeFromInputVideo();
-		    },
-		    decodeResult: function () {
-		      this.successDecode();
-		    },
 			exchangeCode:{
 				handler(val){
 					if(val.length>=8){
@@ -159,66 +125,17 @@ import { LOG } from "@zxing/library/esm/core/datamatrix/encoder/constants";
 					console.log('check',err);
 				})
 			},
-			closeScan(){
-				this.showScan = false;
-			},
 			async openScan() {
-				uni.$u.route('/center/scan');
-				return
-			      const _this = this;
-				  // console.log('codeReader', this.codeReader);
-				  // camera.setDisplayOrientation(90);
-				  this.showScan = true;
-			      _this.codeReader
-			        .getVideoInputDevices() //老版本listVideoInputDevices()
-			        .then((videoInputDevices) => {
-			          if (videoInputDevices && videoInputDevices.length) {
-			            if (videoInputDevices.length > 1) {
-			              videoInputDevices.reverse();
-			            } //防止先唤出前摄像头
-			            _this.videoInputDevices = videoInputDevices;
-			            _this.currentVideoInputDevice = videoInputDevices[0];
-			          }
-			        })
-			        .catch(() => {});
-			    },
-			
-			    decodeFromInputVideo() {
-			      const _this = this;
-			      _this.codeReader.reset();
-			      // 多次
-				try {
-					_this.codeReader.decodeFromVideoDevice(_this.currentVideoInputDevice.deviceId, 'video-1',(res,err) => {
-						if(res) {
-							_this.decodeResult = res.text;
-						}
-						if (err) {
-												  // alert(err)
-						  if (err instanceof ChecksumException) {
-													alert("A code was found, but it's read value was not valid.")
-						    console.log(
-						      "A code was found, but it's read value was not valid."
-						    );
-						  }
-						  if (err instanceof FormatException) {
-													alert("A code was found, but it was in a invalid format.")
-						    console.log("A code was found, but it was in a invalid format.");
-						  }
-						}
-					})
-				}catch(err){
-					uni.showToast({title: `初始化失败${err}`,icon: 'none'});
-				}
+				// uni.$u.route('/center/scan');
+				uni.navigateTo({
+					url:'/center/scan',
+					fail(e) {
+						console.log('navigateTo',e);
+					}
+				})
+				
 			},
 			
-			successDecode() {
-			  const _this = this;
-			  let result = JSON.parse(_this.decodeResult);
-			  this.exchangeCode = result.qrcode;
-			  this.closeScan();
-			  this.getCheckGoods();
-			  // alert(_this.decodeResult);
-			},
 		}
 	}
 </script>