├── sample.env ├── vue-prebuilt.png ├── public ├── favicon.ico └── index.html ├── babel.config.js ├── src ├── assets │ ├── logo.png │ ├── favicon.png │ ├── mic_icon.png │ ├── camera_icon.png │ ├── github_logo.png │ ├── new_tab_icon.png │ └── screenshare_icon.png ├── main.js ├── api.js ├── App.vue └── components │ ├── Header.vue │ ├── Controls.vue │ └── Home.vue ├── vue-prebuilt-home.png ├── .gitignore ├── netlify.toml ├── package.json ├── LICENSE ├── README.md ├── CONTRIBUTING.md └── CODE_OF_CONDUCT.md /sample.env: -------------------------------------------------------------------------------- 1 | VUE_APP_DAILY_API_KEY= -------------------------------------------------------------------------------- /vue-prebuilt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daily-demos/vue-daily-prebuilt/HEAD/vue-prebuilt.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daily-demos/vue-daily-prebuilt/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daily-demos/vue-daily-prebuilt/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /vue-prebuilt-home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daily-demos/vue-daily-prebuilt/HEAD/vue-prebuilt-home.png -------------------------------------------------------------------------------- /src/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daily-demos/vue-daily-prebuilt/HEAD/src/assets/favicon.png -------------------------------------------------------------------------------- /src/assets/mic_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daily-demos/vue-daily-prebuilt/HEAD/src/assets/mic_icon.png -------------------------------------------------------------------------------- /src/assets/camera_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daily-demos/vue-daily-prebuilt/HEAD/src/assets/camera_icon.png -------------------------------------------------------------------------------- /src/assets/github_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daily-demos/vue-daily-prebuilt/HEAD/src/assets/github_logo.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /src/assets/new_tab_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daily-demos/vue-daily-prebuilt/HEAD/src/assets/new_tab_icon.png -------------------------------------------------------------------------------- /src/assets/screenshare_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daily-demos/vue-daily-prebuilt/HEAD/src/assets/screenshare_icon.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | .env 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | pnpm-debug.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | 2 | [build] 3 | command = "npm run netlify-build" 4 | 5 | [template.environment] 6 | VUE_APP_DAILY_API_KEY = "Replace with API key" 7 | 8 | [[redirects]] 9 | # Proxies the Daily /rooms endpoint, POST will create a room and a GET will return a list 10 | # The placeholder below gets replaced when the build command runs 11 | # as suggested here: https://docs.netlify.com/configure-builds/file-based-configuration/#inject-environment-variable-values 12 | # IF YOU RUN THIS COMMAND LOCALLY DO NOT COMMIT THIS FILE WITH THE API KEY IN IT 13 | # MAKE SURE THE PLACEHOLDER TEXT IS THERE WHENEVER YOU ARE DONE TESTING LOCALLY 14 | from = "/api/rooms" 15 | to = "https://api.daily.co/v1/rooms" 16 | status = 200 17 | force = true 18 | headers = {Authorization = "Bearer VUE_APP_DAILY_API_KEY_PLACEHOLDER"} 19 | 20 | [[redirects]] 21 | from = "/*" 22 | to = "/index.html" 23 | status = 200 -------------------------------------------------------------------------------- /src/api.js: -------------------------------------------------------------------------------- 1 | async function createRoom() { 2 | // we'll add 30 min expiry (exp) so rooms won't linger too long on your account 3 | // we'll also turn on chat (enable_chat) 4 | // see other available options at https://docs.daily.co/reference#create-room 5 | const exp = Math.round(Date.now() / 1000) + 60 * 30; 6 | const options = { 7 | properties: { 8 | exp, 9 | enable_chat: true, 10 | }, 11 | }; 12 | // This endpoint is using the proxy as outlined in netlify.toml 13 | const response = await fetch(`${window.location.origin}/api/rooms`, { 14 | method: "POST", 15 | body: JSON.stringify(options), 16 | // TODO: uncomment the headers below if you are using the "Create and join room" button locally. You will also need to remove the :disabled attribute from the button itself in Home.vue so it is clickable. 17 | // headers: { 18 | // "Content-Type": "application/json", 19 | // Authorization: "Bearer " + process.env.VUE_APP_DAILY_API_KEY;, 20 | // }, 21 | }); 22 | const room = await response.json(); 23 | return room; 24 | } 25 | 26 | export default { 27 | createRoom, 28 | }; 29 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 18 | 19 | 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-daily-prebuilt", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "netlify-build": "sed -i s/VUE_APP_DAILY_API_KEY_PLACEHOLDER/${VUE_APP_DAILY_API_KEY}/g netlify.toml && npm run build" 10 | }, 11 | "dependencies": { 12 | "@daily-co/daily-js": "^0.21.0", 13 | "core-js": "^3.6.5", 14 | "vue": "^3.0.0" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "~4.5.0", 18 | "@vue/cli-plugin-eslint": "~4.5.0", 19 | "@vue/cli-service": "~4.5.0", 20 | "@vue/compiler-sfc": "^3.0.0", 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^6.7.2", 23 | "eslint-plugin-vue": "^7.0.0" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/vue3-essential", 32 | "eslint:recommended" 33 | ], 34 | "parserOptions": { 35 | "parser": "babel-eslint" 36 | }, 37 | "rules": {} 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not dead" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | BSD 2-Clause License 2 | 3 | Copyright (c) 2021, daily demos 4 | All rights reserved. 5 | 6 | Redistribution and use in source and binary forms, with or without 7 | modification, are permitted provided that the following conditions are met: 8 | 9 | 1. Redistributions of source code must retain the above copyright notice, this 10 | list of conditions and the following disclaimer. 11 | 12 | 2. Redistributions in binary form must reproduce the above copyright notice, 13 | this list of conditions and the following disclaimer in the documentation 14 | and/or other materials provided with the distribution. 15 | 16 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 17 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 18 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 19 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 20 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 21 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 22 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 23 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 24 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 25 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 26 | -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 29 | 30 | 76 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Daily Prebuilt: Vue demo 2 | 3 | Daily Prebuilt Vue demo: in-call view 4 | 5 | ## Requirements 6 | 7 | To use this demo, you will first need to [create a Daily account](https://dashboard.daily.co/signup). You will need your Daily API key, which can be found on the [Developers](https://dashboard.daily.co/developers) page, if you want to create new rooms through the demo UI. 8 | 9 | You can use existing Daily rooms in the demo by pasting the room URL into the input. The room URL should be in this format to be valid: `https://domain-name.daily.co/room-name`, with `daily-domain` changed to your domain, and `room-name` changed to the name of the existing room you would like to use. 10 | 11 | Daily Prebuilt Vue demo: home screen 12 | 13 | --- 14 | 15 | ## Running locally 16 | 17 | To run this demo locally: 18 | 19 | 1. Install dependencies `npm install` 20 | 2. Start dev server `npm run serve` 21 | 3. Then open your browser and go to http://localhost:8080 22 | 23 | OR... 24 | 25 | ## Running using Netlify CLI 26 | 27 | If you want access to the Daily REST API (using the proxy as specified in `netlify.toml`) as well as a more robust local dev environment, please do the following in this project's directory: 28 | 29 | 1. Deploy to your Netlify account 30 | 31 | [![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/daily-demos/vue-daily-prebuilt) 32 | 33 | Note: You'll need your [Daily API key](https://dashboard.daily.co/developers) handy for this step. 34 | 35 | 2. Install the Netlify CLI `npm i -g netlify-cli` 36 | 3. Login to your account `netlify login` 37 | 4. Rename `sample.env` to `.env` and add your API key 38 | 5. Start the dev server `netlify dev` 39 | 40 | > Note: If the API proxy isn't working locally you may need to run `netlify build` first. This will put API key in the `netlify.toml` file, so make sure you don't commit this change. 41 | 42 | ### Compile and minify for production 43 | 44 | ``` 45 | npm run build 46 | ``` 47 | 48 | ### Lint and fix files 49 | 50 | ``` 51 | npm run lint 52 | ``` 53 | 54 | --- 55 | 56 | ## Related blog posts/tutorials 57 | 58 | Lean more about this demo with our [Vue+Daily Prebuilt tutorial](https://www.daily.co/blog/build-a-video-chat-app-with-vue-and-daily-prebuilt/) on the [Daily blog](https://www.daily.co/blog/). 59 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Thank you for looking into contributing to `daily-demos`! We want these projects to help people experiment with Daily more quickly. We especially welcome any contributions that help us make existing demos easier to understand, improve demos' instructions and descriptions, and we're especially excited about any new demos that highlight unique ways to use the [Daily API](https://docs.daily.co/reference). 4 | 5 | **Before contributing:** 6 | 7 | - [Read our code of conduct](#read-our-code-of-conduct) 8 | 9 | **How to contribute:** 10 | 11 | - [Open or claim an issue](#open-or-claim-an-issue) 12 | - [Open a pull request](#open-a-pull-request) 13 | - [Contribute a new demo project](#contribute-a-new-demo-project) 14 | 15 | ## Before contributing 16 | 17 | ### Run demo app locally 18 | 19 | Please follow the instructions in `README.md`. 20 | 21 | ### Read our code of conduct 22 | 23 | We use the [Contributor Covenant](https://www.contributor-covenant.org/) for our Code of Conduct. Before contributing, [please read it](CODE_OF_CONDUCT.md). 24 | 25 | ## How to contribute 26 | 27 | ### Open or claim an issue 28 | 29 | #### Open an issue 30 | 31 | Today we work off two main issue templates: _bug reports_ and _demo/feature requests_. 32 | 33 | _Bug reports_ 34 | 35 | Before creating a new bug report, please do two things: 36 | 37 | 1. If you want to report a bug you experienced while on a Daily call, try out these [troubleshooting tips](https://help.daily.co/en/articles/2303117-top-troubleshooting-tips) to see if that takes care of the bug. 38 | 2. If you're still seeing the error, check to see if somebody else has [already filed the issue](https://github.com/daily-demos/vue-daily-prebuilt/issues) before creating a new one. 39 | 40 | If you've done those two things and need to create an issue, we'll ask you to tell us: 41 | 42 | - What you expected to happen 43 | - What actually happened 44 | - Steps to reproduce the error 45 | - Screenshots that illustrate where and what we should be looking for when we reproduce 46 | - System information, like your device, OS, and browser 47 | - Any additional context that you think could help us work through this 48 | 49 | _Demo/feature requests_ 50 | 51 | We're always happy to hear about new ways you'd like to use Daily. If you'd like a demo that we don't have yet, we'll ask you to let us know: 52 | 53 | - If the demo will help you solve a particular problem 54 | - Alternative solutions you've considered 55 | - Any additional context that might help us understand this ask 56 | 57 | #### Claim an issue 58 | 59 | All issues labeled `good-first-issue` are up for grabs. If you'd like to tackle an existing issue, feel free to assign yourself, and please leave a comment letting everyone know that you're on it. 60 | 61 | ### Open a pull request 62 | 63 | - If it's been a minute or if you haven't yet cloned, forked, or branched a repository, GitHub has some [docs to help](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests). 64 | - When creating commit messages and pull request titles, please follow the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) standard. 65 | 66 | ### Contribute a new demo project 67 | 68 | If you've built a project on Daily that you want to share with other developers, we'd be more than happy to help spread the word. 69 | 70 | To add a new demo project: 71 | 72 | Open a PR in [awesome-daily](#) and add a link to your project. 73 | -------------------------------------------------------------------------------- /src/components/Controls.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 97 | 98 | 155 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | help@daily.co. All complaints will be reviewed and investigated promptly and fairly. 64 | 65 | All community leaders are obligated to respect the privacy and security of the 66 | reporter of any incident. 67 | 68 | ## Enforcement Guidelines 69 | 70 | Community leaders will follow these Community Impact Guidelines in determining 71 | the consequences for any action they deem in violation of this Code of Conduct: 72 | 73 | ### 1. Correction 74 | 75 | **Community Impact**: Use of inappropriate language or other behavior deemed 76 | unprofessional or unwelcome in the community. 77 | 78 | **Consequence**: A private, written warning from community leaders, providing 79 | clarity around the nature of the violation and an explanation of why the 80 | behavior was inappropriate. A public apology may be requested. 81 | 82 | ### 2. Warning 83 | 84 | **Community Impact**: A violation through a single incident or series 85 | of actions. 86 | 87 | **Consequence**: A warning with consequences for continued behavior. No 88 | interaction with the people involved, including unsolicited interaction with 89 | those enforcing the Code of Conduct, for a specified period of time. This 90 | includes avoiding interactions in community spaces as well as external channels 91 | like social media. Violating these terms may lead to a temporary or 92 | permanent ban. 93 | 94 | ### 3. Temporary Ban 95 | 96 | **Community Impact**: A serious violation of community standards, including 97 | sustained inappropriate behavior. 98 | 99 | **Consequence**: A temporary ban from any sort of interaction or public 100 | communication with the community for a specified period of time. No public or 101 | private interaction with the people involved, including unsolicited interaction 102 | with those enforcing the Code of Conduct, is allowed during this period. 103 | Violating these terms may lead to a permanent ban. 104 | 105 | ### 4. Permanent Ban 106 | 107 | **Community Impact**: Demonstrating a pattern of violation of community 108 | standards, including sustained inappropriate behavior, harassment of an 109 | individual, or aggression toward or disparagement of classes of individuals. 110 | 111 | **Consequence**: A permanent ban from any sort of public interaction within 112 | the community. 113 | 114 | ## Attribution 115 | 116 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 117 | version 2.0, available at 118 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 119 | 120 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 121 | enforcement ladder](https://github.com/mozilla/diversity). 122 | 123 | [homepage]: https://www.contributor-covenant.org 124 | 125 | For answers to common questions about this code of conduct, see the FAQ at 126 | https://www.contributor-covenant.org/faq. Translations are available at 127 | https://www.contributor-covenant.org/translations. 128 | -------------------------------------------------------------------------------- /src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 133 | 134 | 212 | --------------------------------------------------------------------------------