H5页面通过input标签唤起相机功能，鸿蒙手机失效，要怎么处理呢-华为开发者问答

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p> <input type="file" accept="image/*" capture="user"/> </p> <p> <input type="file" accept="video/*" capture="user"/> </p> </body> </html>

onPermissionRequest：通知收到获取权限请求，需配置"ohos.permission.CAMERA"、"ohos.permission.MICROPHONE"权限。具体权限配置可参考声明权限。
Web组件可以通过W3C标准协议接口拉起摄像头和麦克风，通过在JavaScript中调用W3C标准协议接口navigator.mediaDevices.getUserMedia()，该接口用于拉起摄像头和麦克风。constraints参数是一个包含了video和audio两个成员的MediaStreamConstraints对象，用于说明请求的媒体类型。
方案一：通过H5的capture属性，直接拉起相机进行拍照或者录像。只能使用比较简单的拍照或者录像功能。
收起
自动换行
深色代码主题
复制
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<p>
    <input type="file" accept="image/*" capture="user"/>
</p>
<p>
    <input type="file" accept="video/*" capture="user"/>
</p>
</body>
</html>
```
方案二：Web组件向用户请求手动授权，获取相机权限。
在module.json5文件中配置相关权限：ohos.permission.CAMERA、ohos.permission.MICROPHONE，具体申请方式请参考声明权限。

Web组件向用户请求手动授权。

收起
自动换行
深色代码主题
复制
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
import { abilityAccessCtrl } from '@kit.AbilityKit';
@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  uiContext: UIContext = this.getUIContext();
  aboutToAppear() {
    // 配置Web开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
    let atManager = abilityAccessCtrl.createAtManager();
    atManager.requestPermissionsFromUser(this.uiContext.getHostContext(),
      ['ohos.permission.CAMERA', 'ohos.permission.MICROPHONE'])
      .then((data) => {
        console.info(`data:${data}`);
        console.info('data permissions:' + data.permissions);
        console.info('data authResults:' + data.authResults);
      }).catch((error: BusinessError) => {
      console.error(`Failed to request permissions from user. Code is ${error.code}, message is ${error.message}`);
    });
  }
  build() {
    Column() {
      Web({ src: $rawfile('videoCall.html'), controller: this.controller })
        .fileAccess(false)
        .geolocationAccess(false)
        .onPermissionRequest((event) => {
          if (event) {
            this.uiContext.showAlertDialog({
              title: 'title',
              message: 'text',
              primaryButton: {
                value: 'deny',
                action: () => {
                  event.request.deny();
                }
              },
              secondaryButton: {
                value: 'onConfirm',
                action: () => {
                  event.request.grant(event.request.getAccessibleResource());
                }
              },
              cancel: () => {
                event.request.deny();
              }
            });
          }
        });
    };
  }
}

HTML

收起
自动换行
深色代码主题
复制
<!-- videoCall.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<br>
<input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()"/>
<script>
    function getMedia()
    {
      // 通过facingMode指定使用摄像头,前置为user，后置为environment
      let constraints = {
        video: {width: 500, height: 500, facingMode: "user"},
        audio: true
      };
      let video = document.getElementById("video");
      let promise = navigator.mediaDevices.getUserMedia(constraints);
      promise.then(function (MediaStream) {
        video.srcObject = MediaStream;
        video.play();
      });
    }
</script>
</body>
</html>

展开全部

Vue.js

HarmonyOS

HarmonyOS行业解决方案

H5页面通过input标签唤起相机功能，鸿蒙手机失效，要怎么处理呢