直接上代码吧  拿去用就对了  我看的别个的修改过来的  他是小程序写的

转载地址：https://blog.csdn.net/zzwwjjdj1/article/details/79374338

我用mpvue 稍微改动了一下  用起没的问题

这是整个vue文件  需要的拿去改改就可以用了 很方便   

<template>
  <div class="identify">
    <div class="window">
      <image
        class="cover-9"
        :src="tempImagePath"
        @click="img"
        v-if="type=='takePhoto'"
      ></image>
      <video
        class="cover-9"
        :src="tempVideoPath"
        poster="tempThumbPath"
        v-if="type=='startRecord'"
      ></video>
      <div class="window-2">
        <button
          @click="open"
          type="primary"
          data-type="takePhoto"
        >拍照</button>
        <button
          @click="open"
          type="primary"
          data-type="startRecord"
        >录制</button>
      </div>
    </div>

    <camera
      class="camera"
      :device-position="device?'front':'back'"
      v-if="camera"
      flash="off"
    >
      <cover-view
        class="cover-1"
        @click="cameraselect"
      >
        <cover-view class="cover-2">
          <cover-view
            class="cover-5"
            v-if="type=='startRecord'&& startRecord"
          >{{time}}S</cover-view>
        </cover-view>
      </cover-view>
      <cover-image
        class="cover-3"
        src="https://img-blog.csdn.net/20180226111545178"
        style="width:60rpx;height:60rpx;"
        @click="close"
      ></cover-image>
      <cover-image
        class="cover-4"
        src="https://img-blog.csdn.net/20180226111559273"
        style="width:60rpx;height:60rpx;"
        @click="devicePosition"
      ></cover-image>
    </camera>
  </div>

</template>

<script>
import request from "@/utils/index.js";
import config from "../../utils/config.json";
import store from "@/store.js";
export default {
  data() {
    return {
      device: true,
    tempImagePath: "", // 拍照的临时图片地址
    tempThumbPath: "", // 录制视频的临时缩略图地址
    tempVideoPath: "", // 录制视频的临时视频地址
    camera: false,
    ctx: {},
    type: "takePhoto",
    startRecord: false,
    time: 0,
    timeLoop: "",

    };
  },
  watch: {},
  mounted() {
    
    // this.setData({
      this.ctx= wx.createCameraContext()
    // })
  },
  watch: {},

  methods: {
      // 切换相机前后置摄像头
  devicePosition() {
    // this.setData({
    //   device: !this.data.device,
    // })
    this.device=!this.device,
    console.log("当前相机摄像头为:", this.device ? "后置" : "前置");
  },
  cameraselect() {
    // let { ctx, type, startRecord } = this.data;
    // 拍照
    if (this.type == "takePhoto") {
      console.log("拍照");
      this.ctx.takePhoto({
        quality: "normal",
        success: (res) => {
          // console.log(res);
          // this.setData({
          //   tempImagePath: res.tempImagePath,
          //   camera: false,
          // });
          
            this.tempImagePath= res.tempImagePath,
            this.camera= false,
         
          wechat.uploadFile("https://xx.xxxxxx.cn/api/upload", res.tempImagePath, "upload")
            .then(d => {
              console.log(d);
            })
            .catch(e => {
              console.log(e);
            })
        },
        fail: (e) => {
          console.log(e);
        }
      })
    }
    // 录视频
    else if (this.type == "startRecord") {
      if (!this.startRecord) {
        console.log("开始录视频");
        // this.setData({
        //   startRecord: true
        // });
        this.startRecord=true
        // 30秒倒计时
        let t1 = 0;
        let timeLoop = setInterval(() => {
          t1++;
          // this.setData({
          //   time: t1,
          // })
          this.time=t1
          // 最长录制30秒
          if (t1 == 30) {
            clearInterval(timeLoop);
            this.stopRecord(this.ctx);
          }
        }, 1000);
        // this.setData({
          this.timeLoop=timeLoop
        // })
        // 开始录制
        this.ctx.startRecord({
          success: (res) => {
            console.log(res);
          },
          fail: (e) => {
            console.log(e);
          }
        })
      }
      else {
        this.stopRecord(this.ctx);
      }
    }
  },
// 停止录制
  stopRecord(ctx) {
    console.log("停止录视频");
    clearInterval(this.timeLoop);
    ctx.stopRecord({
      success: (res) => {
        // this.setData({
          this.tempThumbPath= res.tempThumbPath,
          this.tempVideoPath= res.tempVideoPath,
          this.camera=false,
          this.startRecord= false,
          this.time= 0
        // });
        wechat.uploadFile("https://xx.xxxxxx.cn/api/upload", res.tempThumbPath, "tempThumbPath")
          .then(d => {
            console.log(d);
            return wechat.uploadFile("https://xx.xxxxxx.cn/api/upload", res.tempVideoPath, "tempVideoPath")
          })
          .then(d => {
            console.log(d);
          })
          .catch(e => {
            console.log(e);
          })
      },
      fail: (e) => {
        console.log(e);
      }
    })
  },
  // 
// 打开模拟的相机界面
  open(e) {
    let { type } = e.target.dataset;
    console.log(e.target.dataset)
    console.log(e)
    // console.log("开启相机准备", type == "takePhoto" ? "拍照" : "录视频");
    // this.setData({
      this.camera=true
      this.type=type
    // })
  },
  // 关闭模拟的相机界面
  close() {
    console.log("关闭相机");
    // this.setData({
      this.camera=false
    // })
  },

    // takePhoto() {
    //   const ctx = wx.createCameraContext();
    //   ctx.takePhoto({
    //     quality: "high",
    //     success: res => {
    //       console.log(res.tempImagePath);
    //       this.srcfrom = res.tempImagePath;
    //     }
    //   });
    // },
    // error(e) {
    //   console.log(e.detail);
    // }
  }
};
</script>
<style>
.identify {
  /* display: flex;
  flex-direction: column;
  align-items: center; */
  width: 100%;
  height: 100%;
  /* font-size: 12pt;
  
  box-sizing: border-box;
  background-color: #eee eee;
  color: #a5a5a5; */
}
page{
  height: 100%;
}

.window{
  width: 100%;
  height: 100%;
  position: absolute;
}
.window-2{
  display: flex;
  flex-direction: row;
}
.camera{
  width: 100%;
  height: 100%;
}
 
.cover-1{
  width: 150rpx;
  height: 150rpx;
  border-radius: 150rpx;
  background-color: #dedcdc;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 60rpx;
  left: 300rpx;
}
.cover-3{
  position: absolute;
  bottom: 105rpx;
  left:135rpx;
}
.cover-9{
  width: 728rpx;
  height: 80%;
  margin: 0 10rpx;
  border:2rpx solid;
  border-radius:5px;  
}
button{
  margin: 0 10rpx;
  width: 100%;
}
.cover-4{
  position: absolute;
  top: 60rpx;
  right:40rpx;
}
.cover-2{
  width: 110rpx;
  height: 110rpx;
  border-radius: 110rpx;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color:#da2121;
  font-size: 32rpx;
}

</style>