Geekly Articles each Day
📜 ⬆️ ⬇️

Video calls to Zoom video from web pages


In the previous habrastia, I showed that if the service is able to integrate via SIP and RTP, then many interesting things can be done with it. For example, to invite participants in video conferences Zoom from mobile phones. But our Voximplant cloud is not only telecom and telephones. We also love and know how to SDK to make and receive calls from unexpected places: from web pages, from applications (calls via the Internet are much cheaper than through a voice channel) and even from VR / AR Unity solutions. In this article, I will show you how to create “calling” pages with the help of several front-end JavaScript lines, with the help of which participants will be able to make a video call to a conference. And yes, thanks to Apple's latest update, you can now call from web pages to iPhone!

Zoom setting


All the same, that in the previous habrastiat .

Voximplant setup


In the previous article, I talked in detail about creating a new application and organizing conferences, so that the voice of all the participants from the phones was mixed on the Voximplant cloud side and then communicated with Zoom via one SIP channel. In this article I will show a friend a scheme of work, when each user calling from a web page via a video call will connect directly to the Zoom conference. The corresponding Voximplant script (one, because two were necessary only for the organization of the conference by Voximplant) looks like this:

// Zoom
var regions = {
"US_West": "162.255.37.11",
"US_East": "162.255.36.11",
"China": "221.122.88.195",
"India": "115.114.131.7",
"EMEA": "213.19.144.110"
};
// : , WebSDK
VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) {
// scheme SDP, "packetization=0"
var scheme = JSON.parse(e.scheme);
scheme[''].video[0].codecs = scheme[''].video[0].codecs.filter(function (item) {
return (item !== 97);
});
// WebSDK
var region = e.headers["X-Region"],
ip = regions["EMEA"];
if (typeof region != "undefined") {
if (typeof regions[region] != "undefined") ip = regions[region];
}
// - Zoom
var conf = e.headers["X-Conference"];
if (typeof conf == "undefined") conf = "voximplant";
// ,
if (typeof e.headers["X-DisplayName"] != "undefined") displayName = e.headers["X-DisplayName"];
else displayName = "Untitled";
// ( Voximplant) Zoom
var call = VoxEngine.callSIP("sip:" + conf + "@" + ip, {
callerid: "voximplant",
displayName: displayName,
scheme: JSON.stringify(scheme),
video: true
});
//
VoxEngine.easyProcess(e.call, call);
});
view raw bridge.js hosted with ❤ by GitHub

This script receives an incoming video call from WebSDK, patches SDP (because all services “understand” SDP a little differently), makes an outgoing call to Zoom and connects the video and voice streams of incoming and outgoing calls.
')

Frontend part


Several lines of JavaScript allows you to create such a page on which anyone can enter the Zoom conference ID and, if you connect via SIP for the conference, the video call will be made directly from the web page!



The division of the call in the cloud into two parts, "incoming" and "outgoing", has been going since the days of Asterisk, which we do not use. For the developer, it is convenient to operate with two independent parts (they are called “legs” of the bell, “call legs”). For example, for voice calls, if the connection is lost, you can synthesize something like “wait, reconnect”, call again from the same JavaScript session and reconnect the calls. Or on command from the operator to switch the incoming call somewhere else. In our example, you can “insert” between the incoming and outgoing leg of the call video recording, if you replace the easyProcess call with:

VoxEngine.easyProcess(e.call, call, function(call1, call2) {
call1.record({ video: true });
call2.record({ video: true });
});
view raw vox-zoom-interconnetc-record-example.js hosted with ❤ by GitHub

And using the transcribe parameter you can turn your voice into text! If you have a paid Zoom with a SIP connector, then you can use the test page I made for this article: demos02.voximplant.com/zoom

Questions in the comments are traditionally welcome. We know a lot about telephony and are ready to talk.

Source: https://habr.com/ru/post/340746/

More articles:


All Articles