鸿蒙（API 12 Beta3版）【扩展屏投播开发指导】使用投播组件

通过本节开发指导，可在系统镜像投屏后，获取投屏设备信息，实现扩展屏模式的投播，实现双屏协作的能力。

运作机制

• 虚拟扩展屏

  是在系统投屏启动过程中建立的，依据双端协商的投屏视频流的分辨率创建，支持1080P 及以上分辨率。默认镜像主屏内容，当虚拟扩展屏上有UIAbility绘制时，会投屏该屏内容。

• UIAbility A（本机内容）

  在本端主屏上显示的内容。假定UIAbility A 与 UIAbility B 属于同一应用，UIAbility A可以控制UIAbility B，实现双屏联动。

• UIAbility B（投屏内容）

  在虚拟扩展屏上绘制的内容，考虑到远端投屏用户体验，UIAbility B 应铺满全屏。从安全角度考虑，在启动UIAbility B 时，系统会校验主屏前台UIAbility是否归属同一应用，如果校验失败会禁止其在虚拟扩展屏启动。

约束与限制

需同时满足以下条件，才能使用该功能：

• 设备限制

  本端设备：HarmonyOS NEXT Developer Beta1及以上版本的手机设备

  远端设备：华为智慧屏HarmonyOS2.0及以上版本

• 使用限制

  需要系统发起无线/有线投屏后才可通过接口获取有效的扩展投屏设备。

接口说明

在开发具体功能前，请先查阅参考文档，获取详细的接口说明。

开发步骤

1. UIAibility A创建AVSession, 获取可用扩展屏投播设备并注册监听。

   说明

   获取的屏幕信息CastDisplayInfo中包含屏幕ID，屏幕名称、状态以及分辨率宽度、高度基础属性，其中屏幕id 值同于[Display]的id。

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import  { avSession }  from '@kit.AVSessionKit'; // 导入AVSession模块
import { BusinessError } from '@kit.BasicServicesKit';

export default class AbilityA extends UIAbility{
  private session: avSession.AVSession | undefined = undefined;
  private extCastDisplayInfo: avSession.CastDisplayInfo | undefined = undefined;
  // 注册监听可投屏设备变化事件
  private onCastDisplayChangedCallback = (castDisplayInfo: avSession.CastDisplayInfo) => {
    // 新增扩展屏,进入扩展屏显示
    if (this.extCastDisplayInfo === undefined && castDisplayInfo.state === avSession.CastDisplayState.STATE_ON) {
      console.info('Succeeded in opening the cast display');
      this.extCastDisplayInfo = castDisplayInfo;
      this.startExternalDisplay();
    } else if (this.extCastDisplayInfo?.id == castDisplayInfo.id) {
      this.extCastDisplayInfo = castDisplayInfo;
      // 扩展屏不可用，退出扩展屏显示
      if (castDisplayInfo.state === avSession.CastDisplayState.STATE_OFF){
        console.info('Succeeded in closing the cast display');
        this.stopExternalDisplay();
        this.extCastDisplayInfo = undefined;
      }
    }
  };

  // 创建AVSession, 获取可用扩展屏投播设备并注册监听
  initAVSession(context: Context) {
    avSession.createAVSession(context, 'CastDisplay', 'video').then((session: avSession.AVSession) => {
      this.session = session;
      this.session?.on('castDisplayChange', this.onCastDisplayChangedCallback);

      // 获取当前系统可用的扩展屏显示设备
      session.getAllCastDisplays().then((infoArr: avSession.CastDisplayInfo[]) => {
        // 有多个扩展屏时可以提供用户选择，也可使用其中任一个作为扩展屏使用。
        if (infoArr.length > 0) {
          this.extCastDisplayInfo = infoArr[0];
          this.startExternalDisplay();
        }
      }).catch((err: BusinessError<void>) => {
        console.error(`Failed to get all CastDisplay. Code: ${err.code}, message: ${err.message}`);
      });
    });
  }

  async onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): Promise<void> {
    super.onCreate(want, launchParam);
    this.initAVSession(this.context);
  }

  onDestroy() {
    this.stopExternalDisplay();
    // 去注册监听
    this.session?.off('castDisplayChange');
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

1. 在UIAblityA中构建扩展屏启动和退出能力。

// 扩展屏启动UIAbilityB
  startExternalDisplay() {
    if (this.extCastDisplayInfo !== undefined &&
      this.extCastDisplayInfo.id !== 0 &&
      this.extCastDisplayInfo.state === avSession.CastDisplayState.STATE_ON) {
      let id = this.extCastDisplayInfo?.id;
      console.info(`Succeeded in starting ability and the id of display is ${id}`);
      this.context.startAbility({
        bundleName: 'com.example.myapplication', // 应用自有包名
        abilityName: 'AbilityB'
      }, {
        displayId: id // 扩展屏ID
      });
      AppStorage.setOrCreate('CastDisplayState', 1);
    }
  }

  // 停止使用扩展屏
  stopExternalDisplay() {
    AppStorage.setOrCreate('CastDisplayState', 0);
    // 更新本页面显示。
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1. UIAbility B 扩展屏显示内容绘制，需响应退出处理。

import { UIAbility } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

export default class AbilityB extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    windowStage.getMainWindowSync().setWindowLayoutFullScreen(true); // 设置为全屏
    windowStage.loadContent('pages/CastPage', (err: BusinessError) => {
      if (err.code) {
        console.error(`Failed to load the content. Code: ${err.code}, message: ${err.message}`);
        return;
      }
      console.info('Succeeded in loading the content. ');
    });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import { BusinessError } from '@kit.BasicServicesKit';
import { common } from '@kit.AbilityKit';

@Entry
@Component
struct CastPage {
  // 监测到CastDisplayState变化后，当设备断开时，销毁本页内容。
  @StorageLink('CastDisplayState') @Watch('onDestroyExtend') private displayState: number = 1;

  private onDestroyExtend() {
    if (this.displayState === 1) return;
    let context = (getContext(this) as common.UIAbilityContext)
    context.terminateSelf().then(() => {
      console.info('CastPage finished');
    }).catch((err: BusinessError) => {
      console.error(`Failed to destroying CastPage. Code: ${err.code}, message: ${err.message}`);
    });
  }
  //...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

最后呢

很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说，我们直接看详细鸿蒙（OpenHarmony ）手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门视频，帮助大家在技术的道路上更进一步。

• 《鸿蒙 (OpenHarmony)开发学习视频》
• 《鸿蒙生态应用开发V2.0白皮书》
• 《鸿蒙 (OpenHarmony)开发基础到实战手册》
• OpenHarmony北向、南向开发环境搭建
• 《鸿蒙开发基础》
• 《鸿蒙开发进阶》
• 《鸿蒙开发实战》

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。

并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！ 自↓↓↓拿