鸿蒙ArkWeb 组件多媒体探究：从视频到音频原创

SameX

发布于 2024-10-19 15:28

浏览

0收藏

本文旨在深入探讨华为鸿蒙HarmonyOS Next系统（截止目前API12）的技术细节，基于实际开发实践进行总结。
主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。
本文为原创内容，任何形式的转载必须注明出处及原作者。

引言

ArkWeb 是华为鸿蒙系统提供的一款 Web 组件，用于在应用程序中显示 Web 页面内容。它不仅支持网页的加载和渲染，还提供了丰富的多媒体功能，包括视频播放、音频播放、摄像头和麦克风访问等。使用 Web 组件进行网页多媒体支持，可以方便地集成网页内容，实现跨平台部署，并且开发过程也更加便捷。

视频播放

Web 组件支持多种视频格式，例如 MP4、WebM、AVI 等。开发者可以使用 JavaScript 接口 navigator.mediaDevices.getUserMedia() 拉起摄像头和麦克风，实现视频的录制和播放。

let constraints = {
  video: { width: 640, height: 480 },
  audio: true
};
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
  video.srcObject = MediaStream;
  video.play();
});
1.
2.
3.
4.
5.
6.
7.
8.
9.

Web 组件还提供了 enableNativeMediaPlayer 和 onCreateNativeMediaPlayer 接口，允许应用程序接管网页中的媒体播放，并使用本地播放器进行渲染。开发者可以根据媒体信息判断是否需要接管媒体播放，并返回一个本地播放器实例给 Web 组件。

Web({ src: 'www.example.com', controller: this.controller })
  .enableNativeMediaPlayer({ enable: true, shouldOverlay: false })
  .onPageBegin((event) => {
    this.controller.onCreateNativeMediaPlayer((handler, mediaInfo) => {
      if (shouldHandle(mediaInfo)) {
        return new NativeMediaPlayerImpl(handler, mediaInfo);
      }
      return null;
    });
  });
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

本地播放器需要实现 NativeMediaPlayerBridge 接口，以便 Web 组件对其进行播放控制。开发者可以使用 updateRect、play、pause、seek 等方法控制本地播放器。

class NativeMediaPlayerImpl implements webview.NativeMediaPlayerBridge {
  constructor(handler, mediaInfo) {
    // ...
    this.nativePlayer = new AVPlayerDemo();
    // ...
  }
  updateRect(x, y, width, height) {
    // ...
    this.nativePlayer.updateNativePlayerRect(x, y, width, height);
  }
  play() {
    this.nativePlayer.play();
  }
  pause() {
    this.nativePlayer.pause();
  }
  // ...
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

开发者还需要将本地播放器的状态信息通知给 Web 组件，以便更新网页上的显示内容。可以使用 NativeMediaPlayerHandler 接口的 handleStatusChanged、handleSeeking、handleSeekFinished 等方法进行通知。

class AVPlayerListenerImpl implements AVPlayerListener {
  constructor(handler, component) {
    this.handler = handler;
    this.component = component;
  }
  onPlaying() {
    this.handler.handleStatusChanged(webview.PlaybackStatus.PLAYING);
  }
  // ...
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

音频播放

Web 组件也支持音频播放，可以使用 JavaScript 接口 new Audio() 播放音频文件。

let audio = new Audio('https://example.com/audio.mp3');
audio.play();
1.
2.

Web 组件同样支持使用本地播放器进行音频播放的接管。开发者可以使用 enableNativeMediaPlayer 和 onCreateNativeMediaPlayer 接口，并返回一个本地播放器实例给 Web 组件。然后使用 NativeMediaPlayerBridge 接口控制播放、暂停等操作。

class NativeMediaPlayerImpl implements webview.NativeMediaPlayerBridge {
  constructor(handler, mediaInfo) {
    // ...
    this.nativePlayer = new AVPlayerDemo();
    // ...
  }
  play() {
    this.nativePlayer.play();
  }
  pause() {
    this.nativePlayer.pause();
  }
  // ...
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

摄像头和麦克风访问

Web 组件可以使用 JavaScript 接口 navigator.mediaDevices.getUserMedia() 访问摄像头和麦克风。开发者需要配置权限，确保应用程序可以访问摄像头和麦克风。

let constraints = {
  video: true,
  audio: true
};
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
  // ...
});
1.
2.
3.
4.
5.
6.
7.
8.

Web 组件还提供了 onPermissionRequest 接口，用于处理权限请求。

Web({ src: 'www.example.com', controller: this.controller })
  .onPermissionRequest((event) => {
    if (event.request.getName() === 'ohos.permission.CAMERA') {
      // ...
    }
  });
1.
2.
3.
4.
5.
6.

开发者还可以使用 GeolocationPermissions 接口管理地理位置权限。

Web({ src: 'www.example.com', controller: this.controller })
  .geolocationAccess(true)
  .onGeolocationShow((event) => {
    // ...
  });
1.
2.
3.
4.
5.