You have 2 options I can see to get this working:
- You need to leave the meeting before joining a new one. Unfortunately this method is complicated by daily taking about 7ms (in an async manner) to leave a meeting. So, it isn't possible to just have the
useEffect clean up normally. It's also fun because daily.leave() returns a promise that never resolves if you aren't in a meeting. Their documentation for leave() is currently misleading:
Leaves the meeting. If there is no meeting, this method does nothing.
Returns 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]);
- You need to call
daily.destroy() before creating a new Wrap, otherwise they interfere with each other and issues abound and the new one never fully sets up. This issue is described in their documentation for destroy
You can re-use the daily-js call iframe or call object multiple times
(a sequence of join(), leave(), join(), etc method calls will work
fine).
But when you are finished with the daily-js call object, you should
call destroy() to free all resources associated with it.
This is particularly important if you plan to create another daily-js
object in the future. If you don't call destroy(), and later create a
new daily-js call object, the event listeners from the old object and
the new object will interfere with one another.
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]);
In general, I'd recommend to use option 1 if only because it's more performant (less set up and time required to change meetings). Even though it's easier to just destroy the wrap and recreate it.
