uniapp难题

调用摄像头，调用相册

//点击头像调用摄像头，或者直接选择图片
<image @click="chooseImage" :src="imgShow" class="toux" mode=""></image>

//手机真机操作测试才能调用摄像头，相册图片，网页上只能选择图片
chooseImage() {
		var _this = this
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], //从相册选择、摄像头
			success: function(res) {
				_this.imgShow = res.tempFilePaths[0]
			}
		});
		// ass()
	},

调用相机相册/上传/扫码整理

// 调用相机相册
uni.chooseImage({
  	count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['camera','album'], //这要注意，camera掉拍照，album是打开手机相册
    success: (res)=> {
		console.log(res);
		const tempFilePaths = res.tempFilePaths;
    }
}); // api调完之后，会返还一个数组，带着照片的信息

// 调用上传API
uni.uploadFile({
	url: 'https://www.cailanzi001.com/api/v1/qiniu/upload/img', //服务器地址
	fileType:"image",//ZFB必填,不然报错
	filePath: tempFilePaths[0],//这个就是我们上面拍照返回或者先中照片返回的数组
	name: 'imgFile',
	success: (uploadFileRes) => {
		let imgData = JSON.parse(uploadFileRes.data)
		console.log(imgData.data.imgUrl);
		console.log(this);
		this.imgDataUrl = imgData.data.imgUrl
	}
});
// 调用上传接口，把我们拍的照片，或者手机相册选择的相册发送给对应的服务器，然后服务器会返回一个在线的图片地址给我，在html中写一个img标签 把url写给对应的src即可

// 扫码
uni.scanCode({
 	onlyFromCamera: true,//只允许拍照，不允许本地相册
	scanType:["qrCode"],//扫码类型 以为 二位 xxx
    success:  (res)=> {
        console.log('条码内容：' + res);
    }
});

调用H5端电脑摄像头进行拍照

首先安装依赖：npm i html2canvas

html样式:

<view  @click="test">进行拍摄</view>
<div>
  <!-- 这里就是摄像头显示的画面 -->
  <video id="video" width="400" height="300"></video>
  <div>
    <button   @click="takePhone" style="margin-top: 10px;">拍照</button>
  </div>
</div>
 
<div>图片截图画面</div>
  <!-- 这里是点击拍照显示的图片画面 -->
  <img  :src="imgUrl" ></img>
</div>

js代码

import html2canvas from 'html2canvas'
 
 
data() {
  return {
    imgUrl:"",
    blobFile: null,
    canvas: null,
    video:null,
    mediaStreamTrack: '',
    
  };
},
onShow() {
  // 摄像头
  this.video = document.querySelector('video');
},
  methods: {
    //点击拍照截图画面
     takePhone() {
             html2canvas(document.querySelector('video'), {
                 backgroundColor: null,
                 useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
             }).then((canvas) => {
                 let url = canvas.toDataURL('image/png');
                 this.imgUrl = url;
 
            })
      },
         test(){
              var video = document.querySelector('video');
              // 兼容代码
              window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
              if (navigator.mediaDevices === undefined) {
                  navigator.mediaDevices = {};
              }
              if (navigator.mediaDevices.getUserMedia === undefined) {
                  navigator.mediaDevices.getUserMedia = function(constraints) {
                      var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
                      if (!getUserMedia) {
                          return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                      }
                      return new Promise(function(resolve, reject) {
                          getUserMedia.call(navigator, constraints, resolve, reject);
                      });
                  }
              }
              //摄像头调用配置
              var mediaOpts = {
                  audio: false,
                  video: { facingMode: "user"} 
                  
              }
 
              let that=this;
              navigator.mediaDevices.getUserMedia(mediaOpts).then(function(stream) {
                  that.mediaStreamTrack = stream;
                  video = document.querySelector('video');
                  if ("srcObject" in video) {
                      video.srcObject = stream
                  } else {
                      video.src = window.URL && window.URL.createObjectURL(stream) || stream
                  }
                  video.play();
              }).catch(function (err) {
                  console.log(err)
              });
      },                      
    }

页面不能滚动

有些手机页面无法上下滚动是因为页面添加了overflow:hidden