Vue implementiert den Anruf der PC-Kamera, um Fotos in Echtzeit aufzunehmen

<!--Schaltfläche „Modalbox öffnen“-->
        <el-form-item label="*Foto:" prop="headImage">
          <el-input Typ="Text" v-Modell="imgSrc" />
            <el-col :span="1.5">
              <el-Schaltfläche
                @click="aufnehmen"
                Symbol="el-icon-Kamera"
                Größe="klein">
                Machen Sie ein Foto und laden Sie es hoch</el-button>
            </el-col>
        </el-form-item>
        <!--Bild nach der Aufnahme anzeigen-->
        <el-form-item label="" prop="imgSrc">
          <img v-if="imgSrc" :src="imgSrc" style="Breite: 200px;Höhe: 240px;" />
</el-form-item> 

<!--Modalbox zum Fotografieren-->
    <el-dialog
      Titel="Foto hochladen"
      :visible.sync="sichtbar"
      @close="beiAbbrechen"
      Breite="1065px">
      <div Klasse="Box">
        <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
        <canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoHeight"></canvas>
      </div>
      <div slot="Fußzeile">
        <el-Schaltfläche
          @click="Bild zeichnen"
          Symbol="el-icon-Kamera"
          Größe="klein">
          Machen Sie ein Foto</el-button>
        <el-Schaltfläche
          v-if="os"
          @click="Kompetenz erhalten"
          Symbol = "el-icon-video-camera"
          Größe="klein">
          Kamera öffnen</el-button>
        <el-Schaltfläche
          v-sonst
          @click="Navigator stoppen"
          Symbol="el-icon-switch-button"
          Größe="klein">
          Kamera schließen</el-button>
        <el-Schaltfläche
          @click="Leinwand zurücksetzen"
          Symbol="el-icon-refresh"
          Größe="klein">
          Zurücksetzen</el-button>
        <el-Schaltfläche
          @click="beiAbbrechen"
          Symbol = "el-Symbol-Kreis-schließen"
          Größe="klein">
          Fertig</el-button>
   </div>
</el-dialog>

<Skript>
Standard exportieren {
  Name: "XXX",
  Daten() {
    zurückkehren {
      sichtbar: false, //Popup wird geladen: false, //Upload-Button wird geladen os: false, //Kameraschalter steuern thisVideo: null,
      dieserKontext: null,
      thisCancas: null,
      Videobreite: 500,
      Videohöhe: 400,
      postOptions:[],
      CertCtl:'',
      // Maskenebene wird geladen: true,
      // Array-IDs auswählen: [],
      // Nicht-Single deaktivieren Single: true,
      // Nicht mehrfach, Mehrfach deaktivieren: true,
      //Gesamtzahl der Einträge: 0,
      // Projektpersonaltabellendaten akworkerList: [],
      //Datenwörterbuch des Worker-Typs workerTypeOptions:[],
      // Titel der Popup-Ebene: "",
      // Ob die Popup-Ebene geöffnet angezeigt werden soll: false,
      // Abfrageparameter queryParams: {
        Seitennummer: 1,
        Seitengröße: 10,
        imgSrc:undefiniert,
      },
      // Formularparameter form: {},
      // Formularvalidierungsregeln: {
      }
    };
  },
  erstellt() {
   
  },
  Methoden: {
    /*Rufen Sie die Kamera auf, um mit der Aufnahme von Bildern zu beginnen*/
    beimNehmen() {
      dies.sichtbar = wahr;
      dies.getCompetence();
    },
    beiAbbrechen() {
      dies.sichtbar = falsch;
     /* dies.resetCanvas();*/
      dies.stopNavigator();
    },
    //Kameraberechtigung aufrufen getCompetence() {
      //Der DOM-Knoten kann erst nach dem Rendern im Modell abgerufen werden. Der DOM-Knoten kann nicht direkt im Modell abgerufen werden. this.$nextTick(() => {
        const _this = dies;
        this.os = false; //Schalter zum Schließen der Kamera this.thisCancas = document.getElementById('canvasCamera');
        dies.thisContext = dies.thisCancas.getContext('2d');
        dies.thisVideo = document.getElementById('videoCamera');
        // Ältere Browser unterstützen MediaDevices möglicherweise überhaupt nicht, daher setzen wir zuerst ein leeres Objekt if (navigator.mediaDevices === undefined) {
          navigator.menavigatordiaDevices = {}
        }
        // Einige Browser implementieren teilweise MediaDevices und wir können nicht einfach ein Objekt // mit getUserMedia zuweisen, weil dies vorhandene Eigenschaften überschreiben würde.
        // Falls die Eigenschaft getUserMedia fehlt, fügen Sie sie hier hinzu.
        wenn (navigator.mediaDevices.getUserMedia === undefiniert) {
          navigator.mediaDevices.getUserMedia = Funktion (Einschränkungen) {
            // Zuerst das vorhandene getUserMedia abrufen (falls vorhanden)
            let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
            // Einige Browser unterstützen dies nicht und geben eine Fehlermeldung zurück // Halten Sie die Schnittstelle konsistent if (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia ist in diesem Browser nicht implementiert'))
            }
            // Andernfalls schließen Sie den Aufruf des alten navigator.getUserMedia mit einem Promise ab.
            returniere neues Promise(Funktion (auflösen, ablehnen) {
              getUserMedia.call(Navigator, Einschränkungen, Auflösen, Ablehnen)
            })
          }
        }
        const-Einschränkungen = {
          Audio: falsch,
          Video: {Breite: _this.videoWidth, Höhe: _this.videoHeight, Transformieren: 'scaleX(-1)'}
        };
        navigator.mediaDevices.getUserMedia(Einschränkungen).dann(Funktion (Stream) {
          // Ältere Browser haben möglicherweise kein srcObject
          wenn ('srcObject' in _this.thisVideo) {
            _this.thisVideo.srcObject = Strom
          } anders {
            // Vermeiden Sie die Verwendung in neueren Browsern, da es veraltet ist.
            _this.thisVideo.src = Fenster.URL.createObjectURL(Stream)
          }
          _this.thisVideo.onloadedmetadata = Funktion (e) {
            _dieses.diesesVideo.abspielen()
          }
        }).catch(err => {
          dies.$benachrichtigen({
            Titel: 'Warnung',
            Meldung: „Die Kameraberechtigung ist nicht aktiviert oder die Browserversion ist inkompatibel.“
            Typ: "Warnung"
          });
        });
      });
    },
    //Bild zeichnen drawImage() {
      // Klicken, Leinwandzeichnung this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth, this.videoHeight);
      // Holen Sie sich den Base64-Link des Bildes this.imgSrc = this.thisCancas.toDataURL('image/png');
      /*const imgSrc=diese.imgSrc;*/
    },
    // Leinwand löschen clearCanvas(id) {
      sei c = document.getElementById(id);
      let cxt = c.getContext("2d");
      cxt.clearRect(0, 0, c.Breite, c.Höhe);
    },
    //Setzt die Leinwand zurück resetCanvas() {
      dies.imgSrc = "";
      dies.clearCanvas('canvasCamera');
    },
    //Kamera schließen stopNavigator() {
      wenn (dieses.diesesVideo && dieses.diesesVideo !== null) {
        dies.thisVideo.srcObject.getTracks()[0].stop();
        this.os = true; //Schalter zum Öffnen der Kamera}
    },
  /*Rufe die Kamera, um Bilder aufzunehmen*/
  }
};
</Skript>