webview如何调用webRTC相关功能

点对点视频聊天。多人视频会议，在线教育，直播等都会使用webRTC相关功能。

HarmonyOS

fanyu0803

2024-05-20 20:13:21

浏览

回答 1

待解决

回答 1

按赞同

按时间

薯条包装盒

webview是支持调用WebRT的，并且可以通过H5获取音视频流，核心代码如下。

参考代码：

应用侧代码：

import web_webview from '@ohos.web.webview' 
import abilityAccessCtrl, { PermissionRequestResult, Permissions } from '@ohos.abilityAccessCtrl'; 
  
@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
  
  aboutToAppear() { 
    // 配置Web开启调试模式 
    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('mediaDevices.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() 
              } 
            }) 
          } 
        }) 
    } 
  } 
}

H5侧代码：

<!-- index.html -->H5侧代码 
<!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() 
   { 
     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();--> 
console.log('123') 
     }); 
   } 
 </script> 
</body> 
</html>

2024-05-21 15:36:48

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

webview如何调用webRTC相关功能

订阅鸿蒙技术特刊，精选内容抢先看