HarmonyOS h5保存视频（下载、进度、恢复）？

Question

如题：HarmonyOS h5保存视频（下载、进度、恢复）？

Answer 1

可参考如下demo：

import { webview } from '@kit.ArkWeb';
import { fileIo, fileUri } from '@kit.CoreFileKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { BusinessError, request } from '@kit.BasicServicesKit';

let context = getContext(this);
let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
let total = 0
let received = 0
class Video {
  async saveVideo(videoURL: string) {
    try {


      let filePath = context.cacheDir + '/test.mp4'

      fileIo.access(filePath).then(async (result: boolean) => {
        if (result) {
          total = 0
          received = 0
          await fileIo.unlink(filePath)
        }
      })

      let uri = fileUri.getUriFromPath(filePath);
      let srcFileUris: Array<string> = [
        uri// 实际场景请使用真实的uri
      ];
      let photoCreationConfigs: Array<photoAccessHelper.PhotoCreationConfig> = [
        {
          title: 'test', // 可选
          fileNameExtension: 'mp4',
          photoType: photoAccessHelper.PhotoType.VIDEO,
          subtype: photoAccessHelper.PhotoSubtype.DEFAULT, // 可选
        }
      ];
      let desFileUris: Array<string> = await phAccessHelper.showAssetsCreationDialog(srcFileUris, photoCreationConfigs);


      request.downloadFile(context, { url: videoURL, filePath: filePath }).then((data: request.DownloadTask) => {
        let downloadTask = data;
        GlobalContext.getContext().setObject('downloadTask', downloadTask);
        let webController = GlobalContext.getContext().getObject('webController') as WebviewController;
        let progressCallback = (receivedSize: number, totalSize: number) => {
          if (total===0) {
            total = totalSize
          }
          received = receivedSize
          webController.runJavaScript(`updateProgress(${received},${total})`)
          console.log('正在下载')
        };
        downloadTask.on('progress', progressCallback);

        downloadTask.on('complete', async () => {
          console.log('下载完成')

          let imageFile = fileIo.openSync(desFileUris[0], fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE);
          await fileIo.copyFile(filePath, imageFile.fd, 0).then(() => {
            console.log('保存成功')
          })
          await fileIo.close(imageFile.fd)
        })


      }).catch((err: BusinessError) => {
        console.error(`Failed to request the download. Code: ${err.code}, message: ${err.message}`);
      })

    } catch (err) {
      console.error('showAssetsCreationDialog failed, errCode is ' + err.code + ', errMsg is ' + err.message);
    }
  }

  suspendDownload() {
    let downloadTask = GlobalContext.getContext().getObject('downloadTask') as request.DownloadTask;
    downloadTask!.suspend().then((result: boolean) => {
      console.log('暂停下载')
      console.log(`${result}`)
    })
  }

  restoreDownload() {
    let downloadTask = GlobalContext.getContext().getObject('downloadTask') as request.DownloadTask;
    downloadTask!.restore().then((result: boolean) => {
      console.log(`${result}`)
      console.log('恢复下载')
    })
  }

  deleteDownload() {
    let downloadTask = GlobalContext.getContext().getObject('downloadTask') as request.DownloadTask;
    let webController = GlobalContext.getContext().getObject('webController') as WebviewController;
    downloadTask!.delete().then((result: boolean) => {
      console.log(`${result}`)
      console.log('移除下载')
      total = 0
      received = 0
      webController.runJavaScript(`updateProgress(${received},${total})`)
    })
  }
}

@Entry
@Component
struct Index {
  private webController: WebviewController = new webview.WebviewController()
  @State video: Video = new Video()
  build() {
    Row() {
      Column() {
        Web({ src: $rawfile("index.html"), controller: this.webController })
          .height("80%")
          .javaScriptProxy({
            object: this.video,
            name: "video",
            methodList: ["saveVideo",'suspendDownload','restoreDownload','deleteDownload'],
            controller: this.webController
          })
          .onControllerAttached(() =>{
            GlobalContext.getContext().setObject('webController', this.webController);
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}


//存储下载任务
class GlobalContext {
  private constructor() { }
  private static instance: GlobalContext;
  private _objects = new Map<string, Object>();

  public static getContext(): GlobalContext {
    if (!GlobalContext.instance) {
      GlobalContext.instance = new GlobalContext();
    }
    return GlobalContext.instance;
  }

  getObject(value: string): Object | undefined {
    console.log(typeof (this._objects.get(value)))
    return this._objects.get(value);
  }

  setObject(key: string, objectClass: Object): void {
    this._objects.set(key, objectClass);
  }
}