H5自定义相机，同时兼容IOS

H5自定义相机，同时兼容IOS

文章目录

由于H5和小程序自定义相机的方法不同，今天先讲一下H5自定义相机

---

---

前言

H5主要使用video、canvas标签

---

一、使用过程

先通过navigator.mediaDevices.getUserMedia调用摄像头，拍照通过canvas画图拿到base64格式的图片信息。

二、创建相机

const opencamera = () => {
    // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
    if (navigator.mediaDevices === undefined) {
      navigator.mediaDevices = {};
    }
    if (navigator.mediaDevices.getUserMedia === undefined) {
      navigator.mediaDevices.getUserMedia = function (constraints) {
        // 首先，如果有getUserMedia的话，就获得它
        var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

        // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
        if (!getUserMedia) {
          return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
        }

        // 否则，为老的navigator.getUserMedia方法包裹一个Promise
        return new Promise(function (resolve, reject) {
          getUserMedia.call(navigator, constraints, resolve, reject);
        });
      };
    }
    const constraints = {
      video: {
        facingMode: 'environment',
        // width: 720,
        // height: 1280,
        // width: { ideal: 1280 },
        // height: { ideal: 720 },
      },
      audio: false,
    };

    let promise = navigator.mediaDevices.getUserMedia(constraints);

    promise
      .then(stream => {
        let v = document.getElementById('v');
        if (v.srcObject !== undefined) {
          v.srcObject = stream;
        } else if (window.videoEl.mozSrcObject !== undefined) {
          v.mozSrcObject = stream;
        } else if (window.URL.createObjectURL) {
          v.src = window.URL.createObjectURL(stream);
        } else if (window.webkitURL) {
          v.src = window.webkitURL.createObjectURL(stream);
        } else {
          v.src = stream;
        }
        v.playsInline = true;
        v.onloadedmetadata = function () {
          v.play();
        };
      })

      .catch(err => {
        console.error(err.name + ': ' + err.message);
      });
  };

三 、HTML部分

<View className='camera-content'>
      <View className='top-box'>
        <View className='icon-left'>
          <Image className='img_self' src={flashValue ? flashActive : flash} onClick={flashBtn} />
        </View>
        <View className='icon' onClick={explainBtn}>
          <Image className='img_self' src={wenhao}></Image>
        </View>
      </View>

      <View className='content-box'>
        <View className='videoout'>
          <video id='v' className='video_self1'></video>
        </View>
        <View className='canvnsout'>
          <canvas id='canvas' className='canvns_self' />
        </View>
        <View className='tips_frame'></View>
        <View className='tips_div'>一次拍一页，将试卷置于框中，对准四个角</View>
      </View>

      <View className='bottom'>
        <View className='take_out'>
          <View className='icon-left' onClick={goback}>
            <Image className='img_self' src={icon_xxx}></Image>
          </View>

          {/* 按钮 */}
          <Image className='bnt' src={btn} mode='aspectFit' onClick={!showloading && takePhoto} />
          {/* 相册 */}
          <View className={duoTiPicture.length > 0 ? 'icon-photo' : 'icon'} onClick={openXiangCe}>
            {duoTiPicture.length > 0 ? (
              <Image className='img_self' src={duoTiPicture[duoTiPicture.length - 1].imageBase64}></Image>
            ) : (
              <Image className='img_self' src={ambule}></Image>
            )}
            {duoTiPicture.length > 0 ? <View className='jiaobiao'>{duoTiPicture.length}</View> : null}
          </View>
        </View>
      </View>


    </View>

四、拍照获取base64格式的图片

 const takePhoto = async () => {
    Taro.showLoading({
      title: '拍摄中',
    });
    setshowloading(true);
    // 用于拍摄快照的元素,添加canvas里面
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    const video = document.getElementById('v');
    // 获取视频的宽高
    const width = video.videoWidth;
    const height = video.videoHeight;
    // 设置canvas宽高与视频宽高一致
    canvas.width = width;
    canvas.height = height;

    // 绘制画面
    context.drawImage(video, 0, 0, width, height);
    // context.drawImage(video, 0, 0, 641, 668, 0, 0, 300, 300);
    const data = canvas.toDataURL('image/png');
    // 获取base64格式的图片
    console.log('data', data);

   
  };

总结

在H5使用video自定义相机时，测试需要使用https安全协议。移动端需要使用https才能调用，谷歌浏览器可以设置不验证https。
谷歌不验证https的地址

chrome://flags/#unsafely-treat-insecure-origin-as-secure

示例