openvidu-vue: Updated tutorial
This commit is contained in:
Carlos Santos
parent
c31e105818
commit
6227500249
14
openvidu-vue/.eslintrc.cjs
Normal file
14
openvidu-vue/.eslintrc.cjs
Normal file
@ -0,0 +1,14 @@
|
||||
/* eslint-env node */
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-prettier/skip-formatting'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest'
|
||||
}
|
||||
}
|
||||
26
openvidu-vue/.gitignore
vendored
26
openvidu-vue/.gitignore
vendored
@ -1,20 +1,26 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
|
||||
8
openvidu-vue/.prettierrc.json
Normal file
8
openvidu-vue/.prettierrc.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
@ -1,14 +1,15 @@
|
||||
[](http://www.apache.org/licenses/LICENSE-2.0)
|
||||
[](https://opencollective.com/openvidu#backers) [](https://opencollective.com/openvidu#sponsors) [](http://www.apache.org/licenses/LICENSE-2.0)
|
||||
[](https://github.com/OpenVidu/openvidu/actions/workflows/openvidu-ce-test.yml)
|
||||
[](https://docs.openvidu.io/en/stable/?badge=stable)
|
||||
[](https://hub.docker.com/r/openvidu/openvidu-server-kms)
|
||||
[](https://openvidu.discourse.group/)
|
||||
[](https://twitter.com/openvidu)
|
||||
|
||||
[![][OpenViduLogo]](http://openvidu.io)
|
||||
|
||||
openvidu-vue
|
||||
openvidu-tutorials
|
||||
===
|
||||
|
||||
Visit [docs.openvidu.io/en/stable/tutorials/openvidu-vue/](http://docs.openvidu.io/en/stable/tutorials/openvidu-vue/)
|
||||
Visit [Developing your video app](https://docs.openvidu.io/en/stable/developing-your-video-app/)
|
||||
|
||||
[OpenViduLogo]: https://secure.gravatar.com/avatar/5daba1d43042f2e4e85849733c8e5702?s=120
|
||||
[OpenViduLogo]: https://secure.gravatar.com/avatar/5daba1d43042f2e4e85849733c8e5702?s=120
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
76
openvidu-vue/index.html
Normal file
76
openvidu-vue/index.html
Normal file
@ -0,0 +1,76 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>OpenVidu Vue</title>
|
||||
<!-- Bootstrap -->
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
|
||||
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<script
|
||||
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
|
||||
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<!-- Bootstrap -->
|
||||
|
||||
<link rel="stylesheet" href="/assets/style.css" type="text/css" media="screen" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="/">
|
||||
<img
|
||||
class="demo-logo"
|
||||
src="/assets/images/openvidu_vert_white_bg_trans_cropped.png"
|
||||
/>
|
||||
Vue
|
||||
</a>
|
||||
<a
|
||||
class="navbar-brand nav-icon"
|
||||
href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-vue"
|
||||
title="GitHub Repository"
|
||||
target="_blank"
|
||||
><i class="fa fa-github" aria-hidden="true"></i
|
||||
></a>
|
||||
<a
|
||||
class="navbar-brand nav-icon"
|
||||
href="http://www.docs.openvidu.io/en/stable/tutorials/openvidu-vue/"
|
||||
title="Documentation"
|
||||
target="_blank"
|
||||
><i class="fa fa-book" aria-hidden="true"></i
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="text-muted">OpenVidu © 2023</div>
|
||||
<a href="http://www.openvidu.io/" target="_blank">
|
||||
<img class="openvidu-logo" src="/assets/images/openvidu_globe_bg_transp_cropped.png" />
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
18164
openvidu-vue/package-lock.json
generated
18164
openvidu-vue/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -3,47 +3,25 @@
|
||||
"version": "2.27.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
"serve": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vue/compat": "^3.1.0",
|
||||
"axios": "1.5.1",
|
||||
"core-js": "3.33.0",
|
||||
"livekit-client": "1.14.0",
|
||||
"vue": "3.1.0"
|
||||
"axios": "^1.5.1",
|
||||
"livekit-client": "^1.14.1",
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/eslint-parser": "7.19.1",
|
||||
"@vue/cli-plugin-babel": "5.0.8",
|
||||
"@vue/cli-plugin-eslint": "5.0.8",
|
||||
"@vue/cli-service": "5.0.8",
|
||||
"@vue/compiler-sfc": "3.1.0",
|
||||
"eslint": "8.31.0",
|
||||
"eslint-plugin-vue": "9.8.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:OpenVidu/openvidu-tutorials.git"
|
||||
"@rushstack/eslint-patch": "^1.3.3",
|
||||
"@vitejs/plugin-vue": "^4.4.0",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.2",
|
||||
"@vue/eslint-config-prettier": "^8.0.0",
|
||||
"eslint": "^8.49.0",
|
||||
"eslint-plugin-vue": "^9.17.0",
|
||||
"prettier": "^3.0.3",
|
||||
"vite": "^4.4.11"
|
||||
}
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
@ -138,8 +138,9 @@ a:hover .demo-logo {
|
||||
|
||||
#img-div {
|
||||
text-align: center;
|
||||
margin-top: 3em;
|
||||
margin-bottom: 3em;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
|
||||
/*position: relative;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
@ -148,6 +149,7 @@ a:hover .demo-logo {
|
||||
|
||||
#img-div img {
|
||||
height: 15%;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
#join-dialog label {
|
||||
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
@ -1,44 +0,0 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>resources/images/favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap -->
|
||||
|
||||
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="/"><img class="demo-logo" src="resources/images/openvidu_vert_white_bg_trans_cropped.png"/> Vue</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-vue" title="GitHub Repository" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
|
||||
<a class="navbar-brand nav-icon" href="http://www.docs.openvidu.io/en/stable/tutorials/openvidu-vue/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="text-muted">OpenVidu © 2020</div>
|
||||
<a href="http://www.openvidu.io/" target="_blank">
|
||||
<img class="openvidu-logo" src="resources/images/openvidu_globe_bg_transp_cropped.png" />
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -2,7 +2,7 @@
|
||||
<div id="main-container" class="container">
|
||||
<div id="join" v-if="!room">
|
||||
<div id="img-div">
|
||||
<img src="resources/images/openvidu_grey_bg_transp_cropped.png" />
|
||||
<img src="/assets/images/openvidu_grey_bg_transp_cropped.png" />
|
||||
</div>
|
||||
<div id="join-dialog" class="jumbotron vertical-center">
|
||||
<h1>Join a video room</h1>
|
||||
@ -55,7 +55,7 @@
|
||||
<p class="participant-name">{{ myParticipantName }}</p>
|
||||
<OvVideo
|
||||
:track="localPublication.videoTrack"
|
||||
@click.native="updateMainPublication(localPublication)"
|
||||
@click="updateMainPublication(localPublication)"
|
||||
/>
|
||||
|
||||
<div
|
||||
@ -69,7 +69,7 @@
|
||||
<OvVideo
|
||||
v-if="publication.videoTrack"
|
||||
:track="publication.videoTrack"
|
||||
@click.native="updateMainPublication(publication)"
|
||||
@click="updateMainPublication(publication)"
|
||||
/>
|
||||
<OvAudio
|
||||
v-if="publication.audioTrack"
|
||||
@ -84,8 +84,8 @@
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
import OvVideo from './components/OvVideo';
|
||||
import OvAudio from './components/OvAudio';
|
||||
import OvVideo from './components/OvVideo.vue';
|
||||
import OvAudio from './components/OvAudio.vue';
|
||||
import { Room, RoomEvent } from 'livekit-client';
|
||||
|
||||
axios.defaults.headers.post['Content-Type'] = 'application/json';
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,7 +1,4 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
app.config.productionTip = false
|
||||
app.mount('#app')
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
||||
18
openvidu-vue/vite.config.js
Normal file
18
openvidu-vue/vite.config.js
Normal file
@ -0,0 +1,18 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueJsx(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user