PC端获取摄像头或摄像头列表，获取摄像头画面拍照上传后台，展示处理结果

在网上找了很多，结合他们自己写了一个的 （VUE的）可能还不太好，新手一个多多关照
1、这个页面上是获取到的摄像头列表，上代码
this.$store.state.constraints这是 vuex —state里定义的constraints存放摄像头数据， 这里还有个小坑，后面会说

<template>
  <div>
    <el-table :data="exArray" style="width: 100%;">
      <el-table-column label="排序" min-width="100">
        <template slot-scope="scope">
          <span>{
   
   {scope.$index}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="label" label="摄像头名称" align="center" min-width="200"></el-table-column>
      <el-table-column prop="name" label="启动摄像头" align="center" min-width="200">
        <template slot-scope="scope">
          <el-button class="examines" type="primary" @click="examine(scope.row,scope.$index)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
    //摄像头数据
      exArray: []
    }
  },
  methods: {
    //查看
    examine(val, index) {
     //跳转的页面
      this.$router.push('./camera')
      console.log(val)
      //把点击的摄像头数据存放到vuex里
      this.$store.state.constraints = {
        video: {
          deviceId: { exact: this.exArray[index].id }
        }
      }
    }
  },
  mounted() {
    console.log("流式数据分析")
    let _this = this

    console.log(window.navigator.mediaDevices.enumerateDevices(), "4525555")
    //获取到当前设备的摄像头参数
    window.navigator.mediaDevices.enumerateDevices()
      .then(function (devices) {
        devices.forEach(function (device) {
          if (device.kind == "videoinput") {
            _this.exArray.push({
              'label': device.label,
              'id': device.deviceId,
              "width": 500,
              "height": 500
            })
          }
        });
        var mediaOpts =
        {
          video:
          {
            deviceId: { exact: _this.exArray }
          }
        };
        console.log(mediaOpts)
      })
      .catch(function (err) {
        console.log(err.name + ": " + err.message);
        _this.$message({
          type: 'error',
          message: '获取摄像头失败'
        })
      });
  }
}
</script>

<style>
</style>

2、点击查看跳转页面到摄像头拍摄页面，点击开启摄像头，自动拍照传给后台，返回处理后的结果，点击关闭摄像头停止拍照、关闭摄像头

<template>
  <div class="camear">
    <Backspace-Key :Urlkey="Urlkey"></Backspace-Key>
    <div class="left_videos">
      <h2>摄像头拍摄画面</h2>
      <div class="button">
        <el-button id="okbtn" type="primary" @click="getMedia()">开启摄像头</el-button>
        <el-button id="okbtn1" type="primary" @click="closeMedia()">关闭摄像头</el-button>
        <el-select v-model="value" placeholder="请选择模式">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div style="height:90%">
        <video
          id="video"
          style="width:100%;height:100%"
          controls
          autoplay="autoplay"
        >您的浏览器不支持 video 标签</video>
      </div>
    </div>
    <div class="left_videos">
      <h2>流式数据分析结果</h2>
      <div class="button"></div>
      <div class="imgage" style="height:90%">
        <img :src="imgs" alt style="width: 90%; display:block;" />
      </div>
    </div>
    //canvas 这个展示的是拍照的画面，想要看的话吧v-show删了
      <canvas id="canvas" v-show="this.show==false"></canvas>
  </div>
</template>

<script>
import { camImg, model } from './camera'
import BackspaceKey from './../publicPlace/backspaceKey'
export default {
  data() {
    return {
      MediaStreamTrack: null,
      timer: null,
      //图片路径
      imgs: null,
      show: true,
      Urlkey: "/user",
      options: [{
        value: '0',
        label: 'xx'
      }, {
        value: '1',
        label: 'xx'
      }, {
        value: '2',
        label: 'xx'
      }, {
        value: '3',
        label: 'xx'
      }],
      value: '0'，
      imgEditerPlugin: null
    }
  },
  components: {
    BackspaceKey //返回键
  },
  methods: {

    getMedia() {
      let _this = this;
      //获得video摄像头区域
      let video = document.getElementById("video");
      //从vuex里把摄像头数据constraints 拿过来
      console.log(_this.$store.state.constraints)
      /*
      这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
      这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
      返回的是一个Promise对象。
      如果用户同意使用权限,则会将 MediaStream 对象作为resolve()的参数传给then()
      如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError 作为 reject()的参数传给catch()
      */
      let promise = navigator.mediaDevices.getUserMedia(_this.$store.state.constraints);
      promise.then(function (MediaStream) {
        console.log(MediaStream)
        _this.MediaStreamTrack = typeof MediaStream.stop === 'function' ? MediaStream : MediaStream.getTracks()[0];
        video.srcObject = MediaStream;
        video.play();
        _this.$message({
          type: 'success',
          message: '开启摄像头'
        })
      }).catch(function (PermissionDeniedError) {
        console.log(PermissionDeniedError);

      })
      this.timer = setInterval(function () {
        console.log("2")
        _this.takePhoto()
        _this.toBase64()

      }, 300)
    },
    //照相
    async takePhoto() {
      //获得Canvas对象
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, 500, 500);
    },
    //关闭摄像头
    closeMedia() {
      this.MediaStreamTrack && this.MediaStreamTrack.stop();
      window.clearInterval(this.timer)
      this.$message({
        type: 'error',
        message: '关闭摄像头'
      })
    },
    //上传照片
    async toBase64() {
      //获得Canvas对象
      let canvas = document.getElementById("canvas");
      //从画布上获取照片数据  
      var imgData = canvas.toDataURL();
      console.log(imgData)
      //将图片转换为Base64  
      var base64Data = imgData.substr(22);
      // console.log("base64Data:" + base64Data);
      const data = {
        data: base64Data
      }
      const res = await camImg(data)
      console.log(res)
      if (res.status == 'fail') {
        this.$message({
          type: 'success',
          message: '数据获取失败!'
        })
      } else {
        this.imgs = "data:image/jpg;base64," + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        console.log(this.imgs)
      }
    },
    //模型选择
    async Model() {
      const data = {
        "modelselect": this.value
      }
      console.log(this.value)
      const res = await model(JSON.stringify(data))
      if (res.status == 'ok') {
        this.$message({
          message: '模型选择失败',
          type: 'error'
        });
      }
    },
    resizeCanvas() {
      var canvas = document.getElementById('canvas');
      canvas.width = 500;
      canvas.height = 500;
    },

  },
  created() {
  },
  mounted() {
    window.addEventListener("resize", this.resizeCanvas(), false);

  },
  destroyed() {

  }

}
</script>

<style scoped>
.camear {
  width: 100%;
  height: 100%;
  display: flex;
}
h2 {
  width: 100%;
}
.left_videos {
  width: 40%;
  text-align: center;
}
.left_videos2 {
  width: 20%;
}
.imgage {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.button {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
}
.el-select {
  width: 200px;
}
.el-input__inner {
  width: 200px;
}

</style>

项目打包上线了，出现了一个问题摄像头获取不到了，这个navigator.mediaDevices.enumerateDevices()方法报undefined,不知道是什么情况，在网上查到了是因为浏览器问题

https://blog.csdn.net/m0_37924554/article/details/100090880?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

谷歌浏览器
1、地址栏输入：chrome://flags
2、搜索：unsafely-treat-insecure-origin-as-secure

好了这就OK了

摄像头获取列表参考的作者（这是主要给我启发的）
https://www.cnblogs.com/fyssl/p/11280449.html
https://blog.csdn.net/yjie970715/article/details/105787582/