So aktivieren Sie die Kamera zum Aufnehmen von Videos in Uniapp

Mit der Popularisierung des mobilen Internets und dem Beginn der 5G-Ära sind Videos für Menschen zunehmend zum bevorzugten Weg geworden, Informationen auszutauschen und zu verbreiten. Bei der Entwicklung einer APP, die die Funktion zum Aufnehmen von Videos umfasst, ist es erforderlich, die Kamera des Mobiltelefons aufzurufen, um Funktionen wie das Aufnehmen und Hochladen von Videos zu realisieren. In diesem Artikel erfahren Sie, wie Sie die Kamera in Uniapp zum Aufnehmen von Videos aktivieren.

1. uniapp

uniapp ist ein plattformübergreifendes Anwendungsentwicklungs-Framework, das auf dem Vue.js-Framework basiert. Es kann schnell leistungsstarke, effiziente und skalierbare mobile Anwendungen auf mehreren Plattformen erstellen. uniapp bietet einen einheitlichen Technologie-Stack. Entwickler müssen Code nur einmal schreiben und ihn auf mehreren Plattformen veröffentlichen, z. B. iOS, Android und WeChat-Applets.

2. Drehen Sie die Kamera hoch, um ein Video aufzunehmen

Um die Kamera hochzudrehen und ein Video aufzunehmen, müssen Sie die von uniapp bereitgestellte Methode uni.chooseVideo() verwenden . Im Folgenden sind die spezifischen Schritte aufgeführt:

1. Fügen Sie eine Seite in page.json hinzu und legen Sie den entsprechenden Pfad und die Seitendatei fest

{
  "pages": [
    {
      "path": "pages/video/index",
      "style": {
        "navigationBarTitleText": "拍摄视频"
      }
    }
  ]
}

#🎜 🎜 #Erstellen Sie eine neue index.vue-Datei im Videoordner, um die Videoaufnahmefunktion zu implementieren

2. <template>
     <view class="container">
       <button type="primary" @click="chooseVideo">拍摄视频</button>
     </view>
   </template>
   
   <script>
   export default {
     methods: {
       chooseVideo() {
         uni.chooseVideo({
           sourceType: ["camera"],
           compressed: true,
           maxDuration: 10,
           camera: "back",
           success: res => {
             console.log(res.tempFilePath);
             //TODO: 上传视频到服务器
           },
           fail: e => {
             console.log(e);
           }
         });
       }
     }
   };
   </script>
   
   <style scoped>
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
   }
   </style>

Auf der Seite lösen wir die Methode „Video auswählen“ über eine Schaltfläche aus. In der Methode „chooseVideo“ rufen wir die Methode „uni.chooseVideo()“ auf, um die Kamera zu aktivieren.

uni.chooseVideo({
  sourceType: ["camera"], // 调起相机拍摄
  compressed: true, // 开启视频压缩
  maxDuration: 10, // 设置最大拍摄时间为10秒
  camera: "back", // 相机方向为后置摄像头
  success: res => {
    console.log(res.tempFilePath); // 输出视频文件地址
    //TODO: 上传视频到服务器
  },
  fail: e => {
    console.log(e);
  }
});

Wir können sehen, dass Sie bei der Auswahl eines Videos einige Optionen festlegen können, z. B. die Videoquelle, ob das Video komprimiert werden soll, maximale Aufnahmezeit, Kamerarichtung usw. Unter diesen ist die Einheit der Option „maxDuration“ Sekunden. Nach erfolgreicher Auswahl eines Videos wird ein Res-Objekt mit der Adresse der Videodatei zurückgegeben, das wir auf den Server hochladen können.

3. Laden Sie das Video auf den Server hoch.

Nachdem wir das Video erfolgreich ausgewählt und die Videodateiadresse erhalten haben, müssen wir es auf den Server hochladen. In uniapp können Sie die Methode uni.uploadFile() zum Hochladen von Videos verwenden.

Die spezifischen Schritte sind wie folgt:

Auf der Serverseite müssen Sie eine Schnittstelle zum Empfangen von Videodateien schreiben.
1. Im Frontend müssen Sie die Methode „chooseVideo“ ändern, um die Dateiadresse des erfolgreich ausgewählten Videos auf den Server hochzuladen.

2. uni.chooseVideo({
     sourceType: ["camera"],
     compressed: true,
     maxDuration: 10,
     camera: "back",
     success: res => {
       //将选择的视频文件上传到服务器
       uni.uploadFile({
         url: "http://127.0.0.1:3000/api/upload",
         filePath: res.tempFilePath,
         name: "file",
         success: uploadRes => {
           console.log(uploadRes);
           //TODO: 处理上传成功后的逻辑
         },
         fail: e => {
           console.log(e);
         }
       });
     },
     fail: e => {
       console.log(e);
     }
   });

In der uploadFile-Methode müssen Sie die Upload-Serveradresse, den hochzuladenden Dateipfad, den Namen der Datei beim Hochladen usw. angeben. Nachdem der Upload erfolgreich war, wird ein uploadRes-Objekt zurückgegeben, das das Upload-Ergebnis enthält. Wir können die Logik nach erfolgreichem Upload basierend auf dem Ergebnis verarbeiten.

4. Zusammenfassung

Mit der Methode uni.chooseVideo() können wir die Kamera schnell für die Videoaufnahme einrichten und das Video auf den Server hochladen. Auf diese Weise können wir eine Anwendung mit Videoaufnahmefunktionen entwickeln. Gleichzeitig stellt Uniapp eine Reihe ähnlicher APIs bereit, mit denen wir verschiedene Funktionen in der plattformübergreifenden Entwicklung schnell implementieren können.

Das obige ist der detaillierte Inhalt vonSo aktivieren Sie die Kamera zum Aufnehmen von Videos in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!