javascript Amazon Chime SDK和React对远程磁贴进行排序

我正在开发一个视频聊天应用程序，它是使用Chime SDK和React实现的。目前我正在开发一个排序算法，根据用户的视频状态和麦克风活动对用户进行排序。
与会者被表示为一个对象数组，看起来类似于此（简化）

attendees = [{id: 1, name "User 1"}, {id: 2, name: "User 2"}, ...];

字符串
然后，我有一个用户ID数组，它根据用户活动的数量来表示用户活动：

activeSpeakers = [2, 1]

型
这个数组可以是空的，这意味着没有人在说话，或者如果有项目，第一个项目是最活跃的发言者的id，最后一个是最不活跃的发言者的id。
我也有一个用户ID数组，其中包含按时间顺序排序的用户ID谁有相机上。这个数组也可以是空的，这意味着没有人有相机活动。

attendeeToTileId = [2]

型
我的任务是根据这些条件对用户瓷砖进行排序：
1.摄像头有源和有源扬声器
1.摄像头活动和非活动扬声器
1.摄像头不活动，扬声器活动
1.摄像头和扬声器处于非活动状态
另外，如果你熟悉Chime SDK，你知道这些状态更新频繁，我的想法是throthle排序。
所以我用这样的东西盯着

useEffect(() => {

// sort logic here
// but should be throtthled 
// or maybe debounced?

}, [attendees, attendeeToTileId, activeSpeakers])

型
我尝试了自定义throtling实现以及lodash库，但似乎没有什么工作正常。
所以总结一下：
1.我需要一个排序算法的建议
1.我需要一个thrathling/debounce的React策略
无论哪一个，我都很高兴。我只是需要一个好的起点。

经过几个星期的调整和几个月的延迟写答案，我已经找到了一个解决方案，似乎工作得很好。
我创建了一个calculateSortingScore函数，它根据麦克风的活动和摄像头状态为每个瓦片分配一个分数。
下面是函数的代码片段：

const calculateSortingScore = (attendee: RosterAttendeeType, activeSpeakers: string[], activeCameras: string[]) => {
        let score = 0
        /** Priorities for sorting:
         * 1. Users with camera on and talking
         * 2. Users with camera on and not talking
         * 3. Users with camera off and talking
         * 4. Users with camera off and not talking
         */

        // Camera on and talking
        if (
            activeCameras.length &&
            activeCameras.includes(attendee.chimeAttendeeId) &&
            activeSpeakers.includes(attendee.chimeAttendeeId)
        ) {
            score += 4 + activeSpeakers.indexOf(attendee.chimeAttendeeId)
        }

        // Camera on and muted or not talking
        if (
            activeCameras.length &&
            activeCameras.includes(attendee.chimeAttendeeId) &&
            !activeSpeakers.includes(attendee.chimeAttendeeId)
        ) {
            score += 3
        }

        // Camera off and talking or not muted
        if (
            activeCameras.length &&
            !activeCameras.includes(attendee.chimeAttendeeId) &&
            activeSpeakers.includes(attendee.chimeAttendeeId)
        ) {
            score += 2 + activeSpeakers.indexOf(attendee.chimeAttendeeId)
        }
        // Camera off and muted or not talking
        if (
            activeCameras.length &&
            !activeCameras.includes(attendee.chimeAttendeeId) &&
            !activeSpeakers.includes(attendee.chimeAttendeeId)
        ) {
            score += 1
        }
        return score
    }

字符串
然后，我创建了一个自定义的排序函数，由于麦克风活动而受到限制。如果有20个用户发言，它将变得混乱。因此，我限制了函数调用。

const sortTiles = throttle((activeSpeakers, activeCameras, attendees) => {
        // 5.
        const sortedAttendees = [...attendees].sort(
            (a, b) =>
                calculateSortingScore(b, activeSpeakers, activeCameras) - calculateSortingScore(a, activeSpeakers, activeCameras)
        )
        setAttendeesFinal(sortedAttendees)
    }, throttleInterval) // Throttle to once per 10 seconds

型
此外，我定义了一个10000 ms的throttleInterval，这似乎适合我的用例，但可以根据需要进行调整。但是，我不会将其设置为小于5000 ms。因此，我定义如下：const throttleInterval = 10000。

const throttledFunctionMemoized = useMemo(() => {
        // 4.
        return sortTiles
        // eslint-disable-next-line
    }, []) // This array of dependencies ensures that the function is memoized once

// Create a memoized callback using the throttled function
    const throttledCallback = useCallback(() => {
        // 3.
        throttledFunctionMemoized(activeSpeakerState, Object.keys(attendeeIdToTileId), attendees) // Pass any required parameters to the throttled function
    }, [attendees, activeSpeakerState, attendeeIdToTileId, throttledFunctionMemoized]) // The callback will only change if count or the throttled function changes

useEffect(() => {
        // 2.
        throttledCallback()
        // eslint-disable-next-line
    }, [attendees, activeSpeakerState, attendeeIdToTileId])

useEffect(() => {
        // 1.
        console.log("SORT OUTPUT: ", attendeesFinal)
    }, [attendeesFinal])

型
剩下的唯一一件事就是在attendeesFinal数组上循环并显示tiles。可能有更好的解决方案来实现这一点，但这一个工作。

javascript Amazon Chime SDK和React对远程磁贴进行排序

1条答案

相关问题

热门标签

最新问答