<div
  class="phoneBox"
  id="phoneBox"
  style="background-color: grey;overflow:hidden;width: 100%;height: 100%;text-align: center;"
></div>

// Take the Vue project as an example
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { showNotify, showDialog } from "vant";
import "vant/es/notify/style";
import "vant/es/dialog/style";
import { ArmcloudEngine } from "armcloud-rtc";

const armCloud: any = ref(null);

const handleStart = () => {
    // RTC initialization
    const params = {
        baseUrl: 'https://openapi-hk.armcloud.net', // sdk requests the domain name
        token: '', //  Required: The token obtained from the server calling /openapi/open/token/stsToken
        retryCount: 2, // WS reconnection count: default 2
        retryTime: 2000, // ws reconnection interval by default 2000
        enableMicrophone: true, // Whether to turn on the microphone
        enableCamera: true, // Whether to turn on the camera
        deviceInfo: {
            padCode: 'AC22030020000', // Required, room number
            userId: 'xxxx-xxxx-xxxx-xxx', // Required: User ID or other unique ID for your product
            videoStream: { // Optional. For specific configuration, please refer to API Details - Set Resolution, Bitrate, Frame Rate
                resolution: 12, // Optional, resolution, default 12 (540 * 960)
                frameRate: 2, // Optional, Frame Rate, Default 2 (25fps)
                bitrate: 3 // Optional, bitrate, default 3 (2Mbps)
            },
            autoRecoveryTime: 300, // Optional, no operation recovery time, range 1s~7200s, default: 300
            mediaType: 3, // Optional: Media stream type 1: Control only audio 2: Control video only 3: Control both audio and video, default: 3
            rotateType: 0, // Optional: rotate screen 0: portrait, 1: landscape, default value: 0
            keyboard: 'pad', // Optional: Current keyboard 'local': local keyboard, 'pad': cloud server keyboard, default: 'pad'
            saveCloudClipboard: true, // Select: Do you accept the cloud phone clipboard callback? true: receives, false: does not receive, default is true
        },
        viewId: "phoneBox", // Required: container ID
        callbacks: { // Optional, callback collection
            // Initialize callbacks
            onInit: ({ code, msg }) => {
                console.log("init:", code, msg);

                // After successful initialization, proceed with subsequent business operations
                if (code === 0) {
                    // Whether the browser supports RTC service listening
                    const isSupported =  ArmcloudEngine.isSupported();
                    if (!isSupported) {
                        showNotify({
                            type: "warning",
                            message: "This browser does not support RTC services"
                        });
                        return false;
                    }
                    // Join the room
                    armCloud.value.start();
                }

            },
            // Link successfully pulled back
            onConnectSuccess: () => {
                showNotify({
                    type: "success",
                    message: "Successfully entered the room"
                });
                // Obtain the SDK version number
                const version = armCloud.value.version
                console.log('Current SDK version number:', version)
            },
            // Link failed and callback
            onConnectFail: ({ code, msg }) => {
                console.log("fail:" code, msg);
                showNotify({
                    type: "danger",
                    message: msg
                });
            },
            // No operation retrieval callback
            onAutoRecoveryTime: () => {
                console.log("Triggering a retraction callback");
                // After triggering no-action collection, the SDK executes armCloud.value.stop() to leave the room business logic, requiring re-entry to the room
                showDialog({
                    message: "Trigger no action reclamation, pause flow pulling; Click confirm to resume traffic pulling"
                }).then(() => {
                    // on close
                    // Join the room
                    armCloud.value.start();
                });
            },
            // Autoplay failed callback
            onAutoplayFailed: e => {
                console.log("Autoplay failed", e);
                if (e.kind === "video") {
                    showDialog({
                        message: "Autoplay video failure; Click confirm to play manually"
                    }).then(() => {
                        // on close
                        armCloud.value.startPlay();
                    });
                }
                if (e.kind === "audio") {
                    showDialog({
                        message: "Audio playback fails; Click confirm to play manually"
                    }).then(() => {
                        // on close
                        armCloud.value.startPlay();
                    });
                }
            },
            // Current operation information is pullback
            onRunInformation: (info) => {
                console.log("Current network status", info);
            },
            // Triggered when resolution changes
            onChangeResolution: (width, height) => {
                console.log("Current resolution", width, height);
            },
            // Triggered when receiving a message sent via the cloud app
            onTransparentMsg: (type, msg) => {
                console.log("News spread quickly", type, msg);
            },
            // Triggered when playback is abnormal
            onErrorMessage: (event) => {
                console.log("Abnormal", event);
            },
            // Cloud machine text content copy triggers callbacks
            onOutputClipper: (message) => {
                // If the initialization passes in a configuration like saveCloudClipboard: false, you will not receive the callback message
                console.log("Copy the text content", message);
            },
            // The first frame of the video rendered successfully
            onRenderedFirstFrame: () => {
                console.log("The first frame of the video rendered successfully");
            }
        }
    };
    armCloud.value = new ArmcloudEngine(params);
}

/** Leaving the room */
const handleStop = () => {
    armCloud.value.stop();
}
</script>

<template>
  <div>
    <div
      id="phoneBox"
      class="phone-box"
      style="background-color: grey; overflow: hidden; width: 100%; height: 80%; text-align: center"
    />
    <div class="flex">
      <div @click="handleStart">Join Room</div>
      <div @click="handleStop">Leave Room</div>
    </div>
  </div>
</template>