1.需要使用https；
2.安卓，IOS 通过web-view使用需要进行一定的适配。
方案如下：

# 安卓解决方案：

Android5.0 之后的版本原生webview，app层面需要摄像机权限。

 <uses-permission android:name="android.permission.INTERNET"/>
 <uses-permission android:name="android.permission.CAMERA" />
 <uses-permission android:name="android.permission.CAPTURE_VIDEO_OUTPUT" />

# 网页中会实时弹出获取摄像头权限，需要在webview授权处理中允许

 webView.setWebChromeClient(new WebChromeClient() {
 
    @Override
    public void onPermissionRequest(final PermissionRequest request) {
        Log.d("MainActivity", "onPermissionRequest");
        MainActivity.this.runOnUiThread(new Runnable() {
            @TargetApi(Build.VERSION_CODES.LOLLIPOP)
            @Override
            public void run() {
                request.grant(request.getResources());
            }
        });
    }

});

使用其它浏览器内核需要根据相关浏览器要求进行配置。

# IOS解决方案

WebRTC在iOS上，仅支持WKWebView。

OC语法：

// 初始化配置对象WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];// 默认是NO，这个值决定了用内嵌HTML5播放视频还是用本地的全屏控制
configuration.allowsInlineMediaPlayback = YES;// 自动播放， 不需要用户采取任何手势开启播放if (@available(iOS 10.0, *)) {
    // WKAudiovisualMediaTypeNone 音视频的播放不需要用户手势触发，即为自动播放
    configuration.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone;
} else {
    configuration.requiresUserActionForMediaPlayback = NO;
}
       WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:configuration];

Swift语法

// 初始化配置对象
let configuration = WKWebViewConfiguration() // 默认是NO，这个值决定了用内嵌HTML5播放视频还是用本地的全屏控制
configuration.allowsInlineMediaPlayback = true
// 自动播放，不需要用户采取任何手势开启播放
if #available(iOS 10.0, *) {
// WKAudiovisualMediaTypeNone 音视频的播放不需要用户手势触发，即为自动播放
configuration.mediaTypesRequiringUserActionForPlayback = []
} else {
configuration.requiresUserActionForMediaPlayback = false
}
let webView = WKWebView(frame: CGRect.zero, configuration: configuration)

# 鸿蒙解决方案：

1、在module.json5 中声明H5所需权限：

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET",
    "reason": "$string:EntryAbility_permission_internet",
    "usedScene": {
      "abilities": [
        "EntryAbility"
      ],
      "when": "always"
    }
  },
  // camera permisson
  {
    "name": "ohos.permission.CAMERA",
    "reason": "$string:EntryAbility_permission_camera",
    "usedScene": {
      "abilities": [
        "EntryAbility"
      ],
      "when": "always"
    }
  },
  // album permisson
  {
    "name": "ohos.permission.READ_IMAGEVIDEO",
    "reason": "$string:EntryAbility_permission_album",
    "usedScene": {
      "abilities": [
        "EntryAbility"
      ],
      "when": "always"
    }
  },
  // audio permission
  {
    "name": "ohos.permission.MICROPHONE",
    "reason": "$string:EntryAbility_permission_microphone",
    "usedScene": {
      "abilities": [
        "EntryAbility"
      ],
      "when": "always"
    }
  }

]

2、通过biztoken接口获取Web需要加载的url
3、在页面Component中使用Web组件

a. 加载url

b. 注册js接口回调

c. 通过onShowFileSelector使用相册/相机选择照片或拍摄视频

/**
** 通过Camera拍摄视频并获取视频uri回调
**
*/
invokeCamera(callback: (uri: string) => void) {
  const context = getContext(this) as common.UIAbilityContext;
  let want: Want = {
    action: "ohos.want.action.videoCapture",
    parameters: {
      "callBundleName": context.abilityInfo.bundleName,
    }
  };
  let result: (error: BusinessError, data: common.AbilityResult) => void =
    (error: BusinessError, data: common.AbilityResult) => {
      if (error && error.code !== 0) {

        return;
      }
      let resultUri: string = data.want?.parameters?.resourceUri as string;
      if (callback && resultUri) {
        callback(resultUri);
      }
    }
  context.startAbilityForResult(want, result);
}

/**
* 选择相册图片并返回文件uri
*/
invokevideoCamera(callback: (uri: string) => void) {
  const context = getContext(this) as common.UIAbilityContext;
  let want: Want = {
    action: "ohos.want.action.imageCapture",
    parameters: {
      "callBundleName": context.abilityInfo.bundleName,
    }
  };
  let result: (error: BusinessError, data: common.AbilityResult) => void =
    (error: BusinessError, data: common.AbilityResult) => {
      if (error && error.code !== 0) {
        return;
      }
      let resultUri: string = data.want?.parameters?.resourceUri as string;
      if (callback && resultUri) {
        callback(resultUri);
      }
    }
  context.startAbilityForResult(want, result);
}



/**
* 声明JS接口类用于接收JS回调
*/
export class JavaScriptInterface {
  private onShowResult?: (result: string) => void;

  public setOnShowResult(callback: (result: string) => void): void {
    this.onShowResult = callback;
  }

  // 对应Android的showResult方法
  showResult(result: string): void {
    if (this.onShowResult) {
      this.onShowResult(result);
    }
    // 此处可添加原生业务逻辑
  }

  revalidation() {
    console.log('revalidation')
  }

  backIndex() {
    console.log('revalidation')
  }
}

private jsInterface: JavaScriptInterface = new JavaScriptInterface();

build() {
  Column() {
    Web({ src: this.url, controller: this.controller })
      .width('100%')
      .height('100%')
      .javaScriptAccess(true)
      .javaScriptProxy({
        object: this.jsInterface,
        name: "finauth",
        methodList: ["showResult", "revalidation", "backIndex"], // 显式声明可调用方法
        controller: this.controller
      })
      .onShowFileSelector((event) => {
        let acceptType = event?.fileSelector.getAcceptType()
        if (acceptType != null || acceptType != undefined) {
          if (acceptType[0] == '.mov') {
            this.invokeCamera((uri: string) => {
              event?.result.handleFileList([uri]);
            })
          } else {
            this.invokevideoCamera((uri: string) => {
              event?.result.handleFileList([uri]);
            })
          }
        }
        return true
      })
      .onPermissionRequest((event) => {
        console.log('onPermissionRequest')
        if (event) {
          event.request.grant(event.request.getAccessibleResource())
        }
      })
  }
  .width('100%')
  .height('90%')
  .backgroundColor(Color.White)
}