HarmonyOS鸿蒙Next中如何实现屏幕共享功能

HarmonyOS鸿蒙Next中如何实现屏幕共享功能 在web组件中用navigator.mediaDevices.getDisplayMedia会报没有权限，请问如何实现这个功能，没找到参考的文档

2 回复

在h5调用getDisplayMedia发起屏幕共享，触发web组件中onScreenCaptureRequest回调，在回调中通过event.handler.grant完成屏幕捕获权限申请，具体解决方案见下面demo：

import webView from '@ohos.web.webview';
import business_error from '@ohos.base'
import abilityAccessCtrl from '@ohos.abilityAccessCtrl';

const AtManager = abilityAccessCtrl.createAtManager();

@Entry
@Component
struct WebComponent {
  controller: webView.WebviewController = new webView.WebviewController();
  aboutToAppear() {
    AtManager.requestPermissionsFromUser(getContext(this), ['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(error:business_error.BusinessError => {});
  }
  build() {
    Column() {
      Row() {
        Button('refresh')
          .onClick(() => {
            this.controller.refresh()
          })
      }
      Row() {
        Web({
          src: $rawfile('demo.html'), 
          controller: this.controller
        })
          .domStorageAccess(true)
          .databaseAccess(true)
          .imageAccess(true)
          .onlineImageAccess(true)
          .javaScriptAccess(true)
          .onScreenCaptureRequest((event) => {
            if (!event) {
              return;
            }
            console.log("on onScreenCaptureRequest Origin:" + event.handler.getOrigin());
            AlertDialog.show({
              title: 'title',
              message: '请求权限' + event.handler.getOrigin(),
              confirm: {
                value: 'ok',
                action: () => {
                  event.handler.grant({ captureMode: WebCaptureMode.HOME_SCREEN });
                }
              },
              cancel: () => {
                event.handler.deny();
              }
            })
          })
      }
    }
  }
}

demo.html代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #video {
            width: 200px;
            height: 400px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<script>
    function share() {
        navigator.mediaDevices.getDisplayMedia({video: true}).then(stream => {
            var video = document.getElementById('video');
            video.srcObject = stream;
            console.log(stream, video)
            video.play();
            }).catch(res => {
                document.getElementById('res').innerText = res
            })
        }
        var script = document.createElement("script")
        script.src = "https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.1/vconsole.min.js"
        script.onload = function(){
            window.vconsole = new VConsole()
        }
        document.body.appendChild(script)
</script>
<button onclick="share()">投屏</button>
<video id="video"></video>
<span id="res"></span>
</body>
</html>

更多关于HarmonyOS鸿蒙Next中如何实现屏幕共享功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中实现屏幕共享功能，可以通过以下步骤进行：

  1. 获取屏幕内容：使用ScreenCapture类捕获当前屏幕内容，生成Image对象。
  2. 编码与传输：将捕获的屏幕内容编码为视频流（如H.264），并通过网络传输。可以使用MediaCodec进行编码，Socket或WebRTC进行传输。
  3. 接收与显示：在接收端解码视频流并显示。使用MediaCodec解码，SurfaceView或TextureView显示视频。

示例代码：

// 捕获屏幕
ScreenCapture screenCapture = new ScreenCapture();
Image image = screenCapture.captureScreen();

// 编码与传输
MediaCodec codec = MediaCodec.createEncoderByType("video/avc");
// 配置codec并开始编码
// 通过网络传输编码后的数据

// 接收与显示
MediaCodec decoder = MediaCodec.createDecoderByType("video/avc");
// 配置decoder并开始解码
// 使用SurfaceView显示解码后的视频
回到顶部