SIPml5 on iOS 11 and Safari 11 without plugin

[ee11131]

Hi, I'm currently using sipml5 in my audio call website. It has been working great but now I have to make it work in Safari 11, both iOS and MacOS. I know that there's a solution using plugins for MacOS but in my case it's really important to keep it plugin free. Since Safari 11, there is support for WebRTC in this browser so, in theory, with some modifications it should work right?

[sandeep2244]

@ee11131 have you find solution or modification for solution , i also really want solution ??

[ee11131]

Well, no. But I think I was close when I halted the development. I was able to establish a voice call between two users but there was no audio. What I did was, include the adapter.js in the project and then tried to adjust the SIPml.js code. First I forced the if sentences that checked for Chrome to allow Safari as well. From that point I tried to solve the errors one by one.

[sandeep2244]

@ee11131 yes, i have tried i got error reagrding "getPlugin().createPeerConnection(configuration, constraints) is undefined " in adapter.js while calling only audio , How to look around this error? Thank You

[ee11131]

@sandeep2244 in SIPml5.js installPlugin() Function I changed: var a = !!navigator.userAgent.indexOf("Safari"); to: var a = false; Also, are you using this adapter? https://github.com/webrtc/adapter

[sandeep2244]

@ee11131 No i, don't use that adpter, i just use"https://github.com/sarandogou/webrtc/blob/master/samples/web/js/adapter.js" this adapter, but still it get above error?? How do i install plugin ,

I got error is follow "TypeError: getPlugin().createPeerConnection is not a function. (In 'getPlugin().createPeerConnection(configuration, constraints)', 'getPlugin().createPeerConnection' is undefined)" in adapter.js

which adapter.js file should i include and need to add any plugin for that?

[sandeep2244]

@ee11131

