---
title: "Unveiling the Future of Interaction: WebRTC and Animated Avatars – WebRTC.ventures"
description: "At WebRTC.ventures, we're pioneers in harnessing the power of WebRTC to create extraordinary connections. In this blog post, we learn how to transmit audio via WebRTC and receive animated video talking portraits -- otherwise known as \"avatars\"."
image: https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/Unveiling-the-Future-of-Interaction-WebRTC-and-Animated-Avatars.png
---

[Skip to content](https://blog.webrtc.ventures/2023/08/unveiling-the-future-of-interaction-webrtc-and-animated-avatars#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/)

 Aug 18, 2023 12:00:00 AM

# Unveiling the Future of Interaction: WebRTC and Animated Avatars

[Alberto Gonzalez](https://blog.webrtc.ventures/author/alberto-gonzalez)

Share: [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://blog.webrtc.ventures/2023/08/unveiling-the-future-of-interaction-webrtc-and-animated-avatars) [X Twitter icon](https://twitter.com/intent/tweet?url=https://blog.webrtc.ventures/2023/08/unveiling-the-future-of-interaction-webrtc-and-animated-avatars) [envelope icon](mailto:?body=https://blog.webrtc.ventures/2023/08/unveiling-the-future-of-interaction-webrtc-and-animated-avatars)

In a world that craves dynamic interactions and immersive experiences, the realm of technology keeps pushing the boundaries of what’s possible. Imagine a platform that combines the magic of real-time audio transmission with animated VR avatars. 

At [WebRTC.ventures](https://webrtc.ventures), we’re pioneers in harnessing the power of WebRTC to create extraordinary connections. In this blog post, we learn how to transmit audio via WebRTC and receive animated video talking portraits — otherwise known as “avatars”.

## WebRTC audio becomes a VR Avatar

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/image1-300x300.jpg?width=300&height=300&name=image1-300x300.jpg) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/image1-300x300.jpg?width=300&height=300&name=image1-300x300.jpg)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/image1-1.jpg)

At the heart of this unique and engaging experience is a symphony of technologies orchestrated to redefine how we can communicate and interact online.

The backbone of the backend WebRTC functionality is powered by the [aiortc](https://github.com/aiortc/aiortc) library. This enables seamless server side real-time communication to relay streams between users over the web. The primary focus is to integrate the audio stream with an animated [VRM](https://vrm.dev/) avatar, thereby enhancing the interactive experience.

## Key Technologies and Modules

There are three important components to this mix:

1. **WebRTC with aiortc**. WebRTC is a powerful technology that facilitates real-time communication. With the “aiortc” library, developers can create WebRTC applications using Python. This library empowers the project to establish audio streams and enables synchronized communication.

1. **[Three.js](https://threejs.org/).** As a prominent 3D graphics library, Three.js is used for rendering interactive 3D computer graphics in a web browser. It offers a range of capabilities, making it an ideal choice for creating immersive visual experiences.

1. **vrm-three.** The [vrm-three](https://github.com/pixiv/three-vrm) library is utilized to load VRM 3D avatars, which are realistic digital representations of individuals. This module seamlessly integrates with Three.js, providing the foundation for the animated talking portraits.

## Making Magic Happen

We use the WebRTC API to listen for new audio track received. When received, we will need to pass it to a custom `VRMAvatar.js` that does the animation.

```
import VRMAvatar from "./VRMAvatar.js";
// Instantiate the VRMAvatar class
const myVRM = new VRMAvatar('./models/VRM1_Constraint_Twist_Sample.vrm');
// Call the animate function to display avatar and start the animation with audio stream
myVRM.animate();
myVRM.initializeVoiceToAvatar(audioStream); // passing audio (type MediaStream)
```

There are three steps here: 

1. **Initialize VRMAvatar.** The star of the show, VRMAvatar, steps onto the stage. The `VRMAvatar` class is the key to bringing VR avatars to life.

1. **Start Animation.** Invoke the `animate` function, and behold as your chosen VRM avatar springs to life! The animation loop begins, and the avatar is live.

1. **Symphony of Synchronization.** The `initializeVoiceToAvatar` function links audio streams with avatar mouth movements

## Now, a Demo!

View [the demo project](https://github.com/agonza1/ChitChatPortraits-RTC/tree/main) on Github and watch the demo below.

## Unlocking Possibilities: Where WebRTC Shines

The potential of this project spans realms:

- **Elevated Virtual Meetings.** Imagine virtual meetings where every participant has a voice and an animated presence, fostering a connection that goes beyond the screen.

- **Gaming and Live Streaming.** From the realm of entertainment to the world of gaming, the fusion of real-time audio and animated avatars opens new dimensions of engagement.

- **Education Redefined.** Virtual classrooms take a leap forward, as interactive avatars create a classroom where learning is an immersive adventure.

## WebRTC.ventures is Your Gateway to the Extraordinary

We’re not just WebRTC experts – we’re architects of experiences that bridge technology and humanity. If you need help building new extraordinary experiences or need to improve your WebRTC application, [reach out to us](https://webrtc.ventures/contact/).

At WebRTC.ventures, we don’t just build applications, we build better connections!

[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/Screen-Shot-2019-08-23-at-9_11_21-AM.png?height=200&name=Screen-Shot-2019-08-23-at-9_11_21-AM.png)](https://blog.webrtc.ventures/2019/08/press-release-webrtc-ventures-re-launches-the-webrtc-standards-webinar-series)

## [PRESS RELEASE: WebRTC.ventures re-launches the WebRTC Standards webinar series](https://blog.webrtc.ventures/2019/08/press-release-webrtc-ventures-re-launches-the-webrtc-standards-webinar-series)

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

 Aug 26, 2019 12:00:00 AM

WebRTC.ventures re-launches the WebRTC Standards webinar series Monday, August 26, 2019 |...

[Read more](https://blog.webrtc.ventures/2019/08/press-release-webrtc-ventures-re-launches-the-webrtc-standards-webinar-series)

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/ArinSime_WebRTCBoston.png?height=200&name=ArinSime_WebRTCBoston.png)](https://blog.webrtc.ventures/2016/03/webrtc-boston-recap)

## [WebRTC Boston Recap](https://blog.webrtc.ventures/2016/03/webrtc-boston-recap)

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

 Mar 9, 2016 12:00:00 AM

I originally posted this article on RealTimeWeekly.co – sign up for free weekly news on the latest...

[Read more](https://blog.webrtc.ventures/2016/03/webrtc-boston-recap)

[![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Introducing-WebRTC-Live-3.png?height=200&name=Introducing-WebRTC-Live-3.png)](https://blog.webrtc.ventures/2019/08/introducing-webrtc-live)

## [Introducing WebRTC Live!](https://blog.webrtc.ventures/2019/08/introducing-webrtc-live)

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

 Aug 23, 2019 12:00:00 AM

Last week, WebRTC.ventures produced its first episode of WebRTC Live! Formerly known as WebRTC...

[Read more](https://blog.webrtc.ventures/2019/08/introducing-webrtc-live)

### 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/2023/08/unveiling-the-future-of-interaction-webrtc-and-animated-avatars#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" : "Alberto Gonzalez",
    "url" : "https://blog.webrtc.ventures/author/alberto-gonzalez"
  },
  "dateModified" : "2024-04-03T18:07:41.587Z",
  "datePublished" : "2023-08-18T04:00:00.000Z",
  "headline" : "Unveiling the Future of Interaction: WebRTC and Animated Avatars – WebRTC.ventures",
  "image" : [ "https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/Unveiling-the-Future-of-Interaction-WebRTC-and-Animated-Avatars.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://blog.webrtc.ventures/2023/08/unveiling-the-future-of-interaction-webrtc-and-animated-avatars",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://blog.webrtc.ventures/hubfs/logo-main-light.svg"
    }
  }
}
```