简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > uni-app > le corps du texte

Comment implémenter les fonctions d'enregistrement et d'édition vidéo dans uniapp

WBOY
Libérer： 2023-10-20 13:51:34
original
1879 Les gens l'ont consulté

Comment implémenter les fonctions denregistrement et dédition vidéo dans uniapp

Uniapp (Universal App) est un framework de développement basé sur Vue.js, qui peut utiliser à la fois la syntaxe Vue et les capacités de développement multiplateforme. Le framework peut compiler du code dans différentes pages sur plusieurs plateformes. Cet article expliquera comment implémenter les fonctions d'enregistrement et d'édition vidéo dans Uniapp et fournira des exemples de code spécifiques.

1. Implémentation de la fonction d'enregistrement vidéo

Pour implémenter la fonction d'enregistrement vidéo, vous devez d'abord introduire le plug-in uni-mp-video. Ce plug-in est un composant de lecture et d'enregistrement vidéo sur la plateforme de développement Uniapp, offrant des fonctions riches.

  1. Recherchez le fichier package.json dans le répertoire racine du projet et ajoutez le code suivant dans la section dépendances :

"dependencies": {

...
"uni-mp-video": "^1.0.0"
Copier après la connexion

}

  1. Exécutez la commande npm install pour installer le plugin.
  2. Utilisez ce plug-in dans le fichier vue de la page qui doit utiliser la fonction d'enregistrement vidéo :

<script> <br> importer mpVideo depuis 'uni-mp-video'<br> exporter par défaut {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data() { return { videoSrc: '' } }, components: { mpVideo }, methods: { async startRecord() { try { const { tempVideoPath } = await uni.getRecorderManager().start({ duration: 60, // 录制时长，单位为秒 format: 'mp4' // 录制格式 }) this.videoSrc = tempVideoPath } catch (err) { console.log(err) } }, endRecord() { uni.getRecorderManager().stop() } }</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br></script>

Dans l'extrait de code ci-dessus, nous avons présenté le plug-in et référencé le composant sur le page. Dans les méthodes, nous définissons la méthode startRecord() pour démarrer la fonction d'enregistrement, obtenir le chemin vidéo enregistré une fois l'enregistrement terminé, et le lier à l'attribut videoSrc afin qu'il puisse être affiché sur la page. La méthode endRecord() est utilisée pour terminer la fonction d'enregistrement.

2. Implémentation de la fonction de montage vidéo

Pour implémenter la fonction de montage vidéo, vous pouvez utiliser le plug-in uni-image-editor. Ce plug-in fournit un riche ensemble de fonctions d'édition d'images et de vidéos basées sur Uniapp, notamment le recadrage, le zoom, la rotation, les filtres et d'autres fonctions.

  1. Recherchez le fichier package.json dans le répertoire racine du projet et ajoutez le code suivant dans la section dépendances :

"dependencies": {

...
"uni-image-editor": "^1.0.0"
Copier après la connexion

}

  1. Exécutez la commande npm install pour installer le plugin.
  2. Utilisez ce plug-in dans le fichier vue de la page qui doit utiliser la fonction de montage vidéo :

Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！