var installPlugin = function() { if (document.getElementById("WebrtcEverywherePluginId")) { return } console.log("installPlugin() called"); var c = !!((Object.getOwnPropertyDescriptor && Object.getOwnPropertyDescriptor(window, "ActiveXObject")) || ("ActiveXObject" in window)); var a = false; // !!navigator.userAgent.indexOf("Safari"); var b = document.createElement("object"); if (c) { b.setAttribute("classid", "CLSID:7FD49E23-C8D7-4C4F-93A1-F7EACFA1EC53"); c = true } else { b.setAttribute("type", "application/webrtc-everywhere") } b.setAttribute("id", "WebrtcEverywherePluginId"); document.body.appendChild(b); b.setAttribute("width", "0"); b.setAttribute("height", "0"); if (b.isWebRtcPlugin || (typeof navigator.plugins !== "undefined" && (!!navigator.plugins["WebRTC Everywhere"] || navigator.plugins["WebRTC Everywhere Plug-in for Safari"]))) { console.log("Plugin version: " + b.versionName + ", adapter version: 1.3.1"); if (c) { console.log("This appears to be Internet Explorer"); webrtcDetectedBrowser = "Internet Explorer" } else { if (a) { console.log("This appears to be Safari"); webrtcDetectedBrowser = "Safari" } else {} } } else { console.log("Browser does not appear to be WebRTC-capable") } };

And it directly print console.log("Browser does not appear to be WebRTC-capable"); It doesnot come to console.log("Plugin version: " + b.versionName + ", adapter version: 1.3.1");

[ee11131]

@sandeep2244 to install the plugin I think you just need to include it in your project. As far as code goes, I tried to make sure that a Safari scenario goes through the same path as a Chrome scenario. For example, I replaced the lines: if (navigator.webkitGetUserMedia) { console.log("This appears to be Chrome"); webrtcDetectedBrowser = "chrome"; with: if (navigator.webkitGetUserMedia || navigator.getUserMedia) { console.log("This appears to be Chrome or Safari"); webrtcDetectedBrowser = "chrome";

[sandeep2244]

@ee11131 yes, if we change sipml.js file then there is no need to install Plugin right?? By the way from safari12 apple remove third-party plugin, so any way no other plugin will work

So i need to customize simpl5-api.js file.. there is any need to add adapter.js file and which one?

[ee11131]

I added the adapter.js file from that link I commented before, not sure if it's needed. And no, with Safari > 11 there should be no need for any plugin. As I said, my customized sipml5-api.js was not working as it should. I had to pause this development midway through. The main things I focused on when customizing this file where:

Make sure that a Safari scenario goes through the same conditions and functions as a Chrome scenario by doing something like what I commented before.

Update some deprecated functions that still work on Chrome but do not in Safari. For example, replace every addStream() with a addTrack() within a foreach loop.

[sandeep2244]

@ee11131
Hey , I just Configure SIPml-api.js file way to chrome , Overcome with every error , Connected to server, And everything fine But.... Now when i call only audio,

/***************************** WEB CONSOLE  SAFARI*************************///
[Info] State machine: tsip_dialog_register_InProgress_2_Connected_X_2xx (SIPml-api.js, line 89)
[Info] ==session event = connected (SIPml-api.js, line 89)
[Info] State machine: c0000_Started_2_Outgoing_X_oINVITE (SIPml-api.js, line 89)
[Info] ICE servers:[{"urls":"stun:stun.l.google.com:19302"},{"urls":"stun:stun.counterpath.net:3478"},{"urls":"stun:numb.viagenie.ca:3478"}] (SIPml-api.js, line 89)
[Info] ==stack event = m_permission_requested (SIPml-api.js, line 89)
[Info] ==session event = connecting (SIPml-api.js, line 89)
.
.
////////////////////////////////////////////////////////////////////////////

While after that it should come

==session event = connecting
 onGetUserMediaSuccess

But onGetUserMediaSuccess doesnt print ....

Because while I am calling Blur black screen appear on browser

There is only one thing , How that Black blur screen apear while i am allow microphone on safari

[ee11131]

I'm sorry @sandeep2244 but my goal was to establish audio calls between Safari and other browsers. I have not tested for video.

[sandeep2244]

@ee11131 yes, i have exactly same goal , i also want audio calling no video, but dont know its not starting even configure same as chrome ,,, it stop to below in log (Even Dont get Any errors)

**CONSOLE.LOG**** ==stack event = m_permission_requested (SIPml-api.js, line 89) [Info] ==session event = connecting (SIPml-api.js, line 89)

/**/////

It doesn't come to
/ onGetUserMediaSuccess <- this statement .... //

I have been checking SIPml-api.js but doesnt get any clue, where the problem is in safari Can you share me your SIPml-api.js file which you configure , at least i got audio call from there , (You can share it private if possible to you ) Thank you ,

[sandeep2244]

@ee11131 Thank you, Is it work in SAFARI browser?

[ee11131]

I tested Chrome->Safari and Safari->Chrome and it is working

[sandeep2244]

it ask about plugin, in safari "Webrtc-everywhere" Is it works on Safari12 Because i check sipml-api file it has plugin code,and i have comment out it, because from now apple totally remove plugin support from SAFARI 12

[ee11131]

I'm aware of that, I tested it in Safari 12 and it works.

[sandeep2244]

for me it give me typeerror TypeError: getPlugin().createSessionDescription is not a function. (In 'getPlugin().createSessionDescription(a)', 'getPlugin().createSessionDescription' is undefined)

As same as previous Have you add plugin file or any adapter.js...

[sandeep2244]

Are you calling to normal phone(PSTN ) calling ?? Because i am using PSTN calling

[ee11131]

No, I'm just testing SIP calls in the same server. Yes, I included adapter.js in the project. https://github.com/webrtc/adapter

[sandeep2244]

@ee11131 Ok, So we have different goal For PSTN calling it traverse different , its ok , I think i will now move to another JS library
i really appreciating your kind help, Thank you so much

[tianwen20]

Thank you,I have the same error,it works

[tianwen20]

now,i got a problem,it worked in safari,but in 360 with chrome core,my mic cann't work

[ee11131]

Like I said before, all I did was try to fix the problem, one error at a time, over one unminified version of SIPml5. I think someone could do a far better job. Take the updated source code of SIPml5 and focus on this:

Make sure that a Safari scenario goes through the same conditions and functions as a Chrome scenario by doing something like what I commented before.

Update some deprecated functions that still work on Chrome but do not in Safari. For example, replace every addStream() with a addTrack() within a foreach loop.

[tianwen20]

When i updated the latest version,it worked on safari and chrome .etc.You can try it,anyway,thank you very much.This is the link for the latest version,https://github.com/DoubangoTelecom/sipml5/blob/master/release/SIPml-api.js

[linuxacademyir]

can any one help me on this? mine works on both chrome and firefox also in android phone, and no audio issue. it doesnt work on safari MAC OS and both Safari and chrome on iphone, its registered on my asterisk server. but when trying to call another extension , nothing happens it even doesnt popup for microphone. here is the safar log: TypeError: getPlugin().createSessionDescription is not a function. (In 'getPlugin().createSessionDescription(a)', 'getPlugin().createSessionDescription' is undefined) any help would be appreciated i am using asterisk 13.30

[tp5188101]

@sandeep2244 @ee11131 I am also facing the same issue. Can you please share your SIPml js file by mail to:tp5188101+webrtc@gmail.com?