webview如何调用webRTC相关功能

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

HarmonyOS
2024-05-20 20:13:21
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
savage01

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>
分享
微博
QQ
微信
回复
2024-05-21 15:36:48
相关问题
webview如何实现网络请求拦截功能
828浏览 • 1回复 待解决
Webview是否支持定位功能
408浏览 • 1回复 待解决
离线webview组件有没有相关使用文档
685浏览 • 1回复 待解决
版本新增taskpool的相关功能验证
420浏览 • 1回复 待解决
如何编译鸿蒙版本的WebRTC
1835浏览 • 1回复 待解决
鸿蒙支持webrtc api嘛?
4654浏览 • 2回复 待解决
悬浮球能调用锁屏功能吗?
104浏览 • 1回复 待解决
鸿蒙webview调用摄像头和麦克风
903浏览 • 0回复 待解决
如何获取设备相关信息
798浏览 • 1回复 待解决
如何获取屏幕相关配置
394浏览 • 1回复 待解决
WebView 如何实现长截图
502浏览 • 1回复 待解决
如何获取鸿蒙系统手机相关信息
17245浏览 • 2回复 待解决