Web_音视频通信(RTC)-阿里云帮助中心

实时字幕功能为线上会议、在线教育等场景提供实时的语音转文字服务，这项功能可以帮助参会者更好的理解会议内容。DingRTC为您提供了实时字幕的功能。通过阅读本文，您可以了解Web端集成实时字幕能力的方法。

一、集成说明

需要从npm仓库或者其他镜像仓库安装 dingrtc 和 dingrtc-asr 两个依赖包。如果你希望通过直接引入js文件的方式来使用，也可以SDK下载页面下载这两个文件。

二、实现字幕基本功能

在Web端使用字幕功能前，业务服务端需对接完智能纪要功能，并通过StartCloudNote接口启动。

1）Web端创建Client对象

    <script src="./dingrtc.js"></script>
    <script src="./dingrtc-asr.js"></script>


    const client = DingRTC.createClient();

2）Web端加入频道

    await client.join({
        appId: joinInfo.appId,
        token: joinInfo.token,
        uid: joinInfo.uid,
        channel: joinInfo.channel,
        userName: joinInfo.userName,
    });

3）发布音频和视频

    const cameraTrack = await DingRTC.createCameraVideoTrack({
        frameRate: 15,
        dimension: 'VD_1280x720',
    });
    const micTrack = await DingRTC.createMicrophoneAudioTrack();
    client.publish([cameraTrack, micTrack]);

4）订阅音频和视频

    client.on('user-published', (user, mediaType, auxiliary) => {
        if (mediaType === 'video') {
            client.subscribe(user.userId, mediaType, auxiliary).then((track) => {
                track.play(`#uid${user.userId}`);
            });
        } else if (mcuNotSubscribed) {
            mcuNotSubscribed = true;
            client.subscribe('mcu', 'audio').then((track) => {
                track.play();
            });
        }
    });

5）创建并初始化ASR

    const asr = new ASR();
    client.register(asr);
    asr.setEnabled(true)
    asr.setCurrentSpeakLanguage("zh");
    const newLangs = ["zh"];
    asr.setCurrentTranslateLanguages(newLangs);

6）接收字幕消息

    asr.on('message', (message) => {
        addMessage(message);
    })

三、接口说明

/**
 * ASR实时消息
 * @property uid 发言人的uid;
 * @property sentence 识别语句;
 * @property sentenceIndex 语句归属索引, 不同的用户可能拥有相同的索引;
 * @property sentenceEnd 当前语句是否识别完成
 * @property beginTime 语句开始识别时间
 * @property endTime 语句结束识别时间
 * @property language 语句识别归属语言
 * @property translated 语句是否为翻译后版本
 * @property timestamp 服务端下发消息时的时间戳
 */
interface ASRMessage {
    uid: string;
    sentence: string;
    sentenceIndex: number;
    sentenceEnd: boolean;
    beginTime: number;
    endTime: number;
    language: string;
    translated: boolean;
    timestamp: number;
}

/**
 * ASR语言属性信息
 * @property language 语言类型;
 * @property displayName 语言展示名称;
 */
interface LanguageInfo {
    language: string;
    displayName: string;
}

declare class ASR extends EventEmitter<ASREvents> {
    private channel;
    VERSION: string;
    private session;
    private clientChannel;
    // 支持的发言语言类型
    supportedSpeakLanguages: LanguageInfo[];
    // 支持的目标翻译语言类型
    supportedTranslateLanguages: LanguageInfo[];
    // 当前在使用的发言语言，默认为自动识别
    currentSpeakLanguage: string;
    // 当前在使用的目标翻译语言，默认为源语言
    currentTranslateLanguages: string[];
    id: string;
    private reporter;
    // 构造函数
    constructor();
    // 语言识别是否启用
    get enable(): boolean;
    private handleSubscribeAudioChanged;
    attach(channel: DingRTCChannel, clientChannel: any): void;
    // 更新支持的语言列表，全量替换，若当前已设置为发言语言或目标翻译语言的类型被移除则设置失败并给予提示
    updateSupportedLanguages(speakLanguages: LanguageInfo[], translateLanguages: LanguageInfo[]): void;
    // 设置当前发言语言
    setCurrentSpeakLanguage(language: string): void | Promise<void>;
    // 设置目标翻译语言列表
    setCurrentTranslateLanguages(languages: string[]): void | Promise<void>;
    detach(): void;
    setEnabled(enable: boolean): Promise<void>;
}