媒体获取方法

RealtimeKit 提供了灵活的方法来获取和管理参与者媒体（音频和视频轨道）。默认情况下，SDK 会在您初始化它时自动处理媒体获取。然而，某些使用场景需要在 SDK 初始化之前或独立于 SDK 初始化来访问媒体轨道。

何时使用自定义媒体获取

当您需要满足以下需求时，自定义媒体获取非常有用：

在加入前验证参与者：通过验证服务（例如在线教育评估中的监考系统）传递音频和视频。
预处理媒体流：在会话开始之前应用过滤器、转换或质量检查。
与外部服务集成：将媒体发送到第三方 API 进行分析或合规性检查。
重复使用现有轨道：在应用程序的其他地方使用已获取的媒体轨道。

方法 1：SDK 优先（推荐）

先初始化 SDK，然后从会议对象中访问媒体轨道。这是最简单的方法，适用于大多数使用场景。

适用场景：您需要在 SDK 初始化之后访问媒体轨道，以进行日志记录、分析或与其他服务集成。

import { useEffect } from 'react';
import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';

export default function App() {
	const [meeting, initMeeting] = useRealtimeKitClient();

    useEffect(() => {
    	initMeeting({ authToken: "<auth-token>" });
    }, []);

    useEffect(() => {
        if(meeting){
            console.log('audioTrack:: ', meeting.self.audioTrack);
            console.log('videoTrack:: ', meeting.self.videoTrack);
        }

    }, [meeting])

    return <div>Your meeting component comes here</div>;

}

const authToken = "<auth-token>";
const meeting = await RealtimeKitClient.init({
	authToken,
});

console.log("audioTrack:: ", meeting.self.audioTrack);
console.log("videoTrack:: ", meeting.self.videoTrack);

class AppComponent {
	title = "MyProject";
	@ViewChild("myid") meetingComponent: RtkMeeting;
	rtkMeeting: RealtimeKitClient;

	async ngAfterViewInit() {
		const meeting = await RealtimeKitClient.init({
			authToken: "<auth-token>",
		});

		console.log("audioTrack:: ", meeting.self.audioTrack);
		console.log("videoTrack:: ", meeting.self.videoTrack);
	}
}

方法 2：媒体优先

首先使用 RealtimeKitClient.initMedia() 初始化媒体处理器，然后在初始化期间将其传递给 SDK。SDK 会重复使用获取的媒体轨道，而不会再次请求权限。

适用场景：您需要在加入会话前几分钟提前获取媒体轨道。这对于在线教育评估平台特别有用，因为您希望尽早启用监考或跟踪系统，而无需管理 WebSocket 连接或处理完整 SDK 初始化带来的媒体断开连接。

优势：

SDK 管理媒体获取和浏览器兼容性。
参与者不会被两次提示获取权限。
媒体轨道在您的验证服务和 SDK 之间自动同步。
尽早获取媒体，而无需复杂的 SDK 连接状态管理。

import { useEffect, useState } from 'react';
import RealtimeKitClient from '@cloudflare/realtimekit';
import type { RTKSelfMedia } from '@cloudflare/realtimekit';
import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';

export default function App() {
	const [meeting, initMeeting] = useRealtimeKitClient();
    const [media, setMedia] = useState<RTKSelfMedia>();
    const [readyToInitializeSDK, setReadyToInitializeSDK] = useState(false);

    useEffect(() => {
        async function initMediaWithoutSDKInitialization(){
            const mediaFromSDK = await RealtimeKitClient.initMedia({
              video : true,
              audio: true,
            });

            setMedia(mediaFromSDK);

            console.log('audioTrack', mediaFromSDK.audioTrack);
            console.log('videoTrack', mediaFromSDK.videoTrack);

            setTimeout(() => {
                // 一旦您准备好初始化 SDK，请将此设置为 true
                // 为了模拟现实世界的场景，我们在 5 秒后将其设置为 true
                setReadyToInitializeSDK(true);
            }, 5000);
        }
        if(!media){
            initMediaWithoutSDKInitialization();
        }
    }, [media]);

    useEffect(() => {
        if(meeting){
            return;
        }
        if(!readyToInitializeSDK){
            return;
        }
        if(!media){
            return;
        }
    	initMeeting({ authToken: "<auth-token>", defaults: { mediaHandler: media } });
    }, [meeting, readyToInitializeSDK, media]);

    return <div>Your meeting component comes here</div>;
}

