寻求基于Angular的Azure Communication Services视频通话实现示例代码

1. 安装依赖 #

首先安装ACS核心SDK和Angular UI组件库：

npm install @azure/communication-common @azure/communication-calling @azure/communication-ui-angular

2. 通话服务（call.service.ts） #

封装ACS通话逻辑：

import { Injectable } from '@angular/core';
import { CallClient, CallAgent, Call, RemoteVideoStream } from '@azure/communication-calling';
import { AzureCommunicationTokenCredential } from '@azure/communication-common';

@Injectable({ providedIn: 'root' })
export class CallService {
  private callClient: CallClient | null = null;
  private callAgent: CallAgent | null = null;
  private currentCall: Call | null = null;

  // 初始化CallAgent（需传入有效的ACS访问令牌）
  async initialize(token: string): Promise<void> {
    this.callClient = new CallClient();
    const tokenCredential = new AzureCommunicationTokenCredential(token);
    this.callAgent = await this.callClient.createCallAgent(tokenCredential);
  }

  // 加入群组通话
  async joinGroupCall(groupId: string): Promise<void> {
    if (!this.callAgent) throw new Error('CallAgent未初始化');
    
    this.currentCall = this.callAgent.join(
      { groupId: groupId },
      { videoOptions: { localVideoStream: await this.createLocalVideoStream() } }
    );

    // 监听远端视频流
    this.currentCall.on('remoteVideoStreamAdded', (args) => {
      this.subscribeToRemoteVideoStream(args.stream);
    });
  }

  // 创建本地视频流
  private async createLocalVideoStream(): Promise<any> {
    const localVideoStream = await this.callClient?.createLocalVideoStream();
    return localVideoStream;
  }

  // 订阅远端视频流
  private subscribeToRemoteVideoStream(stream: RemoteVideoStream): void {
    stream.on('isAvailableChanged', () => {
      if (stream.isAvailable) {
        // 可在此处将远端流绑定到UI元素
        console.log('远端视频流可用', stream);
      }
    });
  }

  // 结束通话
  endCall(): void {
    this.currentCall?.hangUp();
    this.currentCall = null;
  }
}

3. 视频通话组件（video-call.component.ts） #

处理UI交互：

import { Component, OnInit } from '@angular/core';
import { CallService } from './call.service';

@Component({
  selector: 'app-video-call',
  templateUrl: './video-call.component.html',
  styleUrls: ['./video-call.component.css']
})
export class VideoCallComponent implements OnInit {
  groupId = 'test-group-call-id';
  acsToken = 'your-acs-access-token'; // 替换为实际的ACS令牌

  constructor(private callService: CallService) {}

  ngOnInit(): void {
    // 初始化通话客户端
    this.callService.initialize(this.acsToken).catch(err => console.error(err));
  }

  joinCall(): void {
    this.callService.joinGroupCall(this.groupId).catch(err => console.error(err));
  }

  endCall(): void {
    this.callService.endCall();
  }
}

4. 组件模板（video-call.component.html） #

渲染本地视频和控制按钮：

<div class="video-call-container">
  <!-- 本地视频预览 -->
  <div class="local-video">
    <azure-communication-ui-angular-local-video-stream *ngIf="callService.currentCall"></azure-communication-ui-angular-local-video-stream>
  </div>

  <!-- 远端视频容器 -->
  <div class="remote-videos">
    <!-- 可通过循环渲染所有远端视频流 -->
  </div>

  <!-- 控制按钮 -->
  <div class="call-controls">
    <button (click)="joinCall()" [disabled]="callService.currentCall">加入通话</button>
    <button (click)="endCall()" [disabled]="!callService.currentCall">结束通话</button>
  </div>
</div>

注意事项 #

• 确保acsToken是有效的Azure Communication Services用户访问令牌，可通过Azure服务端API生成
• 需在Angular项目中导入ACS UI模块到app.module.ts：

import { AzureCommunicationUiAngularModule } from '@azure/communication-ui-angular';

@NgModule({
  imports: [
    // ...其他模块
    AzureCommunicationUiAngularModule
  ]
})
export class AppModule { }

• 浏览器需要摄像头和麦克风权限，需确保页面使用HTTPS（本地开发可使用ng serve --ssl）

内容的提问来源于stack exchange，提问作者Sudeep