HarmonyOS 鸿蒙Next：通过WebView引入webrtc拉自己的摄影头的流的html页面为什么没反应

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：通过WebView引入webrtc拉自己的摄影头的流的html页面为什么没反应

使用的是api11，单独在浏览器运行是可以的，配置了"ohos.permission.CAMERA"、“ohos.permission.MICROPHONE"权限

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset=“UTF-8”>
</head>
<body>
<video id=“video” width=“500px” height=“500px” autoplay=“autoplay”></video>
<br>
<input type=“button” title=“HTML5摄像头” value=“开启摄像头” onclick=“getMedia()”/>
<script>
    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) {
        console.log(“MediaStream====”+MediaStream)
        video.srcObject = MediaStream;
        video.play();
      });
    }
</script>
</body>
</html>

// xxx.ets
import { webview } from ‘@kit.ArkWeb’;
import { abilityAccessCtrl } from ‘@kit.AbilityKit’;

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController()

  aboutToAppear() {
    // 配置Web开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
    let atManager = abilityAccessCtrl.createAtManager();
    atManager.requestPermissionsFromUser(getContext(this), [‘ohos.permission.CAMERA’, ‘ohos.permission.MICROPHONE’])
      .then(data => {
        let result: Array<number> = data.authResults;
        let hasPermissions1 = true;
        result.forEach(item => {
          if (item === -1) {
            hasPermissions1 = false;
          }
        })
        if (hasPermissions1) {
          console.info(“hasPermissions1”);
        } else {
          console.info(” not hasPermissions1");
        }
      }).catch(() => {
      return;
    });
  }

  build() {
    Column() {
      Web({ src: $rawfile(‘index2.html’), controller: this.controller })
        .onPermissionRequest((event) => {
          if (event) {
            AlertDialog.show({
              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();
              }
            })
          }
        })
    }
  }
}

Harmonyos Next教程
3 回复
使用你的代码，可以正常打开摄像头呀，是否在module.json5中添加权限呀。

你是真机吗

HarmonyOS中通过WebView加载含WebRTC的HTML页面以显示摄像头流，若页面无反应，可能原因包括：

  1. WebView配置问题：确保WebView支持JavaScript及WebRTC所需的权限和协议（如HTTPS）。
  2. 权限未申请：应用需申请相机和网络权限。
  3. 安全策略：检查WebView的混合内容模式是否允许。
  4. 浏览器兼容性：WebView使用的浏览器内核可能不完全支持WebRTC特性。
  5. HTML/JavaScript错误：检查HTML和JavaScript代码是否有误。

请逐一排查以上可能原因。如果问题依旧没法解决请加我微信，我的微信是itying888。

回到顶部