鴻蒙ArkWeb 元件多媒體探究：從影片到音訊

SameX發表於2024-10-19
鴻蒙Web元件音訊

本文旨在深入探討華為鴻蒙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();
});

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

本地播放器需要實現 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();
  }
  // ...
}

開發者還需要將本地播放器的狀態資訊通知給 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);
  }
  // ...
}

音訊播放

Web 元件也支援音訊播放，可以使用 JavaScript 介面 new Audio() 播放音訊檔案。

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

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

攝像頭和麥克風訪問

Web 元件可以使用 JavaScript 介面 navigator.mediaDevices.getUserMedia() 訪問攝像頭和麥克風。開發者需要配置許可權，確保應用程式可以訪問攝像頭和麥克風。

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

Web 元件還提供了 onPermissionRequest 介面，用於處理許可權請求。

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

開發者還可以使用 GeolocationPermissions 介面管理地理位置許可權。

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

其他多媒體功能

除了影片和音訊播放，Web 元件還支援其他多媒體功能，例如：

  • 圖片預覽：可以使用 Web 元件的 src 屬性載入圖片，並透過 CSS 樣式控制圖片的顯示方式。
  • 動畫播放：可以使用 CSS 動畫或 JavaScript 庫播放網頁中的動畫。
  • 網頁全屏播放：可以使用 Web 元件的 fullscreen 屬性或 JavaScript 介面實現網頁的全屏播放。

總結

Web 元件為我們開發者提供了豐富的網頁多媒體功能，可以方便地整合網頁內容並進行播放控制。開發者可以根據需要選擇合適的介面和方式進行開發，實現各種多媒體功能。

相關文章