Vue は PC カメラを呼び出してリアルタイムで写真を撮る機能を実装します

<!-- モーダル ボックスを開くボタン -->
        <el-form-item label="*写真:" prop="headImage">
          <el-input type="text" v-model="imgSrc" />
            <el-col :span="1.5">
              <el-ボタン
                @click="onTake"
                アイコン="el-icon-camera"
                サイズ="小">
                写真を撮ってアップロードする</el-button>
            </el-col>
        </el-form-item>
        <!--写真を撮った後に写真を表示する-->
        <el-form-item label="" prop="imgSrc">
          <img v-if="imgSrc" :src="imgSrc" スタイル="幅: 200px;高さ: 240px;" />
</el-form-item> 

<!--モーダルボックスの撮影-->
    <el-ダイアログ
      title="写真アップロード"
      :visible.sync="表示"
      @close="キャンセル時"
      幅="1065px">
      <div class="box">
        <ビデオ id="videoCamera" クラス="canvas" :width="videoWidth" :height="videoHeight" 自動再生></ビデオ>
        <canvas id="canvasCamera" class="canvas" :width="ビデオ幅" :height="ビデオ高さ"></canvas>
      </div>
      <div スロット="フッター">
        <el-ボタン
          @click="画像を描画"
          アイコン="el-icon-camera"
          サイズ="小">
          写真を撮る</el-button>
        <el-ボタン
          v-if="os"
          @click="能力を取得"
          icon="el-icon-ビデオカメラ"
          サイズ="小">
          カメラを開く</el-button>
        <el-ボタン
          v-else
          @click="stopNavigator"
          icon="el-icon-switch-button"
          サイズ="小">
          カメラを閉じる</el-button>
        <el-ボタン
          @click="キャンバスをリセット"
          アイコン="el-icon-refresh"
          サイズ="小">
          リセット</el-button>
        <el-ボタン
          @click="onCancel"
          アイコン="el-icon-circle-close"
          サイズ="小">
          完了</el-button>
   </div>
</el-ダイアログ>

<スクリプト>
エクスポートデフォルト{
  名前: "XXX",
  データ（） {
    戻る {
      visible: false, //ポップアップの読み込み: false, //アップロードボタンの読み込み os: false, //カメラスイッチの制御 thisVideo: null,
      thisContext: null、
      thisCancas: null、
      ビデオ幅: 500,
      ビデオ高さ: 400,
      postオプション:[],
      証明書コントロール:''、
      // マスクレイヤーの読み込み: true、
      // 配列IDを選択: [],
      // 非シングルを無効にする single: true,
      // 複数ではない複数を無効にする: true、
      //エントリの総数: 0,
      // プロジェクト人員テーブルデータ akworkerList: [],
      //ワーカータイプデータディクショナリworkerTypeOptions:[],
      // ポップアップ レイヤーのタイトル: "",
      // ポップアップレイヤーを表示するかどうか open: false,
      // クエリパラメータ queryParams: {
        ページ番号: 1,
        ページサイズ: 10,
        画像ソース:未定義、
      },
      // フォームパラメータ form: {},
      // フォーム検証ルール: {
      }
    };
  },
  作成された() {
   
  },
  メソッド: {
    /*カメラを呼び出して写真を撮り始めます*/
    オンテイク() {
      this.visible = true;
      このメソッドは、Competence を取得します。
    },
    キャンセル() {
      this.visible = false;
     /* this.resetCanvas();*/
      this.stopNavigator();
    },
    //カメラの権限を呼び出す getCompetence() {
      //DOMノードはモデル内でレンダリングした後にのみ取得できます。モデル内でDOMノードを直接取得することはできません。this.$nextTick(() => {
        _this は定数です。
        this.os = false; //カメラを閉じるように切り替えます this.thisCancas = document.getElementById('canvasCamera');
        this.thisContext = this.thisCancas.getContext('2d');
        this.thisVideo = document.getElementById('videoCamera');
        // 古いブラウザは mediaDevices をまったくサポートしていない可能性があるため、最初に空のオブジェクトを設定します if (navigator.mediaDevices === undefined) {
          ナビゲーター.menavigatordiaDevices = {}
        }
        // 一部のブラウザは部分的な mediaDevices を実装しており、既存のプロパティを上書きしてしまうため、getUserMedia を使用してオブジェクトを割り当てることはできません。
        // ここで、getUserMedia プロパティが欠落している場合は追加します。
        navigator.mediaDevices.getUserMedia が未定義の場合 {
          navigator.mediaDevices.getUserMedia = 関数 (制約) {
            // まず既存の getUserMedia を取得します (存在する場合)
            getUserMedia を navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia とします。
            // 一部のブラウザではサポートされていないため、エラーメッセージが返されます // インターフェイスの一貫性を保つ if (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia はこのブラウザでは実装されていません'))
            }
            // それ以外の場合は、古い navigator.getUserMedia の呼び出しを Promise でラップします。
            新しいPromise(function(resolve,reject))を返す{
              getUserMedia.call(ナビゲーター、制約、解決、拒否)
            })
          }
        }
        const制約 = {
          オーディオ: 偽、
          ビデオ: {幅: _this.videoWidth、高さ: _this.videoHeight、変換: 'scaleX(-1)'}
        };
        navigator.mediaDevices.getUserMedia(制約).then(関数(ストリーム) {
          // 古いブラウザにはsrcObjectがない可能性があります
          _this.thisVideo に 'srcObject' がある場合、
            _this.thisVideo.srcObject = ストリーム
          } それ以外 {
            // 新しいブラウザでは非推奨となっているため、使用しないでください。
            _this.thisVideo.src = window.URL.createObjectURL(ストリーム)
          }
          _this.thisVideo.onloadedmetadata = 関数 (e) {
            _this.thisVideo.play()
          }
        }).catch(エラー => {
          これを通知します。{
            タイトル: 「警告」
            メッセージ: 「カメラの権限が有効になっていないか、ブラウザのバージョンに互換性がありません。」
            タイプ: '警告'
          });
        });
      });
    },
    //画像を描画するdrawImage() {
      // クリック、キャンバス描画 this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth, this.videoHeight);
      // 画像の base64 リンクを取得します。 this.imgSrc = this.thisCancas.toDataURL('image/png');
      /*const imgSrc=this.imgSrc;*/
    },
    // キャンバスをクリアする clearCanvas(id) {
      c = document.getElementById(id); とします。
      cxt = c.getContext("2d"); とします。
      cxt.clearRect(0, 0, c.width, c.height);
    },
    //キャンバスをリセットする resetCanvas() {
      this.imgSrc = "";
      'canvasCamera' をクリアします。
    },
    //カメラを閉じる stopNavigator() {
      this.thisVideo が null の場合、
        this.thisVideo.srcObject.getTracks()[0].stop();
        this.os = true; //カメラを開くためのスイッチ}
    },
  /*カメラを呼び出して写真を撮る*/
  }
};
</スクリプト>