Video not working in iOS

turnoutnow-robin commented 4 years ago

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?

IEvangelist commented 4 years ago

Hi @robin-turnoutnow,

Are you referring to video not rendering on an iPhone, or iPad? If so that is probably a Safari issue that I was unaware of. It could be related to this Stack Overflow issue. Honestly, iOS does many things differently and intentionally so. This issue is not actually related to the C# SDK, but rather the HTML markup and the corresponding <video> element. I'm following the spec, if they're browser chooses not to comply -- that is kind of out of my hands. But I hear you, I could make a change that might address the issue.

On this function, when the video element is being rendered and bound to the video tracks from the Twilio SDK, you'd want to add another attribute.

private async initializeDevice(kind?: MediaDeviceKind, deviceId?: string) {
        try {
            this.isInitializing = true;

            this.finalizePreview();

            this.localTracks = kind && deviceId
                ? await this.initializeTracks(kind, deviceId)
                : await this.initializeTracks();

            this.videoTrack = this.localTracks.find(t => t.kind === 'video') as LocalVideoTrack;
            const videoElement = this.videoTrack.attach();

            // This is the new line to set the playsinline attr.
            this.renderer.setAttribute(videoElement, 'playsinline', '');

            this.renderer.setStyle(videoElement, 'height', '100%');
            this.renderer.setStyle(videoElement, 'width', '100%');
            this.renderer.appendChild(this.previewElement.nativeElement, videoElement);
        } finally {
            this.isInitializing = false;
        }
    }

turnoutnow-robin commented 4 years ago

Hi David, Well here I have downloaded both demos https://www.twilio.com/blog/video-chat-app-asp-net-core-angular-twilio as well the other one JavaScript SDK where, JavascriptSDK Demo is working fine but chat-app-asp-net-core-angular-twilio demo is NOT working in iOS (iPhones) So looking to get some help to fix the issue.

IEvangelist commented 4 years ago

I'm a little confused, please help me understand the question better. I'm the author on that article that you linked, it uses both the Twilio .NET SDK and the Twilio JavaScript SDK. If the video is not rendering on iOS, the reason for that is due to the Safari web browser, in order to fix it you could try the work around I proposed above.

turnoutnow-robin commented 4 years ago

I have created 2 separate demo urls:

I deployed build using Twilio JavaScript SDK Which is working fine on all devices including iOS.
Deployed build using .NET SDK Where the videos are not working on iOS devices like iPhones. So seeking help to get it fixed for .NET SDK

IEvangelist commented 4 years ago

Are these from the same article? That's where I'm getting confused, what are the two demo URLs and what are both of them based on? Are you able to provide me with more details please?

My article uses the .NET SDK on the server and the JS SDK on the client.

turnoutnow-robin commented 4 years ago

Hi, here is the url https://twilio.turnoutnow.com/ you cannot event create room using iOS devices like iPhone

IEvangelist commented 4 years ago

I explained before, what code needs to be changed on https://github.com/IEvangelist/IEvangelist.VideoChat/issues/13#issuecomment-598703059. You need to update the code, and redeploy with these changes. iOS handles things differently and this code needs to be updated to explicitly set the playsinline attribute.

IEvangelist / IEvangelist.VideoChat

Video not working in iOS #13