twilio video not working in safari

iOS 15 Safari WebRTC Issue

We’re encountering an issue on the iOS 15 Beta when establishing a WebRTC connection through Safari, where we are not receiving the remote streams, either video or audio. This has been working in iOS 14 with no issues, and a build of WebRTC (from commit c830bd627f519b9dff95b04b6ac8c104f088e1ce ) continues to work within our App, but not through either the Safari App or when launched as a SFSafariViewController.  The issue is present in Beta 8, however has been present since at least Beta 2, and presumably prior to that as well.

We have run the below test cases through http://www.appr.tc/, encountering the following results:

• iOS 15b8 iPhone Safari to iOS 15b8 iPad Safari: Connected, no remote stream visible.
• iOS 15b8 iPhone Chrome to iOS 15b8 iPad Chrome: Connected, no remote stream visible.
• MacOS Monterey Safari to iOS 15b8 iPad: Connected, both streams visible on iMac, no remote stream on iPad.
• macOS Big Sur Safari to iOS 15b8 iPhone: Connected, both streams visible on iMac, no remote stream on iPhone.
• macOS Big Sur Chrome to iOS 15b8 iPhone: Connected, both streams visible on iMac, no remote stream on iPhone.
• macOS Big Sur Chrome to iOS 15b8 iPhone Simulator: Connected, both streams visible on iMac, no remote stream on Simulator.

The above results mirror the issue we’ve been encountering in our own product where the stream from the device is sent to the remote, but the remote stream is not being shown on the device. Whether this is an issue with Safari or with the version of WebRTC used therein we aren’t sure.

It does seem that if we change the default Safari experimental settings below in Beta 8 we are seeing success:

• “VP9 SW Decoder on Battery” - Enabled
• “VP9 Decoder” - Disabled

Given the above, we suspect this issue may be related to Safari now using VP9?

AppRTC source: https://github.com/webrtc/apprtc

This update is going to heavily impact me as I rely on video broadcasting through Safari on my phone for my job. Without this, it will be a major **** to my income and I am afraid to update my phone until then.

I have the same problem on the final release with my iPhone XS Max. Please give us an update about this problem

We require WebRTC for a huge broadcast event in Toronto ON Canada over the next few weeks, and everything was working great on 14.8, and now that 15 has dropped, all of our iOS devices will NOT work on LTE/5G. Friends at Apple.. please help!

Did you find any solution or cause for this issue?

We have the same (or similar) problem with iOS 15. iOS 14.8 worked fine, but under iOS 15, WebRTC video and audio aren't getting delivered to the remote peers.

A fix that worked for us was to have the user turn off "WebRTC Platform UDP Sockets" in the iOS Safari -> Advanced -> Experimental Features.

We also experimented with the "VP9 Decoder", "VP9 SW Decoder on Battery", and "VP8 Decoder" experimental features, but no combination seemed to work.

We have a Web App that uses WebRTC 2 way audio. After upgrading to iOS 15 the output audio to speakers (or bluetooth with AirPods) is about 2/3 reduced. The microphone outgoing audio is fine. This has been reproduced on iPhone 7 and iPhone XS.

It can be reproduced by going to:

https://webrtc.github.io/samples/src/content/getusermedia/audio/

https://appr.tc/

If you compare the playback audio level of an iPhone XS running 15.x, you will find it is about 2/3 volume as an iPhone XS running 14.8.

Our web App has been running fine with good audio levels since 2018 and iOS 11.x.

I am running iOS 15.2 Beta. We have an Cordova based application using WKWebView. We noticed that we are not able to communicate (Exchanging a Video feed) with the WebRTC client in some Networks. We suspect that there is some kind of DTLS issue as we can see an ICMP code 13 (Communication administratively filtered) response for a STUN binding request in Wireshark. Also in the iOS OS Log we can see that a UDP connection can not be established, which would explain the ICMP.

The experimental feature did not fix the issue, also playing the the other flags you mentioned did nothing to improve the situation.

