zoukankan      html  css  js  c++  java
  • js vue 在页面中将摄像头放在一个标签里展示,(模仿手机拍照功能)

    1.HTML

    <video id="video" autoplay class="fileImg"></video>   
    <canvas id="canvas" width="640" height="480"></canvas>
     <div class="submitButton buttonData" @click="uploadImg">上传图片</div>
     

    2.JS

    <script>
        let aVideo = document.getElementById('video');
          let aCanvas = document.getElementById('canvas');
          let ctx = aCanvas.getContext('2d');
    
          navigator.getUserMedia = navigator.getUserMedia ||
              navigator.webkitGetUserMedia ||
              navigator.mozGetUserMedia ||
              navigator.msGetUserMedia; //获取媒体对象(这里指摄像头)
          navigator.getUserMedia({
              video: true
          }, gotStream, noStream); //参数1获取用户打开权限;参数二成功打开后调用,并传一个视频流对象,参数三打开失败后调用,传错误信息 
    
    
    function gotStream(stream) {
        video.src = URL.createObjectURL(stream);
        video.onerror = function() {
            stream.stop();
        };
        stream.onended = noStream;
        video.onloadedmetadata = function() {
            // alert('摄像头成功打开!');
        };
    }
    
    function noStream(err) {
        // alert(err);
    }
    
    function uploadImg(){
         ctx.drawImage(aVideo, 0, 0, 640, 480);
         alert(aCanvas.toDataURL('image/png'))     // 得到base64,需要后台将base64转换并上传到服务器,返回线上http路径
          const res = await fileUpload({imgStr: aCanvas.toDataURL('image/png')})   // 调取后台接口
    
          if (res.data.code == 0){
            this.headImage = res.data.data.string  //得到后台返回路径
            
          }
    }
    </script>
  • 相关阅读:
    洛谷 P1316丢瓶盖
    喵哈哈村的魔法考试 (1)
    英语 词根 词缀 查询网址
    洛谷 保龄球
    find函数
    图书管理员
    最大公约数和最小公倍数问题
    openjudge 错误探测
    函数 记忆化搜索模型
    JSon_零基础_002_将List类型数组转换为JSon格式的对象字符串,返回给界面
  • 原文地址:https://www.cnblogs.com/gqx-html/p/9965137.html
Copyright © 2011-2022 走看看