uni-app自定义摄像头页面包涵拍照，摄像，查看相册功能

发布于 1周前 作者 caililin 来自 Uni-App

uni-app自定义摄像头页面包涵拍照，摄像，查看相册功能

查看附件

图片

Harmonyos Next教程
5 回复

相机自定义拍照录像，可设置相机分辨率、相机焦距、相机无声录像、相机支持横竖屏：https://ext.dcloud.net.cn/plugin?id=3404


专业插件开发 Q 1196097915

承接双端（Android，iOS）原生插件开发，uni-app外包开发。欢迎咨询
QQ：1559653449 V X：fan-rising

https://ext.dcloud.net.cn/plugin?id=5848 包含自定义相机 自定义相册 就能满足你的需求 https://ext.dcloud.net.cn/plugin?id=5941 这个在上面基础上增加了图片 视频压缩 https://ext.dcloud.net.cn/plugin?id=6183 这个还包含图片、视频编辑 以上插件都可以免费试用 专业团队为您服务，我们的价格不是最低的，但是我们的插件质量、服务的可持续性肯定是没有问题的 如有需要可以进QQ群755910061沟通(QQ:57570616是商务，技术都在群里，直接跟对应的技术沟通更方便) 智密科技拥有全职前端、安卓、IOS、后端开发工程师，UI设计师，从前端到原生一条龙解决各类Uniapp疑难杂症，专业提供Uniapp原生插件，承接各类APP定制开发(开发完成后提供源码)，与我们合作意味着您为项目开发找了一个专业团队作为后盾，所有的项目都有长期的售后支持 公司已经把相机和相册插件尽可能的做到自定义，避免定制提供用户的使用成本，也有支持图片 视频编辑 压缩的插件； 腾讯IM、直播、实时音视频插件都已经商品化，提供完善的DEMO和文档，免费提供IM源码(Uniapp开发的前端源码，插件不开源) 定制各类硬件及硬件SDK，已开发大量打印机插件、RFID插件、支付类插件、播放器插件、直播美颜插件…您需要的我们都有

针对您提出的uni-app自定义摄像头页面需求，以下是一个简单的代码示例，展示了如何实现拍照、摄像和查看相册功能。请注意，实际应用中可能需要根据具体需求进行进一步的优化和调整。

首先，在pages.json中配置页面路径：

{
  "pages": [
    {
      "path": "pages/camera/camera",
      "style": {
        "navigationBarTitleText": "摄像头"
      }
    }
  ]
}

接着，在pages/camera/camera.vue中编写页面代码：

<template>
  <view class="container">
    <button @click="takePhoto">拍照</button>
    <button @click="startRecording">摄像</button>
    <button @click="chooseImage">查看相册</button>
    <image v-if="photoPath" :src="photoPath" mode="widthFix" class="photo"></image>
    <video v-if="videoPath" :src="videoPath" controls class="video"></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      photoPath: '',
      videoPath: ''
    };
  },
  methods: {
    takePhoto() {
      const context = uni.createCameraContext();
      context.takePhoto({
        quality: 'high',
        success: (res) => {
          this.photoPath = res.tempImagePath;
        }
      });
    },
    startRecording() {
      const context = uni.createCameraContext();
      context.startRecord({
        success: () => {
          setTimeout(() => {
            context.stopRecord({
              success: (res) => {
                this.videoPath = res.tempVideoPath;
              }
            });
          }, 10000); // 录制10秒
        }
      });
    },
    chooseImage() {
      uni.chooseImage({
        sourceType: ['album', 'camera'],
        count: 1,
        success: (res) => {
          this.photoPath = res.tempFilePaths[0];
        }
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.photo {
  width: 100%;
  margin-top: 20px;
}
.video {
  width: 100%;
  margin-top: 20px;
}
</style>

在这个示例中，我们使用了uni.createCameraContext()来操作摄像头，分别实现了拍照、摄像和从相册选择图片的功能。拍照功能通过takePhoto方法实现，摄像功能通过startRecording方法实现（注意这里设置了10秒的录制时间，可以根据需要调整），查看相册功能通过chooseImage方法实现。

请注意，由于uni-app跨平台特性，实际开发中可能需要根据不同平台（如微信小程序、H5、App等）的特性和限制进行适配。此外，为了提升用户体验，还需要考虑权限申请、错误处理、UI优化等方面的工作。

回到顶部