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

本文旨在深入探讨华为鸿蒙HarmonyOS Next系统（截止目前API12）的技术细节，基于实际开发实践进行总结。

主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。

本文为原创内容，任何形式的转载必须注明出处及原作者。

引言

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

视频播放

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

ini 复制代码

let constraints = {
  video: { width: 640, height: 480 },
  audio: true
};
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
  video.srcObject = MediaStream;
  video.play();
});

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

javascript 复制代码

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;
    });
  });

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

typescript 复制代码

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();
  }
  // ...
}

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

kotlin 复制代码

class AVPlayerListenerImpl implements AVPlayerListener {
  constructor(handler, component) {
    this.handler = handler;
    this.component = component;
  }
  onPlaying() {
    this.handler.handleStatusChanged(webview.PlaybackStatus.PLAYING);
  }
  // ...
}

音频播放

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

ini 复制代码

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

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

typescript 复制代码

class NativeMediaPlayerImpl implements webview.NativeMediaPlayerBridge {
  constructor(handler, mediaInfo) {
    // ...
    this.nativePlayer = new AVPlayerDemo();
    // ...
  }
  play() {
    this.nativePlayer.play();
  }
  pause() {
    this.nativePlayer.pause();
  }
  // ...
}

摄像头和麦克风访问

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

ini 复制代码

let constraints = {
  video: true,
  audio: true
};
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
  // ...
});

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

less 复制代码

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

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

javascript 复制代码

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

其他多媒体功能

除了视频和音频播放，Web 组件还支持其他多媒体功能，例如：

图片预览 ：可以使用 Web 组件的 src 属性加载图片，并通过 CSS 样式控制图片的显示方式。
动画播放：可以使用 CSS 动画或 JavaScript 库播放网页中的动画。
网页全屏播放 ：可以使用 Web 组件的 fullscreen 属性或 JavaScript 接口实现网页的全屏播放。

总结

Web 组件为我们开发者提供了丰富的网页多媒体功能，可以方便地集成网页内容并进行播放控制。开发者可以根据需要选择合适的接口和方式进行开发，实现各种多媒体功能。