首先使用 RealtimeKitClient.initMedia() 初始化媒体处理器，然后在初始化期间将其传递给 SDK。SDK 会重复使用获取的媒体轨道，而不会再次请求权限。

优势：

SDK 管理媒体获取和浏览器兼容性。
参与者不会被两次提示获取权限。
媒体轨道在您的验证服务和 SDK 之间自动同步。
尽早获取媒体，而无需复杂的 SDK 连接状态管理。

const mediaFromSDK = await RealtimeKitClient.initMedia({
	video: true,
	audio: true,
});

setTimeout(() => {
	const authToken = "<auth-token>";
	RealtimeKitClient.init({
		authToken,
		defaults: {
			mediaHandler: mediaFromSDK,
		},
	}).then((meeting) => {
		// next - meeting.join();
	});
}, 5000);

首先使用 RealtimeKitClient.initMedia() 初始化媒体处理器，然后在初始化期间将其传递给 SDK。SDK 会重复使用获取的媒体轨道，而不会再次请求权限。

优势：

SDK 管理媒体获取和浏览器兼容性。
参与者不会被两次提示获取权限。
媒体轨道在您的验证服务和 SDK 之间自动同步。
尽早获取媒体，而无需复杂的 SDK 连接状态管理。

class AppComponent {
	title = "MyProject";
	@ViewChild("myid") meetingComponent: RtkMeeting;
	rtkMeeting: RealtimeKitClient;

	async ngAfterViewInit() {
		const mediaFromSDK = await RealtimeKitClient.initMedia({
			video: true,
			audio: true,
		});

		setTimeout(() => {
			const authToken = "<auth-token>";
			RealtimeKitClient.init({
				authToken,
				defaults: {
					mediaHandler: mediaFromSDK,
				},
			}).then((meeting) => {
				// next - meeting.join();
			});
		}, 5000);
	}
}

方法 3：自管理（高级）

使用浏览器 API 独立获取和管理媒体轨道，然后在启用音频和视频时将它们传递给 SDK。

适用场景：您拥有现有的媒体管理基础设施，或者需要完全控制媒体获取。

注意事项：

您负责处理浏览器兼容性和 API 更改。
SDK 更新不会自动修复您代码中的媒体获取问题。
需要更深入的 WebRTC 和浏览器媒体 API 知识。

在禁用音频和视频的情况下初始化 SDK，然后使用您的自定义轨道启用它们：

import { useEffect } from 'react';
import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';

export default function App() {
	const [meeting, initMeeting] = useRealtimeKitClient();

    useEffect(() => {
    	initMeeting({ authToken: "<auth-token>" });
    }, []);

    useEffect(() => {
        async function setupMediaTracks(){
            if (meeting) {
                let audioTrack; // 在此处放入您从浏览器获取的 audioTrack
                let videoTrack; // 在此处放入您从浏览器获取的 videoTrack
                await meeting.self.enableAudio(audioTrack);
                await meeting.self.enableVideo(videoTrack);
                // await meeting.self.join();
            }
        }
        setupMediaTracks();

    }, [meeting])

    return <div>Your meeting component comes here</div>;

}

const authToken = "<auth-token>";
const meeting = await RealtimeKitClient.init({
	authToken,
});

let audioTrack; // 在此处放入您从浏览器获取的 audioTrack
let videoTrack; // 在此处放入您从浏览器获取的 videoTrack
await meeting.self.enableAudio(audioTrack);
await meeting.self.enableVideo(videoTrack);

class AppComponent {
	title = "MyProject";
	@ViewChild("myid") meetingComponent: RtkMeeting;
	rtkMeeting: RealtimeKitClient;

	async ngAfterViewInit() {
		const meeting = await RealtimeKitClient.init({
			authToken: "<auth-token>",
		});

		let audioTrack; // 在此处放入您从浏览器获取的 audioTrack
		let videoTrack; // 在此处放入您从浏览器获取的 videoTrack
		await meeting.self.enableAudio(audioTrack);
		await meeting.self.enableVideo(videoTrack);
	}
}