ievangelist / ievangelist.videochat

Imagine two Twilio SDKs, ASP.NET Core/C#, Angular/TypeScript, SignalR, etc... Yeah, amazing!

IEvangelist - Video Chat (Powered by Twilio)

This is a demo app built for the purpose of a Twilio blog post. This application uses several key technologies that are intended to be highlighted.

1. ASP.NET Core
   1. Web API
      1. Issues JSON Web Tokens (JWT) for client-side Twilio Video interactions
      2. Offers various end-points for Room and Participant details
   2. SPA Web-Server
      1. Serves up the Angular application
   3. SignalR
      1. This is used for pushing from the server to the client, specific updates
2. Angular
   1. Various modules, components and services making up a video chat application

Configuration

There are several configurations that need to be made in order for this application to function correctly. You'll need to sign up for a Twilio Programmable Video account and get some API credentials.

#	Name	Environment Variable Key
1	AccountSid	TWILIO_ACCOUNT_SID
2	ApiKey	TWILIO_API_KEY
3	ApiSecret	TWILIO_API_SECRET

ievangelist.videochat's Issues

running sample errors

Hello,

I haven't dug into it yet, but the sample errors on run with the following stack.
Node v10
.Net Core 3

Not working on mobile browsers

Hi,
I tried using this app in the mobile browsers. When using desktop browsers video's of the participant getting synced without an issue. But when an participant joined from a mobile browser it takes 4-5 minutes to sync. Do you have any idea on how to fix that issue? Would be a great help

Video not working in iOS

Video not rendering in iOS devices using csharp SDK demo code, whereas javascriptsdk demo is working fine.
Can you please help me with the solution with csharp SDK?

Upgrading to net 5.0.2

Hello, I am upgrading this and trying it, getting some nuget issues can you help resolve and push.

Issue in firefox, does not connect to room

I checked demo example in firefox web browser and found issue to connect room.
Below url
https://ievangelist-videochat.azurewebsites.net

/

Issue while publishing the application on local box

I got this errors during publish.

create room issue

room creating for other participants is not working any more please reslove it

Element implicitly has an 'any' type because index expression is not of type 'number'

We are getting the following error

Element implicitly has an 'any' type because index expression is not of type 'number'

method name

private async tryGetDevices() {
        const mediaDevices = await navigator.mediaDevices.enumerateDevices();
        console.log("mediaDevices",mediaDevices)
       //return mediaDevices;
     const devices = ['audioinput', 'audiooutput', 'videoinput'].reduce((options , kind) => {
            return options[kind] = mediaDevices.filter(device => device.kind === kind);
        }, [] as Devices);
        return devices;         
    }

Raise Hand, Mute All, Remove Participants

We are facing issue to implement Mute All Participants, Raise Hand ,Remove Participants. Please provide solution. We are using your Repo

How to composition video and audio file?

I already done with creation of the room and recordings but the recording files should be video and audio with unique room id and my question is how to composition video and audio file in twilio? please any help me for this

Thanks in advance

Mute/Unmute video and audio track

Can you please post an example of how to mute/unmute tracks? I am calling disable() method on the LocalTrackPublication.Track instance, but it doesn't work properly. Any help will be appreciated.

Thank you.

Adding Responsiveness to this Project?

This is a great sample app showing us the ropes! I wanted to add responsiveness to this, so that a mobile user (or a user who shrinks down their browser window) will see a straight-vertical line of all page elements.

Implementing Bootstrap and a resizing event handler, things are going pretty well. The only quirk is that the user's own camera view that appears in the right pane below the Settings elements doesn't appear when the page is full-screen. This is after the user creates a room and their camera is added to it. This camera view just disappears. While the preview did previously appear in the center of the screen.

Below is my reworked home.component.html file. Any suggestions? I know this is a bit OT, since it's outside the scope of the project itself. I am not an expert UI web dev, as I typically don't pretty things up too much :)

<div class="grid-container">
 <!--<div class="grid-bottom-right">
    <a href="https://twitter.com/davidpine7" target="_blank"><i class="fab fa-twitter"></i> @davidpine7</a>
</div>-->
<!--<div class="grid-top-right">-->
<div class="grid-top-right d-none d-sm-none d-md-block d-lg-block d-xl-block">
    <a href="https://www.diamondcellar.com" target="_blank">
        <img src="assets/dcLogo_black.JPG" alt="Diamond Cellar Holdings" />
    </a>
</div>
<div class="grid-content d-block d-sm-block d-md-none d-lg-none d-xl-none">
    <app-rooms #rooms (roomChanged)="onRoomChanged($event)" [activeRoomName]="!!activeRoom ? activeRoom.name : null"></app-rooms>
    <app-camera #camera [style.display]="!!activeRoom ? 'none' : 'block'"></app-camera>
    <app-participants #participants
                      (leaveRoom)="onLeaveRoom($event)"
                      (participantsChanged)="onParticipantsChanged($event)"
                      [style.display]="!!activeRoom ? 'block' : 'none'"
                      [activeRoomName]="!!activeRoom ? activeRoom.name : null"></app-participants>
    <app-settings #settings (settingsChanged)="onSettingsChanged($event)"></app-settings>
</div>
<!--<div class="grid-left">-->
<div class="grid-left d-none d-sm-none d-md-block d-lg-block d-xl-block">
    <app-rooms #rooms (roomChanged)="onRoomChanged($event)" [activeRoomName]="!!activeRoom ? activeRoom.name : null"></app-rooms>
</div>
<!--<div class="grid-content">-->
<div class="grid-content d-none d-sm-none d-md-block d-lg-block d-xl-block">
    <app-camera #camera [style.display]="!!activeRoom ? 'none' : 'block'"></app-camera>
    <app-participants #participants
                      (leaveRoom)="onLeaveRoom($event)"
                      (participantsChanged)="onParticipantsChanged($event)"
                      [style.display]="!!activeRoom ? 'block' : 'none'"
                      [activeRoomName]="!!activeRoom ? activeRoom.name : null"></app-participants>
</div>
<!--<div class="grid-right">-->
<div class="grid-right d-none d-sm-none d-md-block d-lg-block d-xl-block">
    <app-settings #settings (settingsChanged)="onSettingsChanged($event)"></app-settings>
</div>
<!--<div class="grid-top-left">-->
<div class="grid-top-left d-none d-sm-none d-md-block d-lg-block d-xl-block">
    <a href="https://www.twilio.com/video" target="_blank">
        <img src="assets/twilio-badge-red.png" alt="Powered by Twilio" />
    </a>
</div>