Just for reference, I created a WebKit Bug Report: https://bugs.webkit.org/show_bug.cgi?id=233752

We're experiencing similar issues with our WebRTC App in iOS 15. Previous iOS version worked great, iOS 15 does not publish any video feeds. We've spent a considerable amount of time playing with the "Advanced Experimental Feature" settings on an iPhone 8 and none of them seem to correct the issue. Is there any official documentation from Apple on what is causing this problem and how to correct it?

I would also be thankful for an official statement regarding this issue. We have spend days with this issue without any notable improvements.

It looks like the iPhone is is some kind of loop and is not processing the DTLS "Client Hello" messages. In Wireshark we always see just "DTLS" instead of "DTLSv1.2" when the issue occurs. We have two customers reporting this issue, one can't establish a connection at all, the other one has the issue every now and then. Our first thought is that "DTLSv1.0" is used, as it is not supported anymore by Safari we tried to pin it to "DTLSv1.2" but no luck. It appears Wireshark will display just "DTLS" as long as no "DTLS HelloVerifyRequest" is sent by the other side in the DTLS-Handshake process.

Did someone have similar findings?

The low volume audio issue is being tracked as a webkit bug: https://bugs.webkit.org/show_bug.cgi?id=230902

It has been assigned to an Apple engineer - but I'm thinking the more comments are added on that webkit bug the more noticeable it will get.

We just re-tested with the newly released 15.1 and the issue is still there with low audio with a WebRTC audio stream. Tested on an iPhone XS. Our users will need to refrain from installing 15.x until this is resolved.

have tested in new beta??

15.2 is the same. Still not receiving or decoding the webrtc stream.

... (edit: originally made an edit to this post by accident, instead of to the forum topic itself).

I've experienced the issue where streams aren't starting w/ Safari 15x (both Mac and iOS), and discovered that it seems to fix itself (in my project, at least) if stopping the outgoing stream (per audio / video kind), then restarting the stream (i.e. making a new gUM [getUserMedia] call).

The "restart" method I just mentioned seems to also work if choosing an entirely different capture device, of the same audio / video kind, on the second attempt. i.e. first microphone capture fails for one device, starting another device works.

Even stranger, for me, is my project is based in React, and I've worked around this w/o doing the restart method in development mode, but in production, it is persistent, and for the life of me I can't figure out what's changed.

Is there any update on this or has somebody found a fix for this? I have been facing this issue as well since the latest iOS update. I am using HTML Canvas element as the video source to publish the video. All I have been getting is a black screen and sometimes the first frame loads but ends up with a black screen.

My problem was slightly different but this might help.

WebRTC stream was delivered but the framerate was very low.

Disabling WebRTC H264 LowLatency fixed the problem.

iPhone 12 Mini / iOs 15.4.1

How to do that?

please guys fix it .i was going to publish an app this week but the webrtc is not working on ios 15.this is disaster

So what is the status of this? I am having issues with WebRTC streaming video on iOS. Works great on PC but not on iPhone or iPad.

Anyone know the official word?

I have THE solution ! Install firefox and the rtc player will worke like apparently apple have done an other time a feature and not a bug whith safari...

For calendar, prefer sabre.io at apple calendar like this you could do proper injection inside them in PHP ( a possibilty in apple few years ago....but a feature now, and not a bug too)

Hello, not working for me in iOS.

I am having the same problem. WebRTC works correctly using the following configurations:

• PC - PC (Linux - Mac - Win)

note: on Mac, Safari doesn't work, you only see the local video but you don't get the remote stream. Also local video is not sent. Using Firefox and Chrome it works perfectly.

• PC - Android
• Android - Android.

With iOS devices it's not possible to send the local video stream under any circumstances and remote stream can only be viewed if the ios device joins conversation after other parties and using Chrome or Firefox (Safari doesn't work)

Hi, I found what the problem was. I was using a method (.addStream) which has been removed from the standard and is no longer implemented on Apple devices. (but still recognized in other platforms) I changed my code to something like this:

Everything seems to be ok right now

Cheers, Andrea

