微信小程序录像录视频

最新推荐文章于 2025-06-16 10:53:39 发布

不善主动的新吖

最新推荐文章于 2025-06-16 10:53:39 发布

阅读量1.8w

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mushui0633/article/details/79339841

本文介绍如何在微信小程序中利用WXML实现摄像功能，包括设置camera组件、控制前后摄像头切换、开始和暂停录制以及显示录制进度等。通过JS页面代码实现了录像的启动与停止，并获取了录像暂存地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WXML页面放置一个camera组件。

<cover-view class="container">  
  <cover-view class="takePhoto" bindtap="startTakePhoto">  
    <cover-image class="img" src="网络或本地都可以">  
  </cover-image></cover-view>  
  <cover-view class="time">00:00</cover-view>  
</cover-view>  
</camera>

并且在组件内放置cover-view cover-image组件，用来控制前后摄像头切换、开始和暂停录制、录制进度。

接下来是js页面：

  /**  
 * 生命周期函数--监听页面初次渲染完成  
 */
  onReady: function (res) {
    if (wx.createCameraContext()) {
      this.cameraContext = wx.createCameraContext('myCamera')
    } else {
      // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示  
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
    }
  },

  startTakePhoto: function () {
    this.cameraContext.startRecord({
      success: function (res) {
        console.log('成功！')
        console.log(res)
      },
      fail: function (res) {
        console.log('失败！')
        console.log(res)
      },
      complete: function (res) {
        console.log('complete！')
        console.log(res)
      },
      timeoutCallback: function (res) {
        console.log('超时')
        console.log(res)        
      }
    })
  },  

在startRecord中调用timeoutCallback或者在stopRecord中调用success都是可以得到录像暂存地址的，类似这样：

wxss文件

.camera{
height:1080rpx;
width: 750rpx;
}

.pause,.time {
flex: 1;
height: 100%;
}
.time {
text-align: center;
background-color: rgba(0, 0, 0, .5);
color: white;
line-height: 50px;
}
.img {
width: 40px;
height: 40px;
margin: 5px auto;
}