uniappでカメラを起動してビデオを撮影する方法-uni-app-php.cn

uniappでカメラを起動してビデオを撮影する方法

王林

リリース： 2023-05-22 10:35:07

オリジナル

4873 人が閲覧しました

モバイルインターネットの普及と 5G 時代の到来に伴い、人々が情報を共有し広める手段としてビデオがますます好まれるようになりました。動画撮影機能を含むAPPを開発する場合、動画撮影やアップロードなどの機能を実現するには携帯電話のカメラを呼び出す必要があります。この記事では、uniappでカメラを起動して動画を撮影する方法を紹介します。

1. uniapp

uniapp は、Vue.js フレームワークに基づくクロスプラットフォームアプリケーション開発フレームワークです。複数のプラットフォーム上で高性能、効率的、スケーラブルなモバイルアプリケーションを迅速に構築できます。 uniapp は統合されたテクノロジースタックを提供するため、開発者はコードを 1 回作成するだけで、iOS、Android、WeChat アプレットなどの複数のプラットフォームに公開できます。

2. カメラの電源を上げてビデオを撮影する

カメラの電源を上げてビデオを撮影するには、uniapp が提供する uni.chooseVideo() メソッドを使用する必要があります。具体的な手順は次のとおりです。

pages.json にページを追加し、ビデオフォルダーの下に対応するパスとページファイル

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

ログイン後にコピー

を設定します。ビデオ撮影機能を実装するための新しいindex.vueファイル

<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>

ログイン後にコピー

ページで、ボタンを使用してchooseVideoメソッドをトリガーします。 chooseVideo メソッドでは、uni.chooseVideo() メソッドを呼び出してカメラをアクティブにします。

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

ログイン後にコピー

ビデオを選択するときに、ビデオソース、ビデオを圧縮するかどうか、最大撮影時間、カメラの方向などのオプションを設定できることがわかります。このうち、maxDurationオプションの単位は秒です。ビデオが正常に選択されると、ビデオファイルのアドレスを含む res オブジェクトが返され、サーバーにアップロードできます。

3. ビデオをサーバーにアップロードします

ビデオを選択し、ビデオファイルアドレスを取得したら、サーバーにアップロードする必要があります。 uniapp では、uni.uploadFile() メソッドを使用してビデオのアップロードを実装できます。

具体的な手順は次のとおりです。

サーバー側で、ビデオファイルを受信するためのインターフェイスを作成する必要があります。
フロントエンドでは、chooseVideo メソッドを変更して、正常に選択されたビデオのファイルアドレスをサーバーにアップロードする必要があります。

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);
  }
});

ログイン後にコピー

uploadFileメソッドでは、アップロードサーバーのアドレス、アップロードするファイルのパス、アップロード時のファイル名などを指定する必要があります。アップロードが成功すると、アップロード結果を含むuploadResオブジェクトが返されるので、その結果を基にアップロード成功後のロジックを処理します。

4. 概要

uni.chooseVideo() メソッドを使用すると、ビデオを撮影してサーバーにアップロードするようにカメラを簡単に設定できます。このようにして、ビデオ撮影機能を備えたアプリケーションを開発できます。同時に、uniapp は、クロスプラットフォーム開発でさまざまな機能を迅速に実装するのに役立つ一連の同様の API を提供します。

以上がuniappでカメラを起動してビデオを撮影する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。