---
title: WebRTC Video Call Demo over Websockets
description: Explore using a live video call demo, showing the interaction between the components of a web application using WebRTC and Websockets.
image: https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/webRTCoverWebsocketsblog.png
---

[Skip to content](https://blog.webrtc.ventures/2017/12/webrtc-video-call-demo-over-websockets#main-content)

![WebRTC.ventures](https://blog.webrtc.ventures/hubfs/logo-main-light.svg)

- [WebRTC Services](https://webrtc.ventures/webrtc-development-services/)
  
  Show submenu for WebRTC Services 
  
    - [Assess](https://webrtc.ventures/services/assess/)
    - [Build](https://webrtc.ventures/services/build/)
    - [Integrate](https://webrtc.ventures/services/integrate/)
    - [Test](https://webrtc.ventures/services/test/)
    - [Manage](https://webrtc.ventures/services/manage/)
    - [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/)
- Our Partners
  
  Show submenu for Our Partners 
  
    - [Amazon Chime SDK](https://webrtc.ventures/partners/amazon-chime-sdk/)
- Stories of Success
  
  Show submenu for Stories of Success 
  
    - [Remote Video Interpreting Platform with Agent Routing](https://webrtc.ventures/successes/remote-video-translation-platform/)
    - [WebRTC to SIP Gateway for ASL Interpreters](https://webrtc.ventures/successes/webrtc-to-sip-gateway-for-asl-interpreters/)
    - [Audio Listening Device to Improve Surgical Outcomes](https://webrtc.ventures/successes/audio-listening-device-to-improve-surgical-outcomes/)
    - [Albania’s First Telemedicine Platform](https://webrtc.ventures/successes/albanias-first-telemedicine-platform/)
    - [Automated Video Storytelling with the Amazon Chime SDK](https://webrtc.ventures/successes/automated-video-storytelling-with-the-amazon-chime-sdk/)
    - [Large Scale Video Conferencing](https://webrtc.ventures/successes/large-scale-video-conferencing/)
    - [Broadcasting and Webcast Control Room](https://webrtc.ventures/successes/live-video-broadcasting-and-webcast-control-room/)
- WebRTC Resources
  
  Show submenu for WebRTC Resources 
  
    - [WebRTC Live](https://webrtc.ventures/webrtc-live/)
    - [WebRTC Tips](https://www.youtube.com/playlist?list=PLayYqdnyegt3QvxX-Rt6wbFIK8727Z5Oz)
    - [WebRTC.ventures Blog](https://webrtc.ventures/blog/)
    - [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/)
    - [WebRTC.ventures Training Program](https://webrtc.ventures/webrtc-ventures-training-program/)
- [About Us](https://webrtc.ventures/our-team/)
  
  Show submenu for About Us 
  
    - [Blog](https://webrtc.ventures/blog/)
    - [Our Team](https://webrtc.ventures/our-team/)
    - [Jobs](https://webrtc.ventures/jobs/)

Open main navigation

Close main navigation

- [WebRTC Services](https://webrtc.ventures/webrtc-development-services/)
  
  Show submenu for WebRTC Services 
  
    - [Assess](https://webrtc.ventures/services/assess/)
    - [Build](https://webrtc.ventures/services/build/)
    - [Integrate](https://webrtc.ventures/services/integrate/)
    - [Test](https://webrtc.ventures/services/test/)
    - [Manage](https://webrtc.ventures/services/manage/)
    - [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/)
- Our Partners
  
  Show submenu for Our Partners 
  
    - [Amazon Chime SDK](https://webrtc.ventures/partners/amazon-chime-sdk/)
- Stories of Success
  
  Show submenu for Stories of Success 
  
    - [Remote Video Interpreting Platform with Agent Routing](https://webrtc.ventures/successes/remote-video-translation-platform/)
    - [WebRTC to SIP Gateway for ASL Interpreters](https://webrtc.ventures/successes/webrtc-to-sip-gateway-for-asl-interpreters/)
    - [Audio Listening Device to Improve Surgical Outcomes](https://webrtc.ventures/successes/audio-listening-device-to-improve-surgical-outcomes/)
    - [Albania’s First Telemedicine Platform](https://webrtc.ventures/successes/albanias-first-telemedicine-platform/)
    - [Automated Video Storytelling with the Amazon Chime SDK](https://webrtc.ventures/successes/automated-video-storytelling-with-the-amazon-chime-sdk/)
    - [Large Scale Video Conferencing](https://webrtc.ventures/successes/large-scale-video-conferencing/)
    - [Broadcasting and Webcast Control Room](https://webrtc.ventures/successes/live-video-broadcasting-and-webcast-control-room/)
- WebRTC Resources
  
  Show submenu for WebRTC Resources 
  
    - [WebRTC Live](https://webrtc.ventures/webrtc-live/)
    - [WebRTC Tips](https://www.youtube.com/playlist?list=PLayYqdnyegt3QvxX-Rt6wbFIK8727Z5Oz)
    - [WebRTC.ventures Blog](https://webrtc.ventures/blog/)
    - [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/)
    - [WebRTC.ventures Training Program](https://webrtc.ventures/webrtc-ventures-training-program/)
- [About Us](https://webrtc.ventures/our-team/)
  
  Show submenu for About Us 
  
    - [Blog](https://webrtc.ventures/blog/)
    - [Our Team](https://webrtc.ventures/our-team/)
    - [Jobs](https://webrtc.ventures/jobs/)
- [Contact us](https://webrtc.ventures/contact/)

[Contact us](https://webrtc.ventures/contact/)

 Dec 7, 2017 12:00:00 AM

# \[Demo\] WebRTC Video Call over Websockets

[Daniel Phillips](https://blog.webrtc.ventures/author/daniel-phillips)

Share: [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://blog.webrtc.ventures/2017/12/webrtc-video-call-demo-over-websockets) [X Twitter icon](https://twitter.com/intent/tweet?url=https://blog.webrtc.ventures/2017/12/webrtc-video-call-demo-over-websockets) [envelope icon](mailto:?body=https://blog.webrtc.ventures/2017/12/webrtc-video-call-demo-over-websockets)

In this post we are going to explore the concepts we explained in a previous [post](https://webrtc.ventures/2017/10/learn-how-to-build-a-chat-based-application-with-webrtc-websockets/) using a live video call demo, showing the interaction between the components of a web application using WebRTC and Websockets. At the end of the post, we will share the link to this demo, so you will be able to play with it and see the application in action.

## Step 1. Requesting Communication

The demo is configured to work with rooms. It ensures your communication is separated from other video calls and keeps safe the exchange of information between peers.

In order to request a call with other peer we need to create a room.  You can do so by following this [link](https://webrtc-demo-01.herokuapp.com).

In this demo we will use the room name: **Room**

Once clicked, you will be asked for the room name  Complete the information and click on “ok” button.

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost1.png?width=599&height=416&name=blogpost1.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost1.png?width=599&height=416&name=blogpost1.png)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/blogpost1.png)

You will be asked to allow Camera and Microphone devices.  Select what you would like to use and confirm clicking on the “Allow” button.

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost2-1-1.png?width=383&height=297&name=blogpost2-1-1.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost2-1-1.png?width=383&height=297&name=blogpost2-1-1.png)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/blogpost2-1-1.png)

## Step 2. Establishing Communication

Assuming that this is the first request received by the WebSocket server, the user would receive the following message.

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost3.png?width=580&height=307&name=blogpost3.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost3.png?width=580&height=307&name=blogpost3.png)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/blogpost3.png)

This message indicates that you have been accepted for communication and the count of active members in the call.

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost4.png?width=298&height=64&name=blogpost4.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost4.png?width=298&height=64&name=blogpost4.png)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/blogpost4.png)  
If a second user tries to join the call, the message he or she will receive is a little bit different.

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost5.png?width=577&height=295&name=blogpost5.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost5.png?width=577&height=295&name=blogpost5.png)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/blogpost5.png)

This message means that has been accepted and at the same time it is confirmed that there is someone else on the call. Congratulations the room is now full to start communication!

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost6.png?width=251&height=77&name=blogpost6.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost6.png?width=251&height=77&name=blogpost6.png)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/blogpost6.png)  
The first user joined will receive the following message:

### [![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost7.png?width=437&height=64&name=blogpost7.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost7.png?width=437&height=64&name=blogpost7.png)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/blogpost7.png) What would happen if a third user tries to join the call?

The WebSocket is responsible for validating that each call accepts a maximum of 2 active members; therefore, a third party will receive a rejection message and the communication will not be established. See example below.

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost8.png?width=593&height=309&name=blogpost8.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost8.png?width=593&height=309&name=blogpost8.png)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/blogpost8.png)

The message means that the room is full and even though you have started a session you’re not assigned to this room.[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost9.png?width=298&height=66&name=blogpost9.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/blogpost9.png?width=298&height=66&name=blogpost9.png)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/blogpost9.png)If you want to finalize the communication, just close the web navigator or tab and you will be out of the room.

## Try it Yourself!

Here is the [demo link.](https://webrtc-demo-01.herokuapp.com/)  Feel free to invite a friend and test how it out.

If you have any suggestion or comments do not hesitate write them in the comments section.

The web application described in this post is just for demo purposes.

Its functionality is very simple. However, if you need a more complex WebRTC application that supports more users or a video call app with more functionalities, [contact us](https://webrtc.ventures/contact/) today.

We have an experienced team ready & happy to help you out.

 

[CPaaS](https://blog.webrtc.ventures/tag/cpaas), [Managed Services](https://blog.webrtc.ventures/tag/managed-services), [Events](https://blog.webrtc.ventures/tag/events), [Video Conferencing](https://blog.webrtc.ventures/tag/video-conferencing), [Real Time Weekly](https://blog.webrtc.ventures/tag/real-time-weekly), [WebRTC Architecture](https://blog.webrtc.ventures/tag/webrtc-architecture), [Broadcasting](https://blog.webrtc.ventures/tag/broadcasting), [Medical](https://blog.webrtc.ventures/tag/medical), [WebRTC Live](https://blog.webrtc.ventures/tag/webrtc-live), [Showcase](https://blog.webrtc.ventures/tag/showcase), [Thoughts](https://blog.webrtc.ventures/tag/thoughts), [Vonage](https://blog.webrtc.ventures/tag/vonage), [Daily](https://blog.webrtc.ventures/tag/daily), [Jobs](https://blog.webrtc.ventures/tag/jobs), [Contact Centers](https://blog.webrtc.ventures/tag/contact-centers), [Telehealth](https://blog.webrtc.ventures/tag/telehealth), [Education](https://blog.webrtc.ventures/tag/education), [Technical](https://blog.webrtc.ventures/tag/technical), [General](https://blog.webrtc.ventures/tag/general), [Story of success](https://blog.webrtc.ventures/tag/story-of-success), [The WebRTC.ventures Blog](https://blog.webrtc.ventures/tag/the-webrtc-ventures-blog), [Testing](https://blog.webrtc.ventures/tag/testing), [Gaming](https://blog.webrtc.ventures/tag/gaming), [DevOps](https://blog.webrtc.ventures/tag/devops), [Symbl.ai](https://blog.webrtc.ventures/tag/symbl-ai)

## Related posts

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/The-Road-to-WebRTC-20.jpg?height=200&name=The-Road-to-WebRTC-20.jpg)](https://blog.webrtc.ventures/2018/07/tutorial-build-video-conference-application-webrtc-2)

## [\[Tutorial\] How to Build a Video Conference Application with WebRTC](https://blog.webrtc.ventures/2018/07/tutorial-build-video-conference-application-webrtc-2)

[Hector Zelaya](https://blog.webrtc.ventures/author/hector-zelaya) 

 Jul 26, 2018 12:00:00 AM

In this blog post, we will provide a tutorial on how to build a video conference application using...

[Read more](https://blog.webrtc.ventures/2018/07/tutorial-build-video-conference-application-webrtc-2)

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Tutorial_-How-to-Build-a-Video-Conference-App-with-WebRTC.png?height=200&name=Tutorial_-How-to-Build-a-Video-Conference-App-with-WebRTC.png)](https://blog.webrtc.ventures/2019/11/tutorial-how-to-build-a-video-conferencing-application-with-webrtc)

## [Tutorial: How to Build a Video Conferencing Application with WebRTC](https://blog.webrtc.ventures/2019/11/tutorial-how-to-build-a-video-conferencing-application-with-webrtc)

[Hector Zelaya](https://blog.webrtc.ventures/author/hector-zelaya) 

 Nov 4, 2019 12:00:00 AM

This blog post provides a tutorial on building a video conferencing application using WebRTC....

[Read more](https://blog.webrtc.ventures/2019/11/tutorial-how-to-build-a-video-conferencing-application-with-webrtc)

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Stream-a-Remote-Screen-with-WebRTC.png?height=200&name=Stream-a-Remote-Screen-with-WebRTC.png)](https://blog.webrtc.ventures/2019/08/stream-a-remote-screen-with-webrtc)

## [Stream a Remote Screen with WebRTC](https://blog.webrtc.ventures/2019/08/stream-a-remote-screen-with-webrtc)

[webrtc](https://blog.webrtc.ventures/author/webrtc) 

 Aug 27, 2019 12:00:00 AM

Rafael Viscarra, one of our engineers, wrote a blog post about using WebRTC to stream a remote...

[Read more](https://blog.webrtc.ventures/2019/08/stream-a-remote-screen-with-webrtc)

### WebRTC.Ventures Services

...

- Assess
- Build
- Integrate
- Test
- Deploy & Manage

### Contact Us

...

**Video should be an opportunity, not a headache.**   
 We’re here to build, integrate, assess and optimize, test, and even deploy and manage your live video application. 

[Contact us](https://blog.webrtc.ventures/2017/12/webrtc-video-call-demo-over-websockets#contact)

### WebRTC Live

...

 View [past episodes](https://blog.webrtc.ventures/webrtc-live/) of our webinar interview series about the latest webRTC use cases and technical updates. Join our mailing list to learn about upcoming episodes! 

![WebRTC Live](https://blog.webrtc.ventures/hs-fs/hubfs/Template%20Images/widged-bannet.webp?height=90&name=widged-bannet.webp)

![logo-main-light](https://blog.webrtc.ventures/hubfs/logo-main-light.svg "logo-main-light")

We’re one of the few agencies in the world dedicated to WebRTC development. This dedication and experience is why so many people trust us to help bring live video application dreams to life.

 

### Let's get started!

###### **[Contact us today](https://webrtc.ventures/contact/)**

**[info@webrtc.ventures](mailto:info@webrtc.ventures)**

<https://www.linkedin.com/company/webrtc-ventures> <https://www.youtube.com/@WebrtcVentures>

### Join our mailing list

We don't e-mail often (a few times a month max), and it will be worth it when we do! Of course, we respect your privacy and will not share your contact information.

© 2023 WebRTC.ventures, an [AgilityFeat](https://agilityfeat.com/) company / [Privacy Policy](https://webrtc.ventures/privacy-policy//)

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Daniel Phillips",
    "url" : "https://blog.webrtc.ventures/author/daniel-phillips"
  },
  "dateModified" : "2024-04-03T18:22:14.945Z",
  "datePublished" : "2017-12-07T05:00:00.000Z",
  "headline" : "WebRTC Video Call Demo over Websockets",
  "image" : [ "https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/webRTCoverWebsocketsblog.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://blog.webrtc.ventures/2017/12/webrtc-video-call-demo-over-websockets",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://blog.webrtc.ventures/hubfs/logo-main-light.svg"
    }
  }
}
```