1# Publishing a Live View Notification (for System Applications Only)
2
3The live view notification provides real-time progress of long-duration tasks, including voice recording, screen recording, audio and video playback, timing, and phone call. Such type of notification is not stored persistently, and its lifecycle is consistent with that of the notification publisher.
4
5**Table 1** Types of live view notifications
6
7| Type                                                  | Value| Description               |
8| ------------------------------------------------------ | --- | ------------------ |
9| NOTIFICATION_CONTENT_SYSTEM_LIVE_VIEW<sup>11+</sup>    | 5  | Live view notification.   |
10
11## Available APIs
12
13The following table describes the APIs for notification publishing. You can specify the notification information – content, ID, slot type, and delivery time – by setting the [NotificationRequest](../reference/apis-notification-kit/js-apis-inner-notification-notificationRequest-sys.md#notificationrequest) parameter in the APIs.
14
15| **API**| **Description**|
16| -------- | -------- |
17| [publish](../reference/apis-notification-kit/js-apis-notificationManager.md#notificationmanagerpublish)(request:&nbsp;NotificationRequest,&nbsp;callback:&nbsp;AsyncCallback&lt;void&gt;):&nbsp;void | Publishes a notification.                |
18| [cancel](../reference/apis-notification-kit/js-apis-notificationManager.md#notificationmanagercancel)(id:&nbsp;number,&nbsp;label:&nbsp;string,&nbsp;callback:&nbsp;AsyncCallback&lt;void&gt;):&nbsp;void | Cancels a specified notification.     |
19
20
21## How to Develop
22
231. Import the modules.
24
25   ```ts
26   import { notificationManager } from '@kit.NotificationKit';
27   import { BusinessError } from '@kit.BasicServicesKit';
28   import { image } from '@kit.ImageKit';
29   import { hilog } from '@kit.PerformanceAnalysisKit';
30
31   const TAG: string = '[PublishOperation]';
32   const DOMAIN_NUMBER: number = 0xFF00;
33   ```
34
352. Publishes a notification.
36
37   In addition to the parameters in the normal text notification, the system live view notification provides the **typeCode**, **capsule**, **button**, **time**, and **progress** parameters. For details, see [NotificationSystemLiveViewContent](../reference/apis-notification-kit/js-apis-inner-notification-notificationContent.md#notificationsystemliveviewcontent).
38
39      ```ts
40      let imagePixelMap: image.PixelMap | undefined = undefined; // Obtain the image pixel map information.
41      let color = new ArrayBuffer(4);
42      imagePixelMap = await image.createPixelMap(color, {
43        size: {
44          height: 1,
45          width: 1
46        }
47      })
48      if(imagePixelMap !== undefined) {
49        let notificationRequest: notificationManager.NotificationRequest = {
50          notificationSlotType: notificationManager.SlotType.LIVE_VIEW, // Live view
51          id: 0, // Notification ID. The default value is 0.
52          content: {
53            notificationContentType : notificationManager.ContentType.NOTIFICATION_CONTENT_SYSTEM_LIVE_VIEW,
54            systemLiveView: {
55              title: "test_title",
56              text:"test_text",
57              typeCode: 1, // Type of the invoking service.
58              // Button
59              button: {
60                names: ["buttonName1"],
61                icons: [imagePixelMap],
62              },
63              // Capsule
64              capsule: {
65                title: "testTitle",
66                icon: imagePixelMap,
67                backgroundColor: "testColor",
68              },
69              // Progress. To update the progress, you only need to modify the progress value and publish the notification again.
70              progress: {
71                maxValue: 100,
72                currentValue: 21,
73                isPercentage: false,
74              },
75              // Time
76              time: {
77                initialTime: 12,
78                isCountDown: true,
79                isPaused: true,
80                isInTitle: false,
81              }
82            }
83          }
84        };
85        // publish callback
86        let publishCallback = (err: BusinessError): void => {
87          if (err) {
88            hilog.error(DOMAIN_NUMBER, TAG, `publish failed, code is ${err.code}, message is ${err.message}`);
89          } else {
90            hilog.info(DOMAIN_NUMBER, TAG, `publish success`);
91          }
92        };
93        // Button callback (It is returned when the button is touched. You can determine how to process the callback.)
94        let onResponseCallback = (id:number, option:notificationManager.ButtonOptions) => {
95          hilog.info(DOMAIN_NUMBER, TAG, `response callback: ` + JSON.stringify(option) + `notificationId` + id);
96        }
97        let systemLiveViewSubscriber: notificationManager.SystemLiveViewSubscriber  = {
98          onResponse: onResponseCallback
99        };
100        // Subscribe to the system live view notification (button).
101        await notificationManager.subscribeSystemLiveView(systemLiveViewSubscriber);
102        // Publish the notification.
103        notificationManager.publish(notificationRequest, publishCallback);
104      }
105      ```
106