</code></pre> <p>With the inclusion of this <code>iframe</code> we have a basic video chat fully implemented. Multiple rooms can be created with one <code>embedId</code> using the <code>room</code> URL parameter. This application uses the route parameters to dynamically create a room based on the URL.</p> <p><img src="https://d226lax1qjow5r.cloudfront.net/blog/blogposts/build-a-video-conversation-platform-for-online-gatherings-with-nuxt-js/video-call.png" alt="A working video call"></p> <p>There is some small housekeeping to take care of before you wrap up.</p> <h3>Add a Link to Event Lobby and Code of Conduct</h3> <p>Like the event lobby, you will need to add an <code>event</code> computed property below the <code>validate()</code> method:</p> <pre><code class="language-vue">computed: { event () { return this.$store.state.events.find(e => e.slug === this.$route.params.event) } } </code></pre> <p>In the template you can now access event information:</p> <pre><code class="language-vue"><n-link :to="'/' + $route.params.event">Back to {{event.name}} lobby</n-link> <n-link :to="event.coc">Code of Conduct</n-link> </code></pre> <h3>Add the Room's Prompt</h3> <p>Create a <code>room</code> computed property:</p> <pre><code class="language-vue">room () { return this.event.rooms.find(r => r.slug === this.$route.params.room) } </code></pre> <p>In the template you can now access all information in the <code>room</code> object:</p> <pre><code class="language-vue"><p>Room prompt: {{room.name}}</p> </code></pre> <p><img src="https://d226lax1qjow5r.cloudfront.net/blog/blogposts/build-a-video-conversation-platform-for-online-gatherings-with-nuxt-js/video-call-extra-info.png" alt="Video call showing links to lobby, code of conduct, and the room's prompt"></p> <h2>What Next?</h2> <p>This is a fantastic start, and there are many directions to take this application. You may choose to:</p> <ul> <li>Add some styling</li> <li>Build a 404 page</li> <li>Deploy this online (remember to change the Website URL in the Embed project settings within the Video API Account Portal)</li> <li>Use the Vonage Video API to implement this project and add features such as showing names, screen sharing, and chat.</li> </ul> <p>Check out our post on <a href="https://developer.vonage.com/en/blog/basic-video-chat">creating a basic video chat, like this, with Vonage Video API</a>.</p> <p>The full project code can be found at <a href="https://github.com/nexmo-community/social-cafe">https://github.com/nexmo-community/social-cafe</a>.</p> <p>As ever, if you need any support feel free to reach out in the <a href="/community/slack">Vonage Community Slack</a> and we hope you find use in this project for communities.</p>

Kevin Lewis

Vonage Alumni