HarmonyOS web组件加载h5，h5拉起摄像头

HarmonyOS web组件加载h5，h5拉起摄像头。

HarmonyOS

FengTianYa

2024-09-05 10:06:28

浏览

回答 1

按赞同

按时间

zbw_apple

// xxx.ets 
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() 
              } 
            }) 
          } 
        }) 
    } 
  } 
}
<!-- index.html --> 
  <!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.getElementByld("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>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.

同时， module.json5中需要配置权限：“ohos.permission.CAMERA”、“ohos.permission.MICROPHONE”。

2024-09-05 18:28:51

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS web组件加载h5，h5拉起摄像头

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