Update Vue tutorial
This commit is contained in:
juancarmore
parent
825f555399
commit
f9cf994fa6
@ -14,7 +14,7 @@ For further information, check the [tutorial documentation](https://livekit-tuto
|
||||
|
||||
```bash
|
||||
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git
|
||||
cd openvidu-livekit-tutorials/application-client/angular
|
||||
cd openvidu-livekit-tutorials/application-client/openvidu-angular
|
||||
```
|
||||
|
||||
2. Install dependencies
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="camera-{{ participantIdentity }}" class="video-container">
|
||||
<div [id]="'camera-' + participantIdentity" class="video-container">
|
||||
<div class="participant-data">
|
||||
<p>{{ participantIdentity + (local ? " (You)" : "") }}</p>
|
||||
</div>
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
**/node_modules
|
||||
**/dist
|
||||
@ -6,6 +6,7 @@ module.exports = {
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-typescript',
|
||||
'@vue/eslint-config-prettier/skip-formatting'
|
||||
],
|
||||
parserOptions: {
|
||||
|
||||
2
application-client/openvidu-vue/.gitignore
vendored
2
application-client/openvidu-vue/.gitignore
vendored
@ -26,3 +26,5 @@ coverage
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
"tabWidth": 4,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"printWidth": 120,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
@ -1,15 +1,30 @@
|
||||
[](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)
|
||||
# Basic Vue
|
||||
|
||||
[![][OpenViduLogo]](http://openvidu.io)
|
||||
Basic client application built with Vue. It internally uses [livekit-client-sdk-js](https://docs.livekit.io/client-sdk-js/).
|
||||
|
||||
openvidu-tutorials
|
||||
===
|
||||
For further information, check the [tutorial documentation](https://livekit-tutorials.openvidu.io/tutorials/application-client/vue/).
|
||||
|
||||
Visit [Developing your video app](https://docs.openvidu.io/en/stable/developing-your-video-app/)
|
||||
## Prerequisites
|
||||
|
||||
[OpenViduLogo]: https://secure.gravatar.com/avatar/5daba1d43042f2e4e85849733c8e5702?s=120
|
||||
- [Node](https://nodejs.org/en/download)
|
||||
|
||||
## Run
|
||||
|
||||
1. Download repository
|
||||
|
||||
```bash
|
||||
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git
|
||||
cd openvidu-livekit-tutorials/application-client/openvidu-vue
|
||||
```
|
||||
|
||||
2. Install dependencies
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. Run the application
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
FROM node:16-alpine3.16
|
||||
|
||||
COPY . ./openvidu-vue
|
||||
|
||||
WORKDIR /openvidu-vue
|
||||
|
||||
|
||||
# Install openvidu-vue dependencies and build it
|
||||
RUN npm install && \
|
||||
npm run build && \
|
||||
cp -r ./dist/ ./openvidu-basic-node/public
|
||||
|
||||
# Copy openvidu-basic-node
|
||||
RUN cp -r ./openvidu-basic-node /opt/openvidu-basic-node && \
|
||||
rm -rf ../openvidu-vue
|
||||
|
||||
# Install openvidu-basic-node dependencies
|
||||
RUN npm --prefix /opt/openvidu-basic-node install
|
||||
|
||||
WORKDIR /opt/openvidu-basic-node
|
||||
|
||||
COPY docker/entrypoint.sh .
|
||||
|
||||
ENTRYPOINT [ "./entrypoint.sh" ]
|
||||
@ -1,15 +0,0 @@
|
||||
#!/bin/bash
|
||||
if [ $# -eq 0 ]; then
|
||||
echo "No version argument provided. Usage: \"./create_image.sh <IMAGE_NAME>\""
|
||||
exit 1
|
||||
fi
|
||||
|
||||
pushd ../
|
||||
|
||||
cp -r ../openvidu-basic-node .
|
||||
|
||||
trap 'rm -rf ./openvidu-basic-node' ERR
|
||||
|
||||
docker build --pull --no-cache --rm=true -f docker/Dockerfile -t "$1" .
|
||||
|
||||
rm -rf ./openvidu-basic-node
|
||||
@ -1,3 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
exec node index.js "$*"
|
||||
1
application-client/openvidu-vue/env.d.ts
vendored
Normal file
1
application-client/openvidu-vue/env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@ -1,76 +1,64 @@
|
||||
<!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 -->
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Basic Vue</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
|
||||
<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>
|
||||
<!-- Bootstrap -->
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<!-- Font Awesome -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
||||
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="assets/styles.css" type="text/css" media="screen" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/" title="Home"><h1>Basic Vue</h1></a>
|
||||
<div id="links">
|
||||
<a
|
||||
href="https://github.com/OpenVidu/openvidu-livekit-tutorials/tree/master/application-client/openvidu-js"
|
||||
title="GitHub Repository"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="fa-brands fa-github"></i>
|
||||
</a>
|
||||
<a
|
||||
href="https://livekit-tutorials.openvidu.io/tutorials/application-client/javascript/"
|
||||
title="Documentation"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="fa-solid fa-book"></i>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
<main id="app"></main>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
<footer>
|
||||
<p class="text">Made with love by <span>OpenVidu Team</span></p>
|
||||
<a href="http://www.openvidu.io/" target="_blank">
|
||||
<img id="openvidu-logo" src="assets/images/openvidu_logo.png" alt="OpenVidu logo" />
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
events {
|
||||
worker_connections 512;
|
||||
}
|
||||
http {
|
||||
upstream openvidu-deployment {
|
||||
server host.docker.internal:4443;
|
||||
}
|
||||
upstream server-application {
|
||||
server host.docker.internal:5000;
|
||||
}
|
||||
upstream client-application {
|
||||
server host.docker.internal:8080;
|
||||
}
|
||||
server {
|
||||
listen 443 ssl;
|
||||
ssl_certificate /etc/nginx/certs/cert.pem;
|
||||
ssl_certificate_key /etc/nginx/certs/key.pem;
|
||||
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_set_header X-Forwarded-Proto https;
|
||||
proxy_headers_hash_bucket_size 512;
|
||||
proxy_redirect off;
|
||||
|
||||
# Websockets
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
|
||||
# OpenVidu deployment API
|
||||
location /openvidu/api {
|
||||
proxy_pass http://openvidu-deployment;
|
||||
}
|
||||
|
||||
# OpenVidu WebSocket
|
||||
location ~ /openvidu$ {
|
||||
proxy_pass http://openvidu-deployment;
|
||||
}
|
||||
|
||||
# Server application requests
|
||||
location /api/ {
|
||||
proxy_pass http://server-application;
|
||||
}
|
||||
|
||||
# Client application requests
|
||||
location / {
|
||||
proxy_pass http://client-application;
|
||||
}
|
||||
}
|
||||
}
|
||||
5434
application-client/openvidu-vue/package-lock.json
generated
5434
application-client/openvidu-vue/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,27 +1,34 @@
|
||||
{
|
||||
"name": "openvidu-vue",
|
||||
"version": "2.27.0",
|
||||
"name": "basic-vue",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"serve": "vite --port 5080 --host",
|
||||
"start": "vite --port 5080 --host",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
||||
"type-check": "vue-tsc --build --force",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.5.1",
|
||||
"livekit-client": "^1.14.1",
|
||||
"vue": "^3.3.4"
|
||||
"livekit-client": "2.1.5",
|
||||
"vue": "^3.4.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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"
|
||||
"@rushstack/eslint-patch": "^1.8.0",
|
||||
"@tsconfig/node20": "^20.1.4",
|
||||
"@types/node": "^20.12.5",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vue/eslint-config-prettier": "^9.0.0",
|
||||
"@vue/eslint-config-typescript": "^13.0.0",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-vue": "^9.23.0",
|
||||
"npm-run-all2": "^6.1.2",
|
||||
"prettier": "^3.2.5",
|
||||
"typescript": "~5.4.0",
|
||||
"vite": "^5.2.8",
|
||||
"vue-tsc": "^2.0.11"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
@ -1,281 +0,0 @@
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
nav {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
background-color: #4d4d4d !important;
|
||||
border-color: #4d4d4d !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
padding: 5px 15px 5px 15px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #ccc !important;
|
||||
}
|
||||
|
||||
nav i.fa {
|
||||
font-size: 40px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #a9a9a9 !important;
|
||||
}
|
||||
|
||||
nav i.fa:hover {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
/*vertical-center {
|
||||
position: relative;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}*/
|
||||
|
||||
.horizontal-center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color: #0088aa;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #0088aa;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
|
||||
}
|
||||
|
||||
input.btn {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #06d362 !important;
|
||||
border-color: #06d362;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #1abd61 !important;
|
||||
border-color: #1abd61;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #4d4d4d;
|
||||
}
|
||||
|
||||
.footer .text-muted {
|
||||
margin: 20px 0;
|
||||
float: left;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.openvidu-logo {
|
||||
height: 35px;
|
||||
float: right;
|
||||
margin: 12px 0;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
-moz-transition: all 0.1s ease-in-out;
|
||||
-o-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.openvidu-logo:hover {
|
||||
-webkit-filter: grayscale(0.5);
|
||||
filter: grayscale(0.5);
|
||||
}
|
||||
|
||||
.demo-logo {
|
||||
margin: 0;
|
||||
height: 22px;
|
||||
float: left;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
a:hover .demo-logo {
|
||||
-webkit-filter: brightness(0.7);
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
#join-dialog {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
#join-dialog h1 {
|
||||
color: #4d4d4d;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#img-div {
|
||||
text-align: center;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
|
||||
/*position: relative;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);*/
|
||||
}
|
||||
|
||||
#img-div img {
|
||||
height: 15%;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
#join-dialog label {
|
||||
color: #0088aa;
|
||||
}
|
||||
|
||||
#join-dialog input.btn {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#session-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#session-title {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#buttonLeaveSession {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#video-container video {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#video-container video + div {
|
||||
float: left;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
margin-left: -50%;
|
||||
}
|
||||
|
||||
#video-container p {
|
||||
display: inline-block;
|
||||
background: #f8f8f8;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
color: #777777;
|
||||
font-weight: bold;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#main-video p {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
background: #f8f8f8;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
font-size: 22px;
|
||||
color: #777777;
|
||||
font-weight: bold;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
#session img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
object-fit: contain;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
#session #video-container img {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
object-fit: cover;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
position: absolute;
|
||||
background: #f8f8f8;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
color: #777777;
|
||||
font-weight: bold;
|
||||
border-bottom-right-radius: 4px;
|
||||
z-index: 1000;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* xs ans md screen resolutions*/
|
||||
|
||||
@media screen and (max-width: 991px) and (orientation: portrait) {
|
||||
#join-dialog {
|
||||
max-width: inherit;
|
||||
}
|
||||
#img-div img {
|
||||
height: 10%;
|
||||
}
|
||||
#img-div {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.navbar-header i.fa {
|
||||
font-size: 30px;
|
||||
}
|
||||
.navbar-header a.nav-icon {
|
||||
padding: 7px 3px 7px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 767px) and (orientation: landscape) {
|
||||
#img-div {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
#join-dialog {
|
||||
max-width: inherit;
|
||||
}
|
||||
}
|
||||
110
application-client/openvidu-vue/public/assets/styles.css
Normal file
110
application-client/openvidu-vue/public/assets/styles.css
Normal file
@ -0,0 +1,110 @@
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 30px;
|
||||
background-color: #4d4d4d;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
header a {
|
||||
color: #ccc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header a:hover {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
header i {
|
||||
padding: 5px 5px;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
padding: 10px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #4d4d4d;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer .text {
|
||||
color: #ccc;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer .text span {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#openvidu-logo {
|
||||
height: 35px;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
-moz-transition: all 0.1s ease-in-out;
|
||||
-o-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
#openvidu-logo:hover {
|
||||
-webkit-filter: grayscale(0.5);
|
||||
filter: grayscale(0.5);
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
@media screen and (max-width: 768px) {
|
||||
header {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
header {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@ -1,239 +1,313 @@
|
||||
<template>
|
||||
<div id="main-container" class="container">
|
||||
<div id="join" v-if="!room">
|
||||
<div id="img-div">
|
||||
<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>
|
||||
<div class="form-group">
|
||||
<p>
|
||||
<label>Participant</label>
|
||||
<input v-model="myParticipantName" class="form-control" type="text" required />
|
||||
</p>
|
||||
<p>
|
||||
<label>Session</label>
|
||||
<input v-model="myRoomName" class="form-control" type="text" required />
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<button class="btn btn-lg btn-success" @click="joinRoom()">Join!</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
LocalVideoTrack,
|
||||
RemoteParticipant,
|
||||
RemoteTrack,
|
||||
RemoteTrackPublication,
|
||||
Room,
|
||||
RoomEvent
|
||||
} from 'livekit-client';
|
||||
import { onUnmounted, ref, type Ref } from 'vue';
|
||||
import VideoComponent from './components/VideoComponent.vue';
|
||||
import AudioComponent from './components/AudioComponent.vue';
|
||||
|
||||
<div id="room" v-if="room">
|
||||
<div id="room-header">
|
||||
<h1 id="room-title">{{ myRoomName }}</h1>
|
||||
<input
|
||||
class="btn btn-large btn-danger"
|
||||
type="button"
|
||||
id="buttonLeaveRoom"
|
||||
@click="leaveRoom"
|
||||
value="Leave room"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="mainPublication" id="main-video" class="col-md-6">
|
||||
<p class="participant-name">{{ getParticipantName(mainPublication.trackSid) }}</p>
|
||||
<OvVideo v-if="mainPublication.videoTrack" :track="mainPublication.videoTrack" />
|
||||
</div>
|
||||
<div
|
||||
v-if="localPublication && localPublication.videoTrack"
|
||||
id="video-container"
|
||||
class="col-md-6"
|
||||
>
|
||||
<p class="participant-name">{{ myParticipantName }}</p>
|
||||
<OvVideo
|
||||
:track="localPublication.videoTrack"
|
||||
@click="updateMainPublication(localPublication)"
|
||||
/>
|
||||
|
||||
<div v-for="publication in remotePublications" :key="publication.trackSid">
|
||||
<p v-if="publication.videoTrack" class="participant-name">
|
||||
{{ getParticipantName(publication.trackSid) }}
|
||||
</p>
|
||||
|
||||
<OvVideo
|
||||
v-if="publication.videoTrack"
|
||||
:track="publication.videoTrack"
|
||||
@click="updateMainPublication(publication)"
|
||||
/>
|
||||
<OvAudio v-if="publication.audioTrack" :track="publication.audioTrack" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
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'
|
||||
type TrackInfo = {
|
||||
trackPublication: RemoteTrackPublication;
|
||||
participantIdentity: string;
|
||||
};
|
||||
|
||||
// For local development, leave these variables empty
|
||||
// For production, configure them with correct URLs depending on your deployment
|
||||
let APPLICATION_SERVER_URL = ''
|
||||
let LIVEKIT_URL = ''
|
||||
let APPLICATION_SERVER_URL = '';
|
||||
let LIVEKIT_URL = '';
|
||||
configureUrls();
|
||||
|
||||
// If APPLICATION_SERVER_URL is not configured, use default value from local development
|
||||
if (!APPLICATION_SERVER_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
APPLICATION_SERVER_URL = 'http://localhost:6080/'
|
||||
} else {
|
||||
APPLICATION_SERVER_URL = 'https://' + window.location.hostname + ':6443/'
|
||||
}
|
||||
}
|
||||
|
||||
// If LIVEKIT_URL is not configured, use default value from local development
|
||||
if (!LIVEKIT_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
LIVEKIT_URL = 'ws://localhost:7880/'
|
||||
} else {
|
||||
LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/'
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
||||
components: {
|
||||
OvVideo,
|
||||
OvAudio
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
// OpenVidu objects
|
||||
room: undefined,
|
||||
mainPublication: undefined,
|
||||
localPublication: undefined,
|
||||
remotePublications: [],
|
||||
|
||||
// Join form
|
||||
myRoomName: 'RoomA',
|
||||
myParticipantName: 'Participant' + Math.floor(Math.random() * 100)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
joinRoom() {
|
||||
// --- 1) Init a room ---
|
||||
this.room = new Room()
|
||||
|
||||
// --- 2) Specify the actions when events take place in the room ---
|
||||
|
||||
// On every new Track received...
|
||||
this.room.on(RoomEvent.TrackSubscribed, (track, publication, participant) => {
|
||||
console.log('Track subscribed', track, publication, participant)
|
||||
// Store the new publication in remotePublications array
|
||||
this.remotePublications.push(publication)
|
||||
})
|
||||
|
||||
// On every track destroyed...
|
||||
this.room.on(RoomEvent.TrackUnsubscribed, (track, publication, participant) => {
|
||||
console.log('Track unsubscribed', track, publication, participant)
|
||||
// Remove the publication from 'remotePublications' array
|
||||
this.deleteRemoteTrackPublication(publication)
|
||||
})
|
||||
|
||||
// --- 3) Connect to the room with a valid access token ---
|
||||
|
||||
// Get a token from the application backend
|
||||
this.getToken(this.myRoomName, this.myParticipantName).then(async (token) => {
|
||||
// First param is the LiveKit server URL. Second param is the access token
|
||||
try {
|
||||
await this.room.connect(LIVEKIT_URL, token)
|
||||
// --- 4) Publish your local tracks ---
|
||||
await this.room.localParticipant.setMicrophoneEnabled(true)
|
||||
const videoPublication = await this.room.localParticipant.setCameraEnabled(true)
|
||||
|
||||
// Set the main video in the page to display our webcam and store our localPublication
|
||||
this.localPublication = videoPublication
|
||||
this.mainPublication = videoPublication
|
||||
} catch (error) {
|
||||
console.log('There was an error connecting to the room:', error.code, error.message)
|
||||
function configureUrls() {
|
||||
// If APPLICATION_SERVER_URL is not configured, use default value from local development
|
||||
if (!APPLICATION_SERVER_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
APPLICATION_SERVER_URL = 'http://localhost:6080/';
|
||||
} else {
|
||||
APPLICATION_SERVER_URL = 'https://' + window.location.hostname + ':6443/';
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('beforeunload', this.leaveRoom)
|
||||
},
|
||||
|
||||
leaveRoom() {
|
||||
// --- 5) Leave the room by calling 'disconnect' method over the Session object ---
|
||||
if (this.room) this.room.disconnect()
|
||||
|
||||
// Empty all properties...
|
||||
this.room = undefined
|
||||
this.mainPublication = undefined
|
||||
this.localPublication = undefined
|
||||
this.remotePublications = []
|
||||
// Remove beforeunload listener
|
||||
window.removeEventListener('beforeunload', this.leaveRoom)
|
||||
},
|
||||
|
||||
getParticipantName(trackSid) {
|
||||
if (!this.localPublication) return
|
||||
const isLocalTrack = trackSid === this.localPublication.trackSid
|
||||
|
||||
if (isLocalTrack) {
|
||||
// Return local participant name
|
||||
return this.myParticipantName
|
||||
}
|
||||
|
||||
// Find in remote participants the participant with the track and return his name
|
||||
const remoteParticipant = Array.from(this.room.participants.values()).find((p) => {
|
||||
return p.getTracks().some((t) => t.trackSid === trackSid)
|
||||
})
|
||||
return remoteParticipant?.identity
|
||||
},
|
||||
|
||||
updateMainPublication(publication) {
|
||||
this.mainPublication = publication
|
||||
},
|
||||
|
||||
deleteRemoteTrackPublication(publication) {
|
||||
let index = this.remotePublications.findIndex((p) => p.trackSid === publication.trackSid)
|
||||
if (index > -1) {
|
||||
this.remotePublications.splice(index, 1)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
||||
* --------------------------------------------
|
||||
* The methods below request the creation of a Token to
|
||||
* your application server. This keeps your OpenVidu deployment secure.
|
||||
*
|
||||
* In this sample code, there is no user control at all. Anybody could
|
||||
* access your application server endpoints! In a real production
|
||||
* environment, your application server must identify the user to allow
|
||||
* access to the endpoints.
|
||||
*
|
||||
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
||||
* more about the integration of OpenVidu in your application server.
|
||||
*/
|
||||
async getToken(roomName, participantName) {
|
||||
try {
|
||||
const response = await axios.post(
|
||||
APPLICATION_SERVER_URL + 'token',
|
||||
{ roomName, participantName },
|
||||
{
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
responseType: 'text'
|
||||
}
|
||||
)
|
||||
return response.data
|
||||
} catch (error) {
|
||||
// Handle errors here
|
||||
console.error('Error getting token:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If LIVEKIT_URL is not configured, use default value from local development
|
||||
if (!LIVEKIT_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
LIVEKIT_URL = 'ws://localhost:7880/';
|
||||
} else {
|
||||
LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const room = ref<Room>();
|
||||
const localTrack = ref<LocalVideoTrack>();
|
||||
const remoteTracksMap: Ref<Map<string, TrackInfo>> = ref(new Map());
|
||||
|
||||
let participantName = ref('Participant' + Math.floor(Math.random() * 100));
|
||||
let roomName = ref('Test Room');
|
||||
|
||||
async function joinRoom() {
|
||||
// Initialize a new Room object
|
||||
room.value = new Room();
|
||||
|
||||
// Specify the actions when events take place in the room
|
||||
// On every new Track received...
|
||||
room.value.on(
|
||||
RoomEvent.TrackSubscribed,
|
||||
(_track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => {
|
||||
remoteTracksMap.value.set(publication.trackSid, {
|
||||
trackPublication: publication,
|
||||
participantIdentity: participant.identity
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
// On every Track destroyed...
|
||||
room.value.on(RoomEvent.TrackUnsubscribed, (_track: RemoteTrack, publication: RemoteTrackPublication) => {
|
||||
remoteTracksMap.value.delete(publication.trackSid);
|
||||
});
|
||||
|
||||
try {
|
||||
// Get a token from your application server with the room name and participant name
|
||||
const token = await getToken(roomName.value, participantName.value);
|
||||
|
||||
// Connect to the room with the LiveKit URL and the token
|
||||
await room.value.connect(LIVEKIT_URL, token);
|
||||
|
||||
// Publish your camera and microphone
|
||||
await room.value.localParticipant.enableCameraAndMicrophone();
|
||||
localTrack.value = room.value.localParticipant.videoTrackPublications.values().next().value.videoTrack;
|
||||
} catch (error: any) {
|
||||
console.log('There was an error connecting to the room:', error.message);
|
||||
await leaveRoom();
|
||||
}
|
||||
|
||||
// Add listener for beforeunload event to leave the room when the user closes the tab
|
||||
window.addEventListener('beforeunload', leaveRoom);
|
||||
}
|
||||
|
||||
async function leaveRoom() {
|
||||
// Leave the room by calling 'disconnect' method over the Room object
|
||||
await room.value?.disconnect();
|
||||
|
||||
// Empty all variables
|
||||
room.value = undefined;
|
||||
localTrack.value = undefined;
|
||||
remoteTracksMap.value.clear();
|
||||
|
||||
window.removeEventListener('beforeunload', leaveRoom);
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
// On component unmount, leave the room
|
||||
leaveRoom();
|
||||
});
|
||||
|
||||
async function getToken(roomName: string, participantName: string) {
|
||||
const response = await fetch(APPLICATION_SERVER_URL + 'token', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
roomName,
|
||||
participantName
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(`Failed to get token: ${error.errorMessage}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data.token;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!room" id="join">
|
||||
<div id="join-dialog">
|
||||
<h2>Join a Video Room</h2>
|
||||
<form @submit.prevent="joinRoom">
|
||||
<div>
|
||||
<label for="participant-name">Participant</label>
|
||||
<input v-model="participantName" id="participant-name" class="form-control" type="text" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="room-name">Room</label>
|
||||
<input v-model="roomName" id="room-name" class="form-control" type="text" required />
|
||||
</div>
|
||||
<button class="btn btn-lg btn-success" type="submit" :disabled="!roomName || !participantName">
|
||||
Join!
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else id="room">
|
||||
<div id="room-header">
|
||||
<h2 id="room-title">{{ roomName }}</h2>
|
||||
<button class="btn btn-danger" id="leave-room-button" @click="leaveRoom">Leave Room</button>
|
||||
</div>
|
||||
<div id="layout-container">
|
||||
<VideoComponent
|
||||
v-if="localTrack"
|
||||
:track="localTrack"
|
||||
:participantIdentity="participantName"
|
||||
:local="true"
|
||||
/>
|
||||
<template v-for="remoteTrack of remoteTracksMap.values()" :key="remoteTrack.trackPublication.trackSid">
|
||||
<VideoComponent
|
||||
v-if="remoteTrack.trackPublication.kind === 'video'"
|
||||
:track="remoteTrack.trackPublication.videoTrack!"
|
||||
:participantIdentity="remoteTrack.participantIdentity"
|
||||
/>
|
||||
<AudioComponent v-else :track="remoteTrack.trackPublication.audioTrack!" hidden />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#join {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#join-dialog {
|
||||
width: 70%;
|
||||
max-width: 900px;
|
||||
padding: 60px;
|
||||
border-radius: 6px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
#join-dialog h2 {
|
||||
color: #4d4d4d;
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#join-dialog form {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#join-dialog label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
color: #0088aa;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
color: #0088aa;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
color: #0088aa;
|
||||
border-color: #0088aa;
|
||||
-webkit-box-shadow:
|
||||
inset 0 1px 1px rgba(0, 0, 0, 0.075),
|
||||
0 0 8px rgba(0, 136, 170, 0.6);
|
||||
box-shadow:
|
||||
inset 0 1px 1px rgba(0, 0, 0, 0.075),
|
||||
0 0 8px rgba(0, 136, 170, 0.6);
|
||||
}
|
||||
|
||||
#join-dialog button {
|
||||
display: block;
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #06d362;
|
||||
border-color: #06d362;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #1abd61;
|
||||
border-color: #1abd61;
|
||||
}
|
||||
|
||||
#room {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#room-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#room-title {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#layout-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
@media screen and (max-width: 768px) {
|
||||
#join-dialog {
|
||||
width: 90%;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#join-dialog h2 {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
#layout-container {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
#join-dialog {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#join-dialog h2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
#layout-container {
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import { LocalAudioTrack, RemoteAudioTrack } from 'livekit-client';
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
track: LocalAudioTrack | RemoteAudioTrack;
|
||||
}>();
|
||||
const audioElement = ref<HTMLMediaElement | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
if (audioElement.value) {
|
||||
props.track.attach(audioElement.value);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
props.track.detach();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<audio ref="audioElement" :id="track.sid"></audio>
|
||||
</template>
|
||||
@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<audio playsinline/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OvAudio',
|
||||
|
||||
props: {
|
||||
track: Object,
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.track.attach(this.$el);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<video autoplay/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OvVideo',
|
||||
|
||||
props: {
|
||||
track: Object,
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.track.attach(this.$el);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,73 @@
|
||||
<script setup lang="ts">
|
||||
import { LocalVideoTrack, RemoteVideoTrack } from 'livekit-client';
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
track: LocalVideoTrack | RemoteVideoTrack;
|
||||
participantIdentity: string;
|
||||
local?: boolean;
|
||||
}>(),
|
||||
{
|
||||
local: false
|
||||
}
|
||||
);
|
||||
|
||||
const videoElement = ref<HTMLMediaElement | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
if (videoElement.value) {
|
||||
props.track.attach(videoElement.value);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
props.track.detach();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :id="'camera-' + participantIdentity" class="video-container">
|
||||
<div class="participant-data">
|
||||
<p>{{ participantIdentity + (local ? ' (You)' : '') }}</p>
|
||||
</div>
|
||||
<video ref="videoElement" :id="track.sid"></video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.video-container {
|
||||
position: relative;
|
||||
background: #3b3b3b;
|
||||
aspect-ratio: 16/9;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-container video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-container .participant-data {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.participant-data p {
|
||||
background: #f8f8f8;
|
||||
margin: 0;
|
||||
padding: 0 5px;
|
||||
color: #777777;
|
||||
font-weight: bold;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
@media screen and (max-width: 480px) {
|
||||
.video-container {
|
||||
aspect-ratio: 9/16;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
14
application-client/openvidu-vue/tsconfig.app.json
Normal file
14
application-client/openvidu-vue/tsconfig.app.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
11
application-client/openvidu-vue/tsconfig.json
Normal file
11
application-client/openvidu-vue/tsconfig.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
19
application-client/openvidu-vue/tsconfig.node.json
Normal file
19
application-client/openvidu-vue/tsconfig.node.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "@tsconfig/node20/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"nightwatch.conf.*",
|
||||
"playwright.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"noEmit": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
@ -2,13 +2,11 @@ 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: {
|
||||
Loading…
x
Reference in New Issue
Block a user