mkdir acs-teams-backend
cd acs-teams-backend
npm init -y
npm install @azure/communication-identity @azure/communication-rooms @azure/identity microsoft-graph dotenv express

// services/acsIdentityService.js
const { CommunicationIdentityClient } = require("@azure/communication-identity");
const connectionString = process.env.ACS_CONNECTION_STRING;
const identityClient = new CommunicationIdentityClient(connectionString);

async function createUserAndToken(scopes = ["voip"]) {
    // 为外部用户创建ACS身份和令牌
    const user = await identityClient.createUser();
    const tokenResponse = await identityClient.getToken(user, scopes);
    return {
        userId: user.communicationUserId,
        token: tokenResponse.token,
        expiresOn: tokenResponse.expiresOn
    };
}

module.exports = { createUserAndToken };

// services/teamsInteropService.js
const { RoomsClient } = require("@azure/communication-rooms");
const { ClientSecretCredential } = require("@azure/identity");
const { Client } = require("@azure/communication-rooms");
const { Client: GraphClient } = require("@azure/communication-rooms"); // 注意：实际使用microsoft-graph
// 为简洁，此处示意流程。实际需要：
// 1. 使用Graph SDK (microsoft-graph) 和 AAD凭证 (ClientSecretCredential) 创建或获取一个Teams在线会议。
// 2. 从会议对象中提取 `joinWebUrl`。
// 3. 使用ACS RoomsClient (已通过连接字符串认证) 创建或获取会议室标识符。

const { DefaultAzureCredential } = require("@azure/identity");
const { CommunicationIdentityClient } = require("@azure/communication-identity");

const connectionString = process.env.ACS_CONNECTION_STRING;
const roomsClient = new RoomsClient(connectionString);

async function getRoomIdForTeamsMeeting(teamsMeetingJoinUrl) {
    // 此函数核心：将Teams会议链接与ACS会议室关联
    // 注意：以下为简化逻辑，实际生产代码需处理重复创建、过期等问题
    try {
        // 首先尝试查找是否已为该会议链接创建过房间
        // ... (此处省略房间列表查询逻辑)
        
        // 若未找到，则创建新房间。`validFrom` 和 `validUntil` 应根据会议时间设置。
        const validFrom = new Date();
        const validUntil = new Date(validFrom.getTime() + 2 * 60 * 60 * 1000); // 假设2小时后结束
        const room = await roomsClient.createRoom({
            validFrom,
            validUntil,
        });
        
        // 关键步骤：将Teams会议链接添加到房间
        await roomsClient.addOrUpdateParticipants(room.id, {
            participants: [
                {
                    id: { communicationUserId: "8:teamsvisitor" }, // 这是一个特殊的Microsoft Teams互通用户标识符
                    role: "Attendee",
                },
            ],
            // 在实际API中，需要通过`roomsClient.updateRoom`或特定方法设置`teamsMeetingUrl`属性。
            // 以下代码为概念展示，具体API请参考最新微软文档。
        });
        // 假设通过某种方式（如房间属性）存储了teamsMeetingJoinUrl
        console.log(`Room ${room.id} created for Teams meeting.`);
        return room.id; // 这个room.id就是后续前端加入会议所需的 `roomIdentifier`
    } catch (error) {
        console.error("Failed to create/get room for Teams meeting:", error);
        throw error;
    }
}

module.exports = { getRoomIdForTeamsMeeting };

// app.js
const express = require('express');
const { createUserAndToken } = require('./services/acsIdentityService');
const { getRoomIdForTeamsMeeting } = require('./services/teamsInteropService');
const app = express();
app.use(express.json());

