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

# 安卓解决方案：

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

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

# 网页中会实时弹出获取摄像头权限，需要在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。

需在配置里加上摄像头和麦克风的使用权限。App 的 info.plist 中加入：

.NSMicrophoneUsageDescription   
.NSCameraUsageDescription

OC语法：

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];  // 初始化配置对象
configuration.allowsInlineMediaPlayback = YES; // 默认是NO，这个值决定了用内嵌HTML5播放视频还是用本地的全屏控制，其中NO为使用原生全屏控制器，YES为视频内嵌播放。

// 设置为自动播放， 不需要用户采取任何手势开启播放
if (@available(iOS 10.0, *)) {
    configuration.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone;  //WKAudiovisualMediaTypeNone 音视频的播放不需要用户手势触发，即为自动播放，iOS 10.0+支持
} else {
    configuration.requiresUserActionForMediaPlayback = NO;
}
WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:configuration];

Swift语法

let configuration = WKWebViewConfiguration()  // 初始化配置对象
configuration.allowsInlineMediaPlayback = true   // 默认是false，这个值决定了用内嵌HTML5播放视频还是用本地的全屏控制

// 设置为自动播放，不需要用户采取任何手势开启播放 
if #available(iOS 10.0, *) {
    configuration.mediaTypesRequiringUserActionForPlayback = []  // WKAudiovisualMediaTypeNone 音视频的播放不需要用户手势触发，即为自动播放，iOS 10.0+支持
} 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"
        }
      },
      // 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;
    const pickerProfile: cameraPicker.PickerProfile = {
      cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK
    };
    cameraPicker.pick(context,
      [cameraPicker.PickerMediaType.VIDEO, cameraPicker.PickerMediaType.VIDEO], pickerProfile)
      .then((pickerResult: cameraPicker.PickerResult) => {
        if (callback && pickerResult.resultUri) {
          callback(pickerResult.resultUri);
        }
      })
      .catch((error: BusinessError) => {
        console.error(`invokeCamera failed, code: ${error.code}, message: ${error.message}`);
      });
  }



/**
* 声明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) => {
          this.invokeCamera((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)
}