diff --git a/openvidu-insecure-vue/.gitignore b/openvidu-insecure-vue/.gitignore
new file mode 100644
index 00000000..11f5d714
--- /dev/null
+++ b/openvidu-insecure-vue/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/openvidu-insecure-vue/README.md b/openvidu-insecure-vue/README.md
new file mode 100644
index 00000000..06cd7fd1
--- /dev/null
+++ b/openvidu-insecure-vue/README.md
@@ -0,0 +1,13 @@
+[](http://www.apache.org/licenses/LICENSE-2.0)
+[](https://docs.openvidu.io/en/stable/?badge=stable)
+[](https://hub.docker.com/r/openvidu/openvidu-server-kms)
+[](https://groups.google.com/forum/#!forum/openvidu)
+
+[![][OpenViduLogo]](http://openvidu.io)
+
+openvidu-insecure-vue
+===
+
+Visit [docs.openvidu.io/en/stable/tutorials/openvidu-insecure-vue/](http://docs.openvidu.io/en/stable/tutorials/openvidu-insecure-vue/)
+
+[OpenViduLogo]: https://secure.gravatar.com/avatar/5daba1d43042f2e4e85849733c8e5702?s=120
\ No newline at end of file
diff --git a/openvidu-insecure-vue/babel.config.js b/openvidu-insecure-vue/babel.config.js
new file mode 100644
index 00000000..e9558405
--- /dev/null
+++ b/openvidu-insecure-vue/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/openvidu-insecure-vue/package.json b/openvidu-insecure-vue/package.json
new file mode 100644
index 00000000..21dd8380
--- /dev/null
+++ b/openvidu-insecure-vue/package.json
@@ -0,0 +1,48 @@
+{
+ "name": "openvidu-insecure-vue",
+ "version": "2.14.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "axios": "^0.19.2",
+ "core-js": "^3.6.5",
+ "openvidu-browser": "2.14.0",
+ "vue": "^2.6.11"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "~4.4.0",
+ "@vue/cli-plugin-eslint": "~4.4.0",
+ "@vue/cli-service": "~4.4.0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^6.7.2",
+ "eslint-plugin-vue": "^6.2.2",
+ "vue-template-compiler": "^2.6.11"
+ },
+ "eslintConfig": {
+ "root": true,
+ "env": {
+ "node": true
+ },
+ "extends": [
+ "plugin:vue/essential",
+ "eslint:recommended"
+ ],
+ "parserOptions": {
+ "parser": "babel-eslint"
+ },
+ "rules": {}
+ },
+ "browserslist": [
+ "> 1%",
+ "last 2 versions",
+ "not dead"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "git@github.com:OpenVidu/openvidu-tutorials.git"
+ }
+}
diff --git a/openvidu-insecure-vue/public/index.html b/openvidu-insecure-vue/public/index.html
new file mode 100644
index 00000000..46471c9a
--- /dev/null
+++ b/openvidu-insecure-vue/public/index.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+ <%= htmlWebpackPlugin.options.title %>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/openvidu-insecure-vue/public/resources/images/favicon.ico b/openvidu-insecure-vue/public/resources/images/favicon.ico
new file mode 100644
index 00000000..df36fcfb
Binary files /dev/null and b/openvidu-insecure-vue/public/resources/images/favicon.ico differ
diff --git a/openvidu-insecure-vue/public/resources/images/openvidu_globe_bg_transp_cropped.png b/openvidu-insecure-vue/public/resources/images/openvidu_globe_bg_transp_cropped.png
new file mode 100644
index 00000000..e0309e62
Binary files /dev/null and b/openvidu-insecure-vue/public/resources/images/openvidu_globe_bg_transp_cropped.png differ
diff --git a/openvidu-insecure-vue/public/resources/images/openvidu_grey_bg_transp_cropped.png b/openvidu-insecure-vue/public/resources/images/openvidu_grey_bg_transp_cropped.png
new file mode 100644
index 00000000..49f311a6
Binary files /dev/null and b/openvidu-insecure-vue/public/resources/images/openvidu_grey_bg_transp_cropped.png differ
diff --git a/openvidu-insecure-vue/public/resources/images/openvidu_vert_white_bg_trans_cropped.png b/openvidu-insecure-vue/public/resources/images/openvidu_vert_white_bg_trans_cropped.png
new file mode 100644
index 00000000..a1c8b2d7
Binary files /dev/null and b/openvidu-insecure-vue/public/resources/images/openvidu_vert_white_bg_trans_cropped.png differ
diff --git a/openvidu-insecure-vue/public/style.css b/openvidu-insecure-vue/public/style.css
new file mode 100644
index 00000000..576c6956
--- /dev/null
+++ b/openvidu-insecure-vue/public/style.css
@@ -0,0 +1,266 @@
+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: 3em;
+ margin-bottom: 3em;
+ /*position: relative;
+ top: 20%;
+ left: 50%;
+ transform: translate(-50%, -50%);*/
+}
+
+#img-div img {
+ height: 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;
+}
+
+
+/* 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;
+ }
+}
\ No newline at end of file
diff --git a/openvidu-insecure-vue/src/App.vue b/openvidu-insecure-vue/src/App.vue
new file mode 100644
index 00000000..5a175d74
--- /dev/null
+++ b/openvidu-insecure-vue/src/App.vue
@@ -0,0 +1,206 @@
+
+
+
+
+
+
Join a video session
+
+
+
+
+
+
+