Vue ruft die Computerkamera auf, um die Fotofunktion zu realisieren

<Vorlage>
  <div Klasse="Kamera-Box" Stil="Breite: 900px;">
    <el-row :gutter="20">
      <el-col :span="12">
        <div style="text-align: center;font-size: 14px;font-weight: bold;margin-bottom: 10px;">Kamera</div>
        <!-- Dies ist der von der Kamera angezeigte Bildschirm-->
        <video id="video" width="400" height="300"></video>
        <div Klasse="iCenter" >
          <el-button type='primary' size='small' icon="el-icon-camera" @click="takePhone" style="margin-top: 10px;">Foto machen</el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="text-align: center;font-size: 14px;font-weight: bold;margin-bottom: 10px;">Fotografieeffekt</div>
        <!-- Hier sehen Sie den Bildschirminhalt, der angezeigt wird, wenn Sie zum Aufnehmen eines Fotos auf „Klicken“ klicken-->
        <Leinwand id='Leinwand' Breite='400' Höhe='300' Stil="Anzeige: Block;"></Leinwand>
        <el-button :loading="loadingbut" icon="el-icon-check" type='primary' size='small' @click="takePhoneUpfile" style="margin-top: 10px;">Speichern</el-button>
      </el-col>
    </el-row>
</div>
</Vorlage>
<Skript>
  importiere {putFileAttach} von "@/api/customer/animalinfo";
  Standard exportieren {
    Requisiten:{
      tackPhoto:{//Der von der übergeordneten Komponente übergebene Statustyp: Boolean,
        Standard: falsch
      }
    },
    Daten() {
      zurückkehren {
        wird geladen, aber:false,
        preViewVisible: false,
        blobFile: null,
        Leinwand: null,
        Video: null,
        mediaStreamTrack: '',
      }
    },
    betrachten:{
      tackFoto:{
        sofort: wahr,
        Handler (neuer Wert) {//Nachdem Sie den Aufnahmestatus erhalten haben, beginnen Sie mit dem Abrufen der Kameraberechtigungen. Wenn sich die Funktion in einer Komponente befindet, können die folgenden Schritte direkt in eine eigene Triggermethode geschrieben werden if (newVal) {
            var video = document.querySelector('video');
            var text = document.getElementById('text');
            // var mediaStreamTrack;
            
            // Kompatibler Code window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
            
            if (navigator.mediaDevices === undefiniert) {
            navigator.mediaDevices = {};
            }
            wenn (navigator.mediaDevices.getUserMedia === undefiniert) {
            navigator.mediaDevices.getUserMedia = Funktion (Einschränkungen) {
              var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
              wenn (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia ist in diesem Browser nicht implementiert'));
              }
              returniere neues Promise(Funktion(auflösen, ablehnen) {
              getUserMedia.call(Navigator, Einschränkungen, Auflösen, Ablehnen);
              });
            }
            } 
            
            //Kameraanrufkonfiguration var mediaOpts = {
            Audio: falsch,
            Video: stimmt,
            Video: {facingMode: "Umgebung"} // oder "Benutzer"
            // Video: { Breite: 1280, Höhe: 720 }
            // Video: { facingMode: { exact: "Umgebung" } } // oder "Benutzer"
            }

            lass das=dies;
            navigator.mediaDevices.getUserMedia(mediaOpts).then(Funktion(stream) {
            das.mediaStreamTrack = stream;
            Video = Dokument.QuerySelector('Video');
            wenn ("srcObject" im Video) {
              video.srcObject = Stream
            } anders {
              video.src = Fenster.URL && Fenster.URL.createObjectURL(Stream) || Stream
            }
            video.abspielen();
            }).catch(Funktion (Fehler) {
              console.log(fehler)
            });
          
        }
       },
        tief:wahr
      },
    },
    montiert() {
      // Kamera this.video = document.getElementById('video');
      //Leinwand this.canvas = document.getElementById('Leinwand')
      
    },
    Methoden: {
      takePhone() {//Klicken, um ein Foto aufzunehmen let that = this;
        that.canvas.getContext('2d').drawImage(dieses.video, 0, 0, 400, 300);
        let dataurl = that.canvas.toDataURL('bild/jpeg')
        das.blobFile = das.dataURLtoFile(dataurl, 'kamera.jpg');
        das.preViewVisible = true
      },
      takePhoneUpfile() {//Bild speichern this.loadingbut=true;
        let formData = new FormData()
        formData.append('file', this.blobFile);//Bildinhalt// Bild hochladen putFileAttach(formData).then(res=>{//Backend-Schnittstelle this.loadingbut=false;
          dies.$emit('Bild',res.data.data);
          dies.tackPhoto=false;
          this.canvas.getContext('2d').clearRect(0, 0, 400, 300);//Leinwand leeren// Kamera schließen this.mediaStreamTrack.getVideoTracks().forEach(function (track) {
            track.stopp();
           });
        },Fehler=>{
          dies.loadingbut=false;
          window.console.log(Fehler);
        });
      },
    }
  }
</Skript>
<Stil>
 .Kamera-Box #Leinwand{
  Rand: 1px durchgezogen #DCDFE6;
  }
</Stil>