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

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

1. uniapp

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

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

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

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

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

2. を設定します。ビデオ撮影機能を実装するための新しい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() メソッドを使用してビデオのアップロードを実装できます。

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

1. サーバー側で、ビデオ ファイルを受信するためのインターフェイスを作成する必要があります。
2. フロントエンドでは、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 サイトの他の関連記事を参照してください。