I've updated my addStream method to addTrack and still have this issue [Error] A MediaStreamTrack ended due to a capture failure specifically on audio/mic track on my MacBook m2. Safari 16.4.

Well, in my case it was a quick fix - I've removed sampleRate from audio constraints.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video streaming is not working in Safari OS X 13.0.4 #107

divya-kanak commented Jan 31, 2020

manjeshbhargav commented Feb 10, 2020

• 👍 1 reaction

Sorry, something went wrong.

manjeshbhargav commented Apr 27, 2020

No branches or pull requests

JavaScript Platform Overview

We recommend migrating your application to the API provided by our preferred video partner, Zoom. We've prepared this migration guide (link takes you to an external page) to assist you in minimizing any service disruption.

Twilio's Programmable Video JavaScript SDK lets you add real time voice and video to your web applications. The JavaScript SDK connects to a Twilio Video Room and allows you to control the client-side video conference experience.

Intending to write back-end JavaScript with Twilio in Node.js to support your front-end client? Check out the Twilio Node.js SDK (link takes you to an external page) .

Your application will also need a backend server to create Access Tokens that the JavaScript SDK can use to connect to a Video Room. Check out How to Build a Twilio Video application in the Twilio Video Overview page to learn about the various components required in a video application.

Add the SDK to your application

Supported browsers, resources for getting started.

• Best practices
• Troubleshooting and diagnostics tools

Video Processors

Sdk documentation.

You can include the JavaScript SDK in your application either by installing it with Node Package Manager (link takes you to an external page) (npm) or using the Twilio CDN.

See the list of supported browsers below.

Install the Video JavaScript SDK using npm:

Then, you can start using the JavaScript SDK in your application by importing it:

Using this method, you can access the JavaScript SDK through the Twilio.Video browser global:

You can also include the JavaScript SDK in your application from Twilio's CDN:

You can access the JavaScript SDK through the Twilio.Video browser global:

You should make sure you are using the latest Twilio Video JavaScript SDK release. To find the CDN link for the most recent JavaScript SDK release, visit the JavaScript SDK latest release documentation (link takes you to an external page) .

The JavaScript Video library requires recent versions of Chrome, Safari, Firefox or Edge (Chromium).

Some MediaTrackConstraints (link takes you to an external page) are not supported by Safari.

In your application, you can check if a user is on a supported browser using the isSupported flag.

WebView on iOS

WebView is now supported on iOS 14.3 and onward from JS SDK version 2.21.0.

twilio-video.js now supports WKWebView and SFSafariViewController on iOS version 14.3 or later. The flag isSupported (link takes you to an external page) relies partly on the User-Agent string (link takes you to an external page) to determine if twilio-video.js officially supports the user's browser. If your application modifies the default value for the User-Agent string, the new value should follow the correct format (link takes you to an external page) . For iOS applications (link takes you to an external page) , your application will need to include the camera usage description (link takes you to an external page) , microphone usage description (link takes you to an external page) , and inline media playback (link takes you to an external page) for the SDK to work on WKWebView.

Note: There are some common issues (link takes you to an external page) such as interruptions on mobile devices from backgrounding the application or switching between applications. These can sometimes cause VideoTracks to go black or AudioTracks to stop.

WebView on Android

Android WebView is not currently supported by the JS SDK and the flag isSupported (link takes you to an external page) will return false if you use the JS SDK on Android WebView.

There are many resources you can explore when starting to build your first Twilio Video applications with the JavaScript SDK. You can follow a tutorial, read documentation, or deploy a pre-built sample video application.

Below are several tutorials that show you how to build an application from the ground up using the JavaScript SDK.

• Superclass Video : A recording of a Twilio Video Superclass, which introduces Twilio Video and walks through building a sample video chat application with Python and the JavaScript SDK.
• Python and Flask
• Node.js and Express
• Ruby and Sinatra (link takes you to an external page)
• PHP and Symfony (link takes you to an external page)
• C#/.NET and Blazor WebAssembly (link takes you to an external page) (uses AngularJS)
• Serverless with Twilio Functions (link takes you to an external page) (uses Twilio Functions to host your application and token server)

