接听第一通电话

import { useLoginState } from "@/uni_modules/tuikit-atomic-x/state/LoginState";
  
const { login } = useLoginState();
  
const handleLogin = () => {
    login({
      sdkAppID: 1400000001,  // 替换为您的 SDKAppID
      userID: "test_001",    // 替换为您的 UserID
      userSig: "xxxxxxxxxx"  // 替换为您的 UserSig
    })
 }

import { useCallState } from '@/uni_modules/tuikit-atomic-x/state/CallState';

const { addCallListener } = useCallState();

// 通话页面路由
const CALL_PAGE = '/uni_modules/tuikit-atomic-x/pages/call'; // 替换为您在步骤1 中创建的真实路径
// 建议在应用初始化的时候执行该方法
export function initCallService() {
  addCallListener('onCallReceived', (event: string) => {
    uni.navigateTo({
      url: CALL_PAGE
    });
  });
}

import { watch } from 'vue';
import { useCallState } from '@/uni_modules/tuikit-atomic-x/state/CallState';

const { addCallListener, selfInfo } = useCallState();

/**
 * 创建或获取音频播放实例（单例复用）
 */
function ensureAudioContext() {
  if (!uni.$innerAudioContext) {
    const ctx = uni.createInnerAudioContext();
    ctx.onError((err: any) => {
      console.error('[CallService] innerAudioContext onError:', err?.errCode, err?.errMsg || err);
    });
    uni.$innerAudioContext = ctx;
  }
  return uni.$innerAudioContext;
}

/**
 * 播放铃声
 * @param src - 铃声文件路径
 */
function playRingtone(src: string) {
  const ctx = ensureAudioContext();
  try {
    ctx.stop();
  } catch (_e) {}
  ctx.src = src;
  ctx.loop = true;
  ctx.autoplay = true;
  setTimeout(() => {
    try {
      ctx.play();
    } catch (e) {
      console.warn('[CallService] playRingtone play() error:', e);
    }
  }, 50);
}

/**
 * 停止铃声
 */
function stopRingtone() {
  if (uni.$innerAudioContext) {
    try {
      uni.$innerAudioContext.loop = false;
      uni.$innerAudioContext.stop();
    } catch (e) {
      console.warn('[CallService] stopRingtone error:', e);
    }
  }
}

export { playRingtone, stopRingtone };

// 在应用启动的时候执行该方法
export function initCallService() {
  ensureAudioContext();

  // 监听通话状态变化：接通(status=2)或结束(status=0)时停止铃声
  watch(() => selfInfo.value, (newVal) => {
    if (newVal?.status === 2 || newVal?.status === 0) {
      stopRingtone();
    }
  }, { immediate: true, deep: true });

  // 收到来电时播放铃声
  addCallListener('onCallReceived', () => {
    playRingtone('/static/audio/ring.mp3');
  });

  // 通话结束时停止铃声
  addCallListener('onCallEnded', () => {
    stopRingtone();
  });
}

import { useCallState } from '@/uni_modules/tuikit-atomic-x/state/CallState';
import { useDeviceState } from '@/uni_modules/tuikit-atomic-x/state/DeviceState';

const { addCallListener } = useCallState();
const { openLocalCamera, openLocalMicrophone } = useDeviceState();

// 通话页面路由
const CALL_PAGE = '/uni_modules/tuikit-atomic-x/pages/call'; // 替换为您在步骤1 中创建的真实路径
// 在应用启动的时候执行该方法
export function initCallService() {
  addCallListener('onCallReceived', (event: string) => {
    let res: any;
    try {
      res = JSON.parse(event);
    } catch (error) {
      console.error('[CallService] onCallReceived parse error:', error);
      return;
    }
    // 视频通话时打开摄像头
    if (res.mediaType === 1) {
      openLocalCamera({ isFront: true });
    }
    // 打开麦克风
    openLocalMicrophone();
    // 跳转到通话页面
    uni.navigateTo({
      url: CALL_PAGE
    });
  });
}

<template>
  <view class="call-view-container">
    <view :style="{ height: systemInfo?.windowHeight + 'px', width: systemInfo?.safeArea?.width + 'px' }">
      <call-core-view
        :style="{ height: systemInfo?.windowHeight + 'px', width: systemInfo?.safeArea?.width + 'px' }"
        :volumeLevelIcons="volumeLevelIcons"
      ></call-core-view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from 'vue';

  const systemInfo = ref({});

  /**
   * 将 /static/ 相对路径转为原生层可用的本地绝对路径
   */
  function toAbsolutePath(relativePath) {
    if (plus && plus.io && plus.io.convertLocalFileSystemURL) {
      return plus.io.convertLocalFileSystemURL(relativePath);
    }
    return relativePath;
  }

  /**
   * 批量转换对象中所有 value 的路径为绝对路径
   */
  function convertIconPaths(iconMap) {
    const result = {};
    Object.keys(iconMap).forEach(key => {
      result[key] = toAbsolutePath(iconMap[key]);
    });
    return result;
  }

  // 音量等级图标：key 为等级名称，value 为图标本地绝对路径
  const volumeLevelIcons = ref(convertIconPaths({
    "Mute": "/static/images/callview-self-mute.png", // 可以替换您项目中的实际图标路径
    "Low": "/static/images/callview-network.png" // 可以替换您项目中的实际图标路径
  }));

  onMounted(() => {
    uni.getSystemInfo({
      success: (res) => {
        systemInfo.value = res;
      }
    });
  });
</script>

<style>
  .call-view-container {
    background: rgba(15, 16, 20, 0.5);
    overflow: hidden;
  }
</style>