Vueはコンピュータカメラを呼び出して写真機能を実現します

<テンプレート>
  <div class="カメラボックス" style="幅: 900px;">
    <el-row :gutter="20">
      <el-col :span="12">
        <div style="text-align: center;font-size: 14px;font-weight: bold;margin-bottom: 10px;">カメラ</div>
        <!-- これはカメラで表示された画面です-->
        <ビデオ id="ビデオ" 幅="400" 高さ="300"></ビデオ>
        <div class="iCenter">
          <el-button type='primary' size='small' icon="el-icon-camera" @click="takePhone" style="margin-top: 10px;">写真を撮る</el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="text-align: center;font-size: 14px;font-weight: bold;margin-bottom: 10px;">写真効果</div>
        <!-- クリックして写真を撮ると表示される画像画面です -->
        <canvas id='canvas' width='400' height='300' style="display: block;"></canvas>
        <el-button :loading="loadingbut" icon="el-icon-check" type='primary' size='small' @click="takePhoneUpfile" style="margin-top: 10px;">保存</el-button>
      </el-col>
    </el-row>
</div>
</テンプレート>
<スクリプト>
  「@/api/customer/animalinfo」から {putFileAttach} をインポートします。
  エクスポートデフォルト{
    小道具:{
      tackPhoto:{//親コンポーネントから渡される状態タイプ: ブール値、
        デフォルト:false
      }
    },
    データ（） {
      戻る {
        読み込み中:false、
        preViewVisible: false、
        blobFile: null、
        キャンバス: null、
        ビデオ: null、
        メディアストリームトラック: '',
      }
    },
    時計：{
      タック写真:{
        即時: true、
        ハンドラー (newVal){//撮影ステータスを受け取った後、カメラの権限の取得を開始します。関数がコンポーネント内にある場合、以下の手順を独自のトリガーメソッドに直接記述できます。if (newVal) {
            var ビデオ = document.querySelector('ビデオ');
            var テキスト = document.getElementById('テキスト');
            // var mediaStreamTrack;
            
            // 互換性のあるコード window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
            
            navigator.mediaDevices が未定義の場合 {
            ナビゲーター.mediaDevices = {};
            }
            navigator.mediaDevices.getUserMedia が未定義の場合 {
            navigator.mediaDevices.getUserMedia = 関数(制約) {
              var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
              if (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia はこのブラウザに実装されていません'));
              }
              新しいPromise(function(resolve,reject)を返す{
              getUserMedia.call(ナビゲーター、制約、解決、拒否);
              });
            }
            } 
            
            //カメラ呼び出し設定 var mediaOpts = {
            オーディオ: 偽、
            ビデオ: 本当、
            video: { facingMode: "environment"} // または "user"
            // ビデオ: { 幅: 1280、高さ: 720 }
            // video: { facingMode: { exact: "environment" } } // または "user"
            }

            that=this とします。
            navigator.mediaDevices.getUserMedia(mediaOpts).then(function(stream) {
            that.mediaStreamTrack = ストリーム;
            ビデオ = document.querySelector('ビデオ');
            if (ビデオ内の「srcObject」) {
              video.srcObject = ストリーム
            } それ以外 {
              video.src = window.URL && window.URL.createObjectURL(stream) || ストリーム
            }
            ビデオを再生します。
            }).catch(関数(エラー) {
              コンソール.log(エラー)
            });
          
        }
       },
        深い:本当
      },
    },
    マウント() {
      // カメラ this.video = document.getElementById('video');
      //キャンバス this.canvas = document.getElementById('canvas')
      
    },
    メソッド: {
      takePhone(){//クリックして写真を撮ります。let that = this;
        that.canvas.getContext('2d').drawImage(this.video, 0, 0, 400, 300);
        dataurl = that.canvas.toDataURL('image/jpeg') とします。
        that.blobFile = that.dataURLtoFile(dataurl, 'camera.jpg');
        that.preViewVisible = true
      },
      takePhoneUpfile(){//画像を保存 this.loadingbut=true;
        formData = new FormData() とします。
        formData.append('file', this.blobFile);//画像コンテンツ//画像をアップロード putFileAttach(formData).then(res=>{//バックエンドインターフェース this.loadingbut=false;
          this.$emit('picture',res.data.data);
          this.tackPhoto=false;
          this.canvas.getContext('2d').clearRect(0, 0, 400, 300);//キャンバスをクリア//カメラを閉じる this.mediaStreamTrack.getVideoTracks().forEach(function (track) {
            トラックを停止します。
           });
        },エラー=>{
          this.loadingbut=false;
          window.console.log(エラー);
        });
      },
    }
  }
</スクリプト>
<スタイル>
 .camera-box #キャンバス{
  境界線: 1px 実線 #DCDFE6;
  }
</スタイル>