Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/daily-demos/vue-call-object
https://github.com/daily-demos/vue-call-object
Last synced: 19 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/daily-demos/vue-call-object
- Owner: daily-demos
- License: bsd-2-clause
- Created: 2021-09-13T21:02:08.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-03T14:35:10.000Z (about 1 year ago)
- Last Synced: 2024-02-02T05:17:17.724Z (4 months ago)
- Language: Vue
- Size: 677 KB
- Stars: 4
- Watchers: 3
- Forks: 8
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-vue - Customizable Vue video chat app - A Vue video call demo app featuring local device controls and screen sharing. (Resources / Examples)
- awesome-daily - Custom video app
- awesome-vue - Customizable Vue video chat app - A Vue video call demo app featuring local device controls and screen sharing. (Resources / Examples)
- awesome-vue - Customizable Vue video chat app - A Vue video call demo app featuring local device controls and screen sharing. (Resources / Examples)
README
# Vue + Daily call object (custom) video call demo
This project demonstrates how to build a custom video call with Daily's custom [call object](https://docs.staging.daily.co/call-object) mode using [Vue.js](https://vuejs.org/).
To view a deployed example of this demo, visit [https://vue-call-object.netlify.app](https://vue-call-object.netlify.app).
---
## Running this demo locally
Clone this repo and, from the project directory, run:
```bash
npm install
npm run dev
```
Open http://localhost:8080 to view it in the browser.
## Getting set up with Daily
To use this demo, you will need a Daily room to join.
To get a Daily room URL, [create a Daily account](https://dashboard.daily.co/signup).
Once you have an account and are logged into the [Daily Dashboard](https://dashboard.daily.co), you can [create a new Daily room](https://dashboard.daily.co/rooms/create).
Copy the new room's URL. You can use this in the form on the home page.
The room URL will be in the following format:
`https://.daily.co/`
---
## Features
This demo demonstrates how to build a video call in Vue with the following features:
- multi-participant calls
- local participant controls to:
- control camera and microphone devices
- share your screen (a limit of 1 screen share at a time is enforced here for simplicity)
- leave the current call
- join any Daily call
- set your username before joining the call
### Ideas for expanding this demo
Some features that could be added to this demo include:
- Adding [prejoin UI](https://www.daily.co/blog/build-your-own-prejoin-call-ui-in-a-custom-daily-video-chat-app/) to test devices and see your local video before joining
- Allowing users to create rooms via the app using Daily's [REST API](https://docs.staging.daily.co/reference/rest-api/rooms)
- Managing meeting permissions via [room settings](https://docs.staging.daily.co/guides/controlling-who-joins-a-meeting), like making the call a [broadcast call](https://www.daily.co/blog/daily-prebuilt-broadcast-call-deep-dive/)
---
## Related blog posts/tutorials
Learn more about this demo on the [Daily blog](https://www.daily.co/blog/tag/vue/).
- [Build a custom video chat app with Daily and Vue.js](https://www.daily.co/blog/custom-video-chat-app-with-daily-and-vue/)
- [Build a custom chat widget in Vue with Daily’s sendAppMessage](https://www.daily.co/blog/build-a-custom-chat-widget-with-vue-with-dailys-sendappmessage-method/)