// 端点1：为外部客户创建身份和令牌
app.post('/api/acs-token', async (req, res) => {
    try {
        const { scope = ["voip"] } = req.body; // 可接受前端指定的权限范围
        const identity = await createUserAndToken(scope);
        res.json(identity);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

// 端点2：获取特定Teams会议对应的ACS房间ID (由客服端触发)
app.post('/api/teams-room', async (req, res) => {
    try {
        const { teamsMeetingJoinUrl } = req.body; // 客服代表提供其预定的Teams会议链接
        if (!teamsMeetingJoinUrl) {
            return res.status(400).json({ error: "teamsMeetingJoinUrl is required" });
        }
        const roomId = await getRoomIdForTeamsMeeting(teamsMeetingJoinUrl);
        res.json({ roomId });
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Backend service listening on port ${port}`));

npx create-react-app acs-customer-client
cd acs-customer-client
npm install @azure/communication-calling @azure/communication-react @fluentui/react-components

// components/CallScreen.jsx
import React, { useState, useEffect, useRef } from 'react';
import { CallClient, CallAgent, Features, LocalVideoStream } from '@azure/communication-calling';
import { AzureCommunicationTokenCredential } from '@azure/communication-common';

const CallScreen = ({ userId, token, roomId, displayName = 'Guest Customer' }) => {
    const [callAgent, setCallAgent] = useState(null);
    const [call, setCall] = useState(null);
    const [isConnected, setIsConnected] = useState(false);
    const localVideoContainer = useRef(null);
    const remoteVideoContainer = useRef(null);

    // 1. 初始化呼叫代理
    useEffect(() => {
        const initCallAgent = async () => {
            try {
                const tokenCredential = new AzureCommunicationTokenCredential(token);
                const callClient = new CallClient();
                const agent = await callClient.createCallAgent(tokenCredential, { displayName });
                setCallAgent(agent);
                console.log("Call agent created.");
            } catch (error) {
                console.error('Failed to create call agent:', error);
            }
        };
        if (token) initCallAgent();
        return () => {
            if (callAgent) {
                callAgent.dispose();
            }
        };
    }, [token, displayName]);

    // 2. 加入会议（房间）
    const joinMeeting = async () => {
        if (!callAgent || !roomId) return;
        try {
            // 配置加入选项，例如是否开启摄像头/麦克风
            const localVideoStream = new LocalVideoStream(await createLocalCameraStream());
            const videoOptions = localVideoStream ? { localVideoStreams: [localVideoStream] } : {};
            const callOptions = { videoOptions };
            // roomId 是从后端API获取的ACS会议室标识符
            const teamsCall = callAgent.join({ roomId }, callOptions);
            setCall(teamsCall);
            setIsConnected(true);
            setupCallEventHandlers(teamsCall);
            // 渲染本地视频预览（如果开启了摄像头）
            if (localVideoStream && localVideoContainer.current) {
                const renderer = new VideoStreamRenderer(localVideoStream);
                const view = await renderer.createView();
                localVideoContainer.current.appendChild(view.target);
            }
        } catch (error) {
            console.error('Failed to join the meeting:', error);
        }
    };

    // 3. 设置通话事件监听器
    const setupCallEventHandlers = (currentCall) => {
        currentCall.on('remoteParticipantsUpdated', e => {
            e.added.forEach(participant => {
                // 订阅远端参与者视频流
                participant.videoStreams.forEach(stream => {
                    if (stream.isAvailable && remoteVideoContainer.current) {
                        const renderer = new VideoStreamRenderer(stream);
                        renderer.createView().then(view => {
                            remoteVideoContainer.current.appendChild(view.target);
                        });
                    }
                });
                participant.on('videoStreamsUpdated', e => { /* 处理视频流更新 */ });
            });
            e.removed.forEach(participant => {
                // 清理移除的参与者视频
                console.log(`Participant ${participant.displayName} left.`);
            });
        });
        currentCall.on('stateChanged', () => {
            if (currentCall.state === 'Disconnected') {
                setIsConnected(false);
                setCall(null);
                // 清理所有视频渲染
                if (localVideoContainer.current) localVideoContainer.current.innerHTML = '';
                if (remoteVideoContainer.current) remoteVideoContainer.current.innerHTML = '';
            }
        });
    };

    // 4. 挂断通话
    const hangUpCall = () => {
        if (call) {
            call.hangUp();
        }
    };

    const createLocalCameraStream = async () => {
        // 请求摄像头权限并返回MediaStream，此处简化
        try {
            const devices = await navigator.mediaDevices.enumerateDevices();
            const cameras = devices.filter(d => d.kind === 'videoinput');
            if (cameras.length > 0) {
                const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
                return stream;
            }
        } catch (e) {
            console.warn('Could not get local camera:', e);
        }
        return null;
    };

    return (
        <div>
            <h2>客户支持会议</h2>
            <div style={{ display: 'flex', gap: '20px' }}>
                <div ref={localVideoContainer} style={{ width: '240px', height: '180px', border: '1px solid black' }}>
                    <p>本地预览</p>
                </div>
                <div ref={remoteVideoContainer} style={{ width: '480px', height: '360px', border: '1px solid black' }}>
                    <p>远端视频（Teams参会者）</p>
                </div>
            </div>
            <div style={{ marginTop: '20px' }}>
                {!isConnected ? (
                    <button onClick={joinMeeting} disabled={!callAgent || !roomId}>
                        加入支持会议
                    </button>
                ) : (
                    <button onClick={hangUpCall} style={{ backgroundColor: '#d9534f' }}>
                        挂断
                    </button>
                )}
            </div>
            <p>状态: {isConnected ? '已连接至Teams会议' : '准备就绪'}</p>
        </div>
    );
};

// 注意：需要从SDK导入 VideoStreamRenderer
import { VideoStreamRenderer } from '@azure/communication-calling';
export default CallScreen;