React 화상 채팅 애플리케이션에 비행 이모티콘 반응 추가

만약 한 장의 사진이 천 마디 말과 맞먹는다면, 이 이모티콘은 무엇을 의미합니까?수십 년 동안 그들은 각종 서면 교류에 색채를 더해 왔다. 문자메시지부터 Moby Dick의 완전한 번역, 그리고 본문과 가장 관련된 영상 통화까지.
우리는 Daily에 개발자 도구를 구축하여 온라인 교류를 가능하게 한다.이모티콘 반응을 영상통화에 추가하면 참가자들에게 익숙함(과 즐거움!)자신을 표현하는 방식.
본 강좌에서 우리는 매일 call object의 맞춤형 영상 통화에 비행 표정 반응을 추가할 것이다.

예를 들어 인스타그램 라이브, 트위터 페리스코프 라이브 스트리밍이나 트위치의'이모티콘 벽'에서 비슷한 이모티콘이 겹쳐 생방송 스트리밍 전체 화면에 덮여 있는 것을 본 적이 있을 것이다.우리는 리액션, CSS, 그리고 일상적인 방법으로 우리의 웹 RTC 영상 통화를 위해 유사한 반응 표정 벽을 만들 것이다.
이를 위해 다음을 수행합니다.

버튼을 만들고

을 눌렀을 때 우리가 선택한 이모티콘을 보냅니다

매일 sendAppMessage() 방법

을 사용하여 다른 모든 참가자에게 우리의 이모티콘 반응을 보냅니다.

이모티콘을 보내는 로컬 참여자와 이모티콘을 받는 원격 참여자에게 이모티콘

우리는 다음 주에 이 모든 일을 완성할 것이다.우리가 이전 post에서 구축한 js 프레젠테이션 응용 프로그램참여자, 설비, 궤적 관리 등 응용 기초에 대한 상세한 정보는 이 강좌를 참고하십시오.이 글은 이모티콘에만 집중한다😎

The demo and code snippets are React-based, but you can still apply the essence of the steps outlined in the tutorial to work with other frameworks.

데모를 로컬에서 실행하려면 다음과 같이 하십시오.

분리 및 클론 daily-demos/examples repository

cd examples/custom/flying-emojis

설정 DAILY_API_KEY 및 DAILY_DOMAIN 환경 변수(env.example 참조)

yarn

yarn workspace @custom/flying-emojis dev

이것만 있으면 우리의 이모티콘은 비행할 수 있다.

이모티콘을 보내는 단추를 만듭니다

호출 트레이 구성 요소에 '이모티콘' 으로 표시된 별 모양 아이콘 ( Tray.js ) 은 사용 가능한 이모티콘 반응을 표시하고, 참여자가 보낼 이모티콘을 선택할 수 있도록 합니다.

어셈블리의 구조이며 탄젠트 요소가 삭제됩니다.

// Tray.js 

<div>
  {showEmojis && (
    <div className="emojis">
      <Button
        onClick={() => sendEmoji('fire')}
      >
        🔥
      </Button>
      <Button
        onClick={() => sendEmoji('squid')}
      >
        🦑
      </Button>
      <Button
        onClick={() => sendEmoji('laugh')}
      >
        🤣
      </Button>
    </div>
  )}
  <TrayButton
    label="Emoji"
    onClick={() => setShowEmojis(!showEmojis)}
  >
    <IconStar />
  </TrayButton>
</div>

별 모양 아이콘을 클릭하면 사용 가능한 이모티콘이 표시됩니다.참여자가 이모티콘을 선택할 때 이 구성 요소는 sendEmoji()을 호출하고 선택한 문자열을 전달합니다.예를 들어,🦑"onClick={() => sendEmoji('squid')}이라고 합니다.sendEmoji()을 살펴보겠습니다.

// Tray.js 

function sendEmoji(emoji) {
  window.dispatchEvent(
   new CustomEvent('reaction_added', { detail: { emoji } })
 );
 setShowEmojis(false);
}

sendEmoji()은 CustomEvent 을 촉발하여 reaction_added이라고 명명했습니다.이모티콘을 나타내는 문자열은 reaction_added의 CustomEvent.detail 이다.reaction_added을 통해 FlyingEmojisOverlay.js의 window.addEventListener('reaction_added', handleSendFlyingEmoji);을 청취할 예정입니다.

sendAppMessage()를 사용하여 다른 통화 참여자에게 이모티콘 브로드캐스트

handleSendFlyingEmoji()은 CustomEvent.detail에서 이모티콘을 나타내는 문자열을 가져오고 Daily sendAppMessage() 을 사용하여 다른 모든 통화 참여자에게 브로드캐스트합니다.

// FlyingEmojiOverlay.js

function handleSendFlyingEmoji(e) {
   const { emoji } = e.detail;

   if (emoji) {
     callObject.sendAppMessage({ message: `${emoji}` }, '*');
     handleDisplayFlyingEmoji(emoji);
   }
}

sendAppMessage()은 모든 원격 참여자가 받은 대응하는 app-message 사건을 발송한다.<FlyingEmojiOverlay /> 구성 요소가 사건을 탐지하고 메시지를 받을 때 handleReceiveFlyingEmoji():callObject.on('app-message', handleReceiveFlyingEmoji);을 호출합니다.

