Блог

У меня есть родительский компонент с двумя кнопками. Кнопка 1 должна открывать iFrame с URL 1, а кнопка 2 — url 2. Кажется, что, как я его построил, iFrame не перестраивается полностью.

parent.js

 if (currentTable.id === "Bo3Ko3K") {
    <DailyCo url="https://meeting.daily.co/123456" />
} else if (currentTable.id === "9RGmWxX") {
    <DailyCo url="https://meeting.daily.co/abcdef" />
}
 

child.js

 import { makeStyles } from "@material-ui/core/styles";
import React, { useRef, useEffect } from "react";
import DailyIframe from "@daily-co/daily-js";

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%",
    height: "100vh",
    border: "0",
  },
}));

const DailyCo = ({ url }) => {
  const classes = useStyles();
  const iframeRef = useRef();

  useEffect(() => {
    if (!url) {
      console.error("please set an url!");
      return;
    }
    const daily = DailyIframe.wrap(iframeRef.current, {
      // showLeaveButton: true,
    });
    daily.join({ url });
  }, [url]);

  return (
    <iframe
      className={classes.root}
      title="video call iframe"
      ref={iframeRef}
      allow="camera; microphone; fullscreen"
    ></iframe>
  );
};

export default DailyCo;
 

У вас есть 2 варианта, которые я вижу, чтобы заставить это работать:

1. Вам нужно покинуть собрание, прежде чем присоединиться к новому. К сожалению, этот метод усложняется тем, что ежедневно требуется около 7 мс (асинхронно), чтобы покинуть собрание. Таким образом, невозможно просто useEffect выполнить обычную очистку. Это также забавно, потому daily.leave() что возвращает обещание, которое никогда не выполняется, если вы не на собрании. Их документация в leave() настоящее время вводит в заблуждение:

Покидает собрание. Если встречи нет, этот метод ничего не делает.

Возвращает null;

https://codesandbox.io/s/reverent-grass-qpjke?file=/src/App.js

   const iframeRef = useRef();
  const dailyRef = useRef();
  const joinedRef = useRef();
  useEffect(() => {
    dailyRef.current = DailyIframe.wrap(iframeRef.current, {
      // showLeaveButton: true,
    });
    dailyRef.current.on('left-meeting',()=>{
      joinedRef.current=false;
    })
    dailyRef.current.on('joining-meeting',()=>{
      joinedRef.current=true
    })
    console.log("mounted");
    return () => {
      dailyRef.current.destroy();
      console.log("unmount");
    };
  }, []);
  useEffect(() => {
    (async () => {
      if (joinedRef.current) {
        // This is needed due to it never returning
        // if there wasn't a meeting joined first...
        await dailyRef.current.leave();
      }
      if (!url) {
        console.error("please set an url!");
        return;
      }
      await dailyRef.current.join({ url });
    })();
  }, [url]);
 

2. Вам нужно позвонить daily.destroy() перед созданием нового переноса, иначе они мешают друг другу, возникают проблемы, и новый никогда не устанавливается полностью. Эта проблема описана в их документации для destroy

Вы можете повторно использовать iframe вызова daily-js или объект вызова несколько раз (последовательность вызовов методов join(), leave(), join() И т. Д. Будет работать нормально).

Но когда вы закончите с объектом вызова daily-js, вы должны вызвать destroy(), чтобы освободить все связанные с ним ресурсы.

Это особенно важно, если вы планируете создать еще один объект daily-js в будущем. Если вы не вызовете destroy(), а позже создадите новый объект вызова daily-js, прослушиватели событий из старого объекта и нового объекта будут мешать друг другу.

https://codesandbox.io/s/spring-water-nv3k3?file=/src/App.js

   const iframeRef = useRef(null);
  useEffect(() => {
    if (!url) {
      console.error("please set an url!");
      return;
    }
    const daily = DailyIframe.wrap(iframeRef.current, {
      // showLeaveButton: true,
    });
    daily.join({ url });
    return () => {
      daily.destroy();
    };
  }, [url]);
 

В общем, я бы рекомендовал использовать вариант 1 хотя бы потому, что он более производительный (меньше настроек и времени, необходимых для смены собраний). Хотя проще просто уничтожить перенос и воссоздать его.