uni-app uni.chooseVideo录制视频确认之后页面白屏（小米14）

uni-app uni.chooseVideo录制视频确认之后页面白屏（小米14）

示例代码：

videoAdd() {
    this.successResult = '';
    this.failResult = '';
    uni.chooseVideo({
        maxDuration: 3, // 最大为10秒
        count: 1,
        compressed: true,
        camera: 'front',
        sourceType: ['camera'],
        success: (res) => {
            console.log('视频', res)
            // let resSize = res.size / 1024 / 1024;
            // console.log('视频大小', resSize)
            // if (resSize > 6) {} else {
            this.videoToBase64(res.tempFilePath);
            // }
        }
    })
},
videoToBase64(url) {
    var xhr = new XMLHttpRequest()
    xhr.responseType = 'blob';
    xhr.onload = () => {
        let reader = new FileReader()
        reader.onload = (e) => {
            // console.log(e.target.result) //这里就是转好的Base64了
            var data = e.target.result
            var index = data.indexOf(',');
            var base64 = data.substring(index + 1, data.length);
            this.getTokenEvent(base64)
        }
        let rs = reader.readAsDataURL(xhr.response)
    }
    xhr.open('get', url)
    xhr.send()
}

操作步骤：

  • 使用小米14录制视频返回页面白屏

预期结果：

  • 录制完视频会把视屏转成base64，把base64传给接口

实际结果：

  • 页面空白

bug描述：

  • 点击录制视频，录制两三秒确定，然后页面直接白屏

Image

产品分类 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 浏览器平台 浏览器版本 项目创建方式
uniapp/H5 Windows 64 正式 3.8.12 微信内置浏览器 V8.9.15.9425 HBuilderX

更多关于uni-app uni.chooseVideo录制视频确认之后页面白屏（小米14）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

啊，这，uniapp是没人维护了吗，为啥都没人解决问题

更多关于uni-app uni.chooseVideo录制视频确认之后页面白屏（小米14）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中使用uni.chooseVideo录制视频后出现页面白屏的问题，可能由多种原因引起。以下是一些可能的原因和解决方法，特别是针对小米14设备的排查步骤：

1. 检查代码逻辑

  • 确保在uni.chooseVideo的回调函数中正确处理了视频数据，并且没有因为数据处理错误导致页面崩溃。
  • 示例代码：
    uni.chooseVideo({
  count: 1,
  sourceType: ['camera'],
  success: (res) => {
    console.log('视频路径:', res.tempFilePath);
    // 处理视频数据
  },
  fail: (err) => {
    console.error('选择视频失败:', err);
  }
});
  • 确保在success回调中正确处理了res.tempFilePath，避免因为操作未定义或空值导致页面异常。

2. 检查视频文件大小

  • 录制的视频文件过大可能导致页面加载失败或白屏。可以通过uni.getFileInfo获取视频文件的大小，并对大文件进行处理或压缩。
  • 示例代码：
    uni.getFileInfo({
  filePath: res.tempFilePath,
  success: (fileInfo) => {
    console.log('视频大小:', fileInfo.size);
    if (fileInfo.size > 100 * 1024 * 1024) { // 100MB
      uni.showToast({ title: '视频文件过大', icon: 'none' });
      return;
    }
    // 处理视频
  }
});

3. 检查设备兼容性

  • 小米14可能存在特定的兼容性问题。可以尝试以下方法：
    • 更新小米14的系统版本到最新。
    • 在开发者选项中开启“强制GPU渲染”或“停用HW叠加层”。
    • 检查是否有其他应用或设置影响了uni-app的运行。

4. 检查页面渲染性能

  • 页面白屏可能是因为视频加载或渲染导致的性能问题。可以尝试以下优化：
    • 使用<video>标签加载视频时，添加controls、autoplay等属性，确保视频正常播放。
    • 示例代码：
      <video :src="videoPath" controls autoplay></video>
    • 如果视频过大，可以使用uni.compressVideo对视频进行压缩。

5. 调试与日志

  • 使用console.log或uni.showToast在关键步骤打印日志，检查是否有异常。
  • 在fail回调中捕获错误信息：
    uni.chooseVideo({
  success: (res) => {
    console.log('成功:', res);
  },
  fail: (err) => {
    console.error('失败:', err);
    uni.showToast({ title: '选择视频失败', icon: 'none' });
  }
});
回到顶部