// FlyingEmojisOverlay.js 

const handleReceiveFlyingEmoji = useCallback(
   (e) => {
     if (!overlayRef.current) {
       return;
     }
     handleDisplayFlyingEmoji(e.data.message);
   },
   [handleDisplayFlyingEmoji]
);

handleReceiveFlyingEmoji()은 메시지 데이터를 e.data.message에서 handleDisplayFlyingEmoji()으로 전달한다.

로컬 발송자와 원격 수신자를 위한 이모티콘 표시

handleDisplayFlyingEmoji()은 발송 시, handleSendFlyingEmoji(), handleReceiveFlyingEmoji()에서 수신 시 모두 호출됩니다.이는 app-message이 원격 참여자에게만 촉발되기 때문이지만, 현지 참여자도 자신의 표정 반응을 볼 수 있기를 바란다.handleDisplayFlyingEmoji() 함수는 문자열을 매개 변수로 합니다.handleSendFlyingEmoji()은 창 이벤트에서 디스플레이 프로세서로 CustomEvent.detail 의 문자열을 전달하고, handleReceiveFlyingEmoji()은 app-message의 이벤트 대상인 e.data.message에서 문자열을 전달한다.
이제 handleDisplayFlyingEmoji()이 어떻게 실행되고 언제 실행되는지 살펴보겠습니다.

// FlyingEmojisOverlay.js 

const handleDisplayFlyingEmoji = useCallback(
  (emoji) => {
    if (!overlayRef.current) {
      return;
    }

    const node = document.createElement('div');
    node.appendChild(document.createTextNode(EMOJI_MAP[emoji]));
    node.className =
      Math.random() * 1 > 0.5 ? 'emoji wiggle-1' : 'emoji wiggle-2';
    node.style.transform = `rotate(${-30 + Math.random() * 60}deg)`;
    node.style.left = `${Math.random() * 100}%`;
    node.src = '';
    overlayRef.current.appendChild(node);

    node.addEventListener('animationend', (e) =>
      handleRemoveFlyingEmoji(e.target)
    );
  },
  [handleRemoveFlyingEmoji]
);

우리 그것을 전부 분해합시다.
우선, <div>을 새로 만들고, 텍스트 노드에서 선택한 이모티콘을 이div에 추가합니다.

// FlyingEmojiOverlay.js 

const node = document.createElement('div');
node.appendChild(document.createTextNode(EMOJI_MAP[emoji]));

이것은 일정한 EMOJI_MAP 대상을 인용하여 이모티콘을 가져옵니다. 이 대상의 키는 이모티콘에 비칩니다.

// FlyingEmojisOverlay.js 

const EMOJI_MAP = {
 fire: '🔥',
 squid: '🦑',
 laugh: '🤣',
};

이모티콘을 추가하면 이 함수에 스타일이 적용됩니다. Math.random() 은 className을 'emoji wiggle-1' 또는 'emoji wiggle-2'으로 설정합니다.

// FlyingEmojisOverlay.js

@keyframes wiggle-1 {
  from {
    margin-left: -50px;
  }
  to {
    margin-left: 50px;
  }
}

@keyframes wiggle-2 {
  from {
    margin-left: 50px;
  }
  to {
    margin-left: -50px;
  }
}

이런 종류는 이모티콘이 화면에서 흔들리기 시작하는 위치를 확정한다.Math.random()은 이모티콘의 회전 정도와 left의 위치도 확정했다.

 // FlyingEmojiOverlay.js 

node.className =
       Math.random() * 1 > 0.5 ? 'emoji wiggle-1' : 'emoji wiggle-2';
 node.style.transform = `rotate(${-30 + Math.random() * 60}deg)`;
 node.style.left = `${Math.random() * 100}%`;

스타일을 설정하여 이모티콘을 overlayRef에 추가할 수 있습니다.

// FlyingEmojisOverlay.js

overlayRef.current.appendChild(node);

마지막으로 handleDisplayFlyingEmoji() 정청 이모티콘 애니메이션이 끝나고 node.addEventListener('animationend', (e) => handleRemoveFlyingEmoji(e.target));에서 추가 하위 항목을 삭제합니다.

const handleRemoveFlyingEmoji = useCallback((node) => {
   if (!overlayRef.current) return;
   overlayRef.current.removeChild(node);
 }, []);

다음❓

우리는 이 강좌가 당신이 영상 통화에서 개성을 증가시키는 데 도움을 줄 수 있기를 바랍니다.이 demo을 토대로 당신은 이모티콘을 사용해 보세요. 이모티콘은'입자 효과'에서 더 빨리 번식하고 폭발할 수 있습니다(부드러운 부동이 아니라 영상 창에서 반등할 수 있습니다).무작위 이모티콘 생성하기;webinar 응용 프로그램에 반응을 추가하거나 confetti 같은 라이브러리를 탐색하십시오.
더 많은 영감을 얻기 위해 인터넷 활동 촉진 플랫폼 버터는 프로젝트 블로그에 floating emojis과 Framer Motion과의 영상통화를 위해 Lottie Web을 어떻게 실현하는지 글을 썼다.
세상은 너의 굴,🌍🦪.