使用uniapp打包h5后选择或拍摄视频时报错:API `chooseVideo` is not yet implemen，如何解决？

Question

使用uniapp打包h5后选择或拍摄视频时报错:API chooseVideo is not yet implemen

在dev模式下，通过谷歌浏览器是能正常弹出选择对话框，但是发行后就不行，尝试升级最新的Hbuild，问题依然存在，

Answer 1

原因就是提示的：API chooseVideo is not yet implemen

对应的API没有实现。

可以判断一下平台，针对H5场景使用：

<input type="file" accept="video/*" capture="camcorder" onchange="change()">

capture:
user 前置
environment 后置
camera 相机
camcorder 摄像机
microphone 录音
filesystem

太古董的手机，也不兼容，自行评估是否可以放弃古董用户。

Answer 2

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它允许开发者编写一次代码，发布到多个平台，包括 iOS、Android、H5、以及各种小程序等。然而，由于不同平台的能力差异，一些原生API可能在某些平台上是无法直接使用的。

针对你的问题，chooseVideo 是用于选择或拍摄视频的API，但在H5平台上，由于浏览器安全限制和HTML5标准本身的能力限制，这个API可能无法直接实现。

要解决这个问题，你可以考虑以下几种方法：

1. 使用H5的原生<input type="file">:
   虽然 chooseVideo 可能不支持H5，但你可以使用原生的HTML <input type="file" accept="video/*"> 来让用户选择视频文件。然后你可以使用JavaScript的 FileReader API 来读取和处理这些文件。

   示例代码：

   <input type="file" accept="video/*" capture="camcorder" @change="handleVideoChange">
   
   <script>
   export default {
       methods: {
           handleVideoChange(e) {
               let file = e.target.files[0];
               if (file) {
                   let reader = new FileReader();
                   reader.onload = (e) => {
                       // 你可以在这里处理视频文件，例如上传到服务器
                       console.log(e.target.result);
                   };
                   reader.readAsDataURL(file);
               }
           }
       }
   }
   </script>

2. 使用第三方库或组件:
   你可以查找是否有第三方库或组件为uni-app的H5版本提供了类似的视频选择功能。这些库可能已经处理了浏览器兼容性和安全限制问题。

3. 条件编译:
   在uni-app中，你可以使用条件编译来根据平台选择不同的代码。对于H5平台，你可以使用上述的原生HTML5方法来处理视频选择；对于其他原生平台（如iOS、Android、小程序等），则可以继续使用 chooseVideo。

   示例代码（使用uni-app的条件编译）：

   <template>
       <view v-if="platform !== 'h5'">
           <!-- 原生平台的代码，使用chooseVideo -->
       </view>
       <view v-else>
           <!-- H5平台的代码，使用<input type="file"> -->
           <input type="file" accept="video/*" capture="camcorder" @change="handleVideoChange">
       </view>
   </template>
   
   <script>
   // 在这里检查平台
   export default {
       data() {
           return {
               platform: uni.getSystemInfoSync().platform // 获取平台信息
           };
       },
       // ... 省略其他方法和代码
   }
   </script>

4. 考虑用户体验和平台兼容性:
   不同的平台和设备对于视频录制和选择的支持能力是不同的。因此，在设计和实现这样的功能时，你需要考虑用户体验和平台兼容性。例如，不是所有的浏览器都支持 capture="camcorder" 属性来直接录制视频。

希望这些方法可以帮助你解决问题。如果你有其他关于uni-app或前端开发的问题，也欢迎随时提问。