prebuilt-ui VS daily-js

In today’s tutorial, we’ll rebuild our Daily Prebuilt demo, already built in React and Vue, but this time with Svelte! ✨

At Daily, we’ve spent a lot of time making sure our video and audio-only APIs can be used with any frontend framework, or no framework at all. 🍦 It’s important to us to make flexible APIs that can be incorporated into any app looking to add audio and video chat. We’ve created several demos for our customers using plain JavaScript, React, Next.js, React Native, and more to help cover as many use cases as possible.

I can't speak to all of these because I haven't used them all (I work at Daily so I'm obviously biased) but we cover all of these requirements with our Prebuilt video option. Or you could use our APIs to build a custom video app with all these features. (Daily's built on WebRTC, btw.) Here's one of the demo apps if you want to test it out. https://github.com/daily-demos/prebuilt-ui This one is plan Javascript but there are a bunch of other React demos in that Github org, too. (e.g. https://github.com/daily-demos/webinar)

As others already mentioned, there are lots of third party video APIs that can handle this for you so you don't have to get into the nitty gritty with WebRTC. I work at Daily (so I'll plug that) but ultimately you've got several options. Here's a demo app showing how to use the Daily prebuilt UI-- it will just embed the video call right into the app for you.

Having someone to oversee a video call meeting is important for numerous reasons, including being able to manage which participants are allowed in the call. With Daily’s Client SDK for JavaScript, participants can optionally join as meeting owners, which gives them special privileges like being able to remove participants from a call.

Daily’s Client SDK for JavaScript: An SDK that enables you to build video into your applications with granular control and flexibility over the UI, media handling, etc. The entry point to both of these approaches is daily-js, our JavaScript library. For Daily Prebuilt, you would use the DailyIframe.createFrame() factory method to get started. For a custom implementation with the client SDK, you’d use the DailyIframe.createCallObject() factory method.

If you’ve read Daily’s blog before, you’ll know we’re happy to show developers all the different ways you can incorporate Daily’s SDKs into your apps. One of the best aspects of Daily's Client SDK for JavaScript is that it’s front-end framework agnostic. If you love React and Next.js, we have several tutorials and demo apps for you! If you prefer Svelte, Vue, or plain JavaScript, we’ve got you covered there, too.

You do not need to be familiar with any frameworks to follow along with this post. The demo is written in “vanilla” TypeScript and utilizes a client and server component. On the client, I use Daily’s Client SDK for JavaScript to instrument and manage the video call. On the server, I use Daily’s REST API to create Daily rooms. This post will focus exclusively on the client side.

I set up an event handler for Daily’s [’joined-meeting’](https://docs.daily.co/reference/daily-js/events/meeting-events#joined-meeting) event. This event will fire when the local participant joins the call (not just the prejoin lobby, but the video call itself). When this happens, I’ll hide the presence div - the participant will be able to see who’s in the call through Prebuilt’s own UI one they’re in.

The files we’re including in the tag. There’s script tag that includes daily-js: . This allows us to access Daily’s Client SDK for JavaScript in our project. Below that, there are also the index.js and style.css files, which are the other local files we’ll be working in.

Daily’s Client SDK for JavaScript already provides some tools to simplify this for client-side-only implementations, including our "app-message" events and custom user data features. For instances where data needs extend beyond the participant object, or where dispatching "app-message" events isn't suitable, having the ability to associate a blob of data for all participants can be useful.

Hey, I work at Daily (full disclosure) -- a video API company -- and this is something our JavaScript library can handle (and there's a free tier). You can either build a custom app or use Daily Prebuilt (a video call embed). Daily Prebuilt is built with our custom APIs so both cover this use case. Going the custom route, in larger calls you'll need to do things like add pagination to limit videos on the screen at one time. (Here's a demo app showing how and a blog series reviewing the details.) Building from scratch will be a lot of work to be honest so it depends how much time you want to spend on it. There are a lot of variables to consider between browsers and devices, so it's a lot... but doable! There are also several video API libraries so it's just a matter of comparing what you get for each one. :)

Daily's JavaScript library, daily-js, is compatible with any frontend framework, which means choosing your stack is really up to you. Today we'll be looking at one of our favourite frameworks at Daily...

We’ve spent a lot of time discussing React demos and sample code in our blog posts, but React is not your only option for a framework. Vue.js, for example, is another great option that you can use with daily-js.