# h5permission

**Repository Path**: scenario-samples/h5permission

## Basic Information

- **Project Name**: h5permission
- **Description**: H5自动弹窗授权是Flutter Web应用的典型场景之一，如点击H5按钮拉起摄像头和麦克风。 

本示例基于WebView_flutter插件和permission_handler插件实现Flutter Web开发中自动拉起摄像头和麦克风。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-16
- **Last Updated**: 2025-12-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flutter Web开发中自动拉起摄像头和麦克风

## 介绍
H5自动弹窗授权是Flutter Web应用的典型场景之一，如点击H5按钮拉起摄像头和麦克风。

本示例基于WebView_flutter插件和permission_handler插件实现Flutter Web开发中自动拉起摄像头和麦克风。
 
## 效果预览
<img src="screenshots/h5permission.gif" width="200">
 
## 实现思路
1.  在WebView中使用onPermissionRequest接收H5的相机和麦克风权限申请：
    ```dart
    _controller = WebViewController(
      onPermissionRequest: (request) {
        _handlePermissionRequest(request);
      },
    )
    Future<bool> _ensureMicAndCameraPermissions() async {
      final micStatus = await Permission.microphone.request();
      final camStatus = await Permission.camera.request();
      return micStatus.isGranted && camStatus.isGranted;
    }
    
    void _handlePermissionRequest(WebViewPermissionRequest request) async {
      final granted = await _ensureMicAndCameraPermissions();
      if (!mounted) return;
      if (granted) {
        request.grant();
      } else {
        request.deny();
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('需要麦克风/相机权限以继续')),
        );
      }
    }
    ```
2. H5调用用navigator.mediaDevices.getUserMedia获取权限：
    ```JavaScript
      function getMedia()
      {
        let constraints = {
          video: {width: 500, height: 500},
          audio: true
        };
        // 获取video摄像头区域
        let video = document.getElementById("video");
        // 返回的Promise对象
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        // then()异步，调用MediaStream对象作为参数
        promise.then(function (MediaStream) {
          video.srcObject = MediaStream;
          video.play();
        }).catch(function(error) {
          console.error("Error accessing media devices.", error);
        });
      }
    ```

## 约束与限制
* 本示例支持API Version 20 Release及以上版本。
* 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
* 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。

## 权限说明
- 获取相机使用权限：[ohos.permission.CAMERA](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/permissions-for-all-user#ohospermissioncamera)。
- 获取麦克风使用权限：[ohos.permission.MICROPHONE](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/permissions-for-all-user#ohospermissionmicrophone)。

## 工程目录

```
├──assets
│  └──index.html                        // 测试H5
├──lib
│  └──main.dart                         // 主页面
└──ohos
   ├──entry/src/main/ets
   │  ├──entryability
   │  │  └──Entryability.ets               // 程序入口
   │  └──pages
   │     └──Index.ets                      // 启动页面      
   └──entry/src/main/resources        // 应用资源目录

```

## 模块依赖
```yaml
  permission_handler:
    git:
      url: "https://gitcode.com/openharmony-sig/flutter_permission_handler"
      path: permission_handler
  webview_flutter:
    git:
      url: "https://gitcode.com/openharmony-tpc/flutter_packages.git"
      path: "packages/webview_flutter/webview_flutter"
```

## 参考文档
[WebRTC](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-rtc)
[用户授权（user_grant）的开放权限](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/permissions-for-all-user)
[permission_handler插件](https://gitcode.com/openharmony-sig/flutter_permission_handler/tree/br_permission_handler_v11.3.1_ohos)
[onPermissionRequest](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-events#onpermissionrequest9)