Twilio's Blog has many posts about building applications with Twilio Video. You can explore many different Twilio features and see examples using a variety of languages and frameworks. To find all Video blog posts, filter posts for the "Video" tag (link takes you to an external page) . You can also find translated blog posts on the Twilio Blog.

Getting Started Guide

Learn more about building a video application with the JavaScript SDK Getting Started guide.

• JavaScript SDK Getting Started

CodeExchange

Twilio's CodeExchange is a repository of code samples for common Twilio use cases.

• Basic JavaScript SDK Video Chat application (link takes you to an external page) (this is one-click deployable, no local setup required)
• List of all CodeExchange Video applications (link takes you to an external page)

Quickstart application

Quickstart applications are minimal Twilio Video applications that demonstrate the basics of working with Twilio Video.

• JavaScript Quickstart application (link takes you to an external page)

Quick Deploy application

Quick Deploy applications are more full-featured than the Quickstart applications above. They demonstrate a wide variety of Twilio Video functionality and can be used to quickly get started with a robust set of Video tools.

• React Quick Deploy application (link takes you to an external page)

CodeSandbox

Try out and experiment with a basic CodeSandbox (link takes you to an external page) that uses the Twilio Video JavaScript SDK to display a local user's video.

Best Practices

View recommendations and best practices for building applications using the Programmable Video JavaScript SDK.

Troubleshooting and diagnostic Tools

Twilio has tools for understanding, troubleshooting, and enhancing your Twilio Video applications throughout the development lifecycle. You can use these tools to perform pre-call quality checks, as well as to gain insight into your application's performance and participants' experiences during or after a video call.

Video Diagnostics Application

The Twilio Video Diagnostics Application (link takes you to an external page) is an open-source ReactJS application that tests participants' device and software setup, connectivity with the Twilio Cloud, and network performance. It uses Twilio's RTC Diagnostics SDK and Preflight API to provide end-users feedback about their network quality and device setup and also includes recommendations for improving their video call quality.

You can learn more about the Video Diagnostics App in the blog post (link takes you to an external page) or by visiting the README (link takes you to an external page) .

The RTC Diagnostics SDK and Preflight API can also be used independently in your application to test your participants' device setup and network connectivity.

RTC Diagnostics SDK

Twilio's RTC Diagnostics SDK (link takes you to an external page) for JavaScript applications provides functions to test a participant's input and output devices, including microphones, speakers, and cameras, as well as functionality to confirm that a participant meets the network bandwidth requirements required to make a voice call or conduct a video call.

This is a general WebRTC SDK and does not rely on Twilio infrastructure. You can incorporate it into your applications for pre-call testing or troubleshooting user issues during a call.

Preflight API

The Preflight API, available in versions 2.16.0 and above of the Twilio Video JavaScript SDK, provides functions for testing connectivity to the Twilio Cloud. The API can identify signaling and media connectivity issues and provide a report at the end of the test.

JavaScript Room Monitor

Twilio's JavaScript Room Monitor (link takes you to an external page) is a browser-based tool that displays real-time information and metrics about a Twilio Video Room. It gathers and processes information from the Room object, including information about Participants' bandwidth, packet loss, and jitter, and displays the information in a modal window in the video application.

The JavaScript Room Monitor can be added to any Twilio Video JavaScript application to help during all stages of development and/or for debugging in-progress calls.

JavaScript Logger

The JavaScript Logger allows you to capture logs generated by the Twilio Video JS SDK in real-time so that you can monitor your frontend applications and see how they behave in production.

Twilio Video Processors is a collection of tools for applying transformations and filters, such as blurred backgrounds and virtual backgrounds, to Twilio VideoTracks . See a live demo with blurred backgrounds and virtual backgrounds (link takes you to an external page) using the Video Processors tools.

The Twilio Video JavaScript SDK has autogenerated documentation (link takes you to an external page) for all classes and methods in the SDK.