फोन किया था! एक घंटे में अपने वेब-डायलर को कैसे इकट्ठा करें

दोस्तों, आज मैं आपके साथ कॉल के बारे में बात करना चाहता हूं। कुछ के लिए, यह पूरी तरह से नया विषय है। दूसरों के लिए, यह "लेकिन मेरे स्काइप को मेरे पास भेजना चाहिए?" तीसरे के लिए, अचानक जीवन की आवश्यकता। अंतिम विकल्प हमारा विकल्प है।

इस लेख में मैं आपको एक छोटा लेकिन बहुत व्यवहार्य कार्यान्वयन उदाहरण दिखाऊंगा जो आपको सचमुच अपने खुद के वेब डायलर बनाने की अनुमति देगा और ब्राउज़र से सीधे एक दोस्त को कॉल करेगा जो कि कई दसियों जावास्क्रिप्ट लाइनों के घुटने पर शाब्दिक रूप से दिखाई देगा।

प्रौद्योगिकियों और प्रोटोकॉल के बारे में

यह 2019 है, और हमारी खुशी के लिए, वेब के लिए आर eal- टी ime C ommunication (RTC) को लागू करने के लिए पहले से तैयार टूल है, अर्थात WebRTC । कुछ साल पहले वह सक्रिय विकास में था। एपीआई को अभी भी अंतिम रूप दिया जा रहा है, लेकिन प्रौद्योगिकी वास्तव में मानक बन गई है और सबसे लोकप्रिय ब्राउज़रों में समर्थित है। इस लेख में, हम स्वयं प्रौद्योगिकी पर ध्यान केंद्रित नहीं करेंगे, आप डेवलपर्स वेबसाइट पर अधिक पढ़ सकते हैं या हब पर लेख देख सकते हैं उदाहरण के लिए, यहाँ ।

लेकिन इससे पहले कि हम शुरू करें, मैं कुछ बिंदुओं को स्पष्ट करना चाहता हूं।

1. सबसे पहले, WebRTC प्रोटोकॉल के एक बंडल के शीर्ष पर चलता है, और यहां तक ​​कि पी 2 पी संचार के लिए आपको किसी प्रकार के सर्वर की आवश्यकता होगी जिसके माध्यम से आपके ग्राहक एक दूसरे के साथ मित्र बना सकते हैं और बना सकते हैं। हमारा उदाहरण एसआईपी प्रोटोकॉल का उपयोग करेगा, जिसे आप यहां पढ़ सकते हैं, कह सकते हैं।
2. आपको उपरोक्त सभी सामानों के लिए एक सर्वर की आवश्यकता होगी - जैसे FreeSwitch या Asterisk।

हम इन चीजों को लेख के दायरे से बाहर छोड़ देते हैं। हम मान लेंगे कि आप हमारे जैसे ही भाग्यशाली हैं, और आपने अपने निपटान में पहले से ही वीओआईपी टेलीफोनी को कॉन्फ़िगर किया है।

खैर, लेख का सबसे लंबा हिस्सा पीछे है, चलो कोड!

पेज लेआउट

सबसे पहले, हमें एक पृष्ठ चाहिए, जिसके साथ हम कॉल करेंगे, उपयोगकर्ता नाम दर्ज करने के लिए फ़ील्ड, पासवर्ड, फ़ोन नंबर और कुछ बटन। सबसे सरल संस्करण में, यह कुछ इस तरह दिखाई देगा:

<div class="container"> <div class="input-group mb-6"> <div class="input-group-prepend"> <span class="input-group-text">Login</span> </div> <input id="loginText" type="text" class="form-control"> <div class="input-group-prepend"> <span class="input-group-text">Password</span> </div> <input id="passwordText" type="password" class="form-control"> <button id="loginButton" type="button" class="btn btn-primary" onclick="login()">Login</button> <button id="logOutButton" type="button" class="btn btn-primary d-none" onclick="logout()">LogOut</button> </div> <div class="input-group mb-6 d-none" id="callPanel"> <input id="callNumberText" type="text" class="form-control" placeholder="Call number"> <button id="callNumberButton" type="button" class="btn btn-success" onclick="call()">Call</button> <button id="hangUpButton" type="button" class="btn btn-danger d-none" onclick="hangUp()">Hang Up</button> </div> <audio id="localAudio" autoPlay muted></audio> <audio id="remoteAudio" autoPlay></audio> <audio id="sounds" autoPlay></audio> </div> 

ऑडियो तत्व "भेजेंगे" और "प्राप्त" ध्वनि, और सुंदरता के लिए, ध्वनियों के माध्यम से, डायल-अप ध्वनि खेलते हैं।

यूआई तैयार है, आपको यूएक्स के साथ गलती नहीं मिल सकती है, चलो इसे काम करते हैं।

हमने JSSIP को तेज किया

हम एक पुस्तकालय का उपयोग करेंगे जिसमें आवश्यक हर चीज पहले से ही लागू है - JSSIP । आप दस्तावेज़ देख सकते हैं: सब कुछ काफी विस्तार से वर्णित है और यहां तक ​​कि एक तैयार कार्यान्वयन उदाहरण भी है। यही है, हमें व्यावहारिक रूप से कुछ भी करने की ज़रूरत नहीं है - बस सब कुछ जितना संभव हो उतना सरल करें और पता करें कि क्या है।

लॉगिन / पासवर्ड दर्ज करने के बाद (अपने टेलीफोनी सर्वर पर पंजीकृत होना चाहिए) आपको सर्वर में लॉग इन करना होगा। हम यह करते हैं:

 socket = new JsSIP.WebSocketInterface("wss://webrtcserver:port/ws"); _ua = new JsSIP.UA( { uri: "sip:" + this.loginText.val() + "@webrtcserver", password: this.passwordText.val(), display_name: this.loginText.val(), sockets: [socket] }); 

रास्ते के साथ, आप कनेक्ट करने और कनेक्टेड घटनाओं की सदस्यता ले सकते हैं और वहां कुछ उपयोगी कर सकते हैं। लेकिन चलो पंजीकरण घटना पर चलते हैं:

 his._ua.on('registered', () => { console.log("UA registered"); this.loginButton.addClass('d-none'); this.logOutButton.removeClass('d-none'); this.loginText.prop('disabled', true); this.passwordText.prop('disabled', true); $("#callPanel").removeClass('d-none'); }); 

यहां हमें केवल बटनों की स्थिति बदलने की आवश्यकता है: आवश्यक दिखाएं, अनावश्यक छिपाएं। और अगर लॉगिन में अचानक कुछ गलत हो गया, तो हम लॉग में त्रुटि करते हैं:

 this._ua.on('registrationFailed', (data) => { console.error("UA registrationFailed", data.cause); }); 

यह लॉगिन के लिए पर्याप्त है। यह बैरल अंग के साथ प्राप्त करने के लिए बनी हुई है
this._ua.start ();

यदि सर्वर सही ढंग से निर्दिष्ट किया गया है और आपका उपयोगकर्ता नाम / पासवर्ड स्वीकार किया जाता है, तो फोन में प्रवेश करने के लिए एक फ़ील्ड और कॉल बटन दिखाई देगा।

लॉगिंग के लिए, आपको इसे कॉल करना होगा। _ua.stop (), सब कुछ सरल है।

एक कॉल करें

अब - सबसे महत्वपूर्ण बात: आपको दर्ज संख्या को कॉल करने की आवश्यकता है।

 this.session = this._ua.call(number, { pcConfig: { hackStripTcp: true, //   ,       rtcpMuxPolicy: 'negotiate', //   ,   multiplexing.       . iceServers: [] }, mediaConstraints: { audio: true, //    video: false }, rtcOfferConstraints: { offerToReceiveAudio: 1, //    offerToReceiveVideo: 0 } }); 

कृपया ध्यान दें: हम स्पष्ट रूप से मल्टीप्लेक्सिंग को सक्षम करते हैं, यह सेटिंग आपके सर्वर पर भी सक्षम होनी चाहिए। तारांकन के मामले में, यह rtcp_mux = sip.conf सेटिंग्स में है।

आगे की बातचीत कॉलबैक पर आधारित है, जिसमें हमें संबंधित पेज तत्व को ऑडियो-वीडियो स्ट्रीम की दिशा सुनिश्चित करनी चाहिए और सर्वर को सही क्रम में आवश्यक संदेश भेजना चाहिए।

 //    this.session.on('progress', () => { console.log("UA session progress"); playSound("ringback.ogg", true); }); //      this.session.on('connecting', () => { console.log("UA session connecting"); playSound("ringback.ogg", true); //          ,     let peerconnection = this.session.connection; let localStream = peerconnection.getLocalStreams()[0]; // Handle local stream if (localStream) { // Clone local stream this._localClonedStream = localStream.clone(); console.log('UA set local stream'); let localAudioControl = document.getElementById("localAudio"); localAudioControl.srcObject = this._localClonedStream; } //       ,        peerconnection.addEventListener('addstream', (event) => { console.log("UA session addstream"); let remoteAudioControl = document.getElementById("remoteAudio"); remoteAudioControl.srcObject = event.stream; }); }); //   , ,    this.session.on('failed', (data) => { console.log("UA session failed"); stopSound("ringback.ogg"); playSound("rejected.mp3", false); this.callButton.removeClass('d-none'); this.hangUpButton.addClass('d-none'); }); // ,  this.session.on('ended', () => { console.log("UA session ended"); playSound("rejected.mp3", false); JsSIP.Utils.closeMediaStream(this._localClonedStream); this.callButton.removeClass('d-none'); this.hangUpButton.addClass('d-none'); }); //  ,    this.session.on('accepted', () => { console.log("UA session accepted"); stopSound("ringback.ogg"); playSound("answered.mp3", false); }); 

सामान्य तौर पर, सब कुछ बहुत तार्किक है। डायल करते समय ['प्रगति'] - डायल करने की आवाज़ें बजाएं। हमारे उदाहरण में, हम अपनी खुद की ध्वनि बजाते हैं , लेकिन जैसा कि pvsur ने ठीक टिप्पणी की है, आप इसे भी कॉल कर सकते हैं और स्वप्रतिर की प्रतिक्रिया सुन सकते हैं जैसे "बीप के बाद एक संदेश छोड़ दें", अगर वहाँ एक है।
जैसे ही मैं ['स्वीकृत'] के माध्यम से गया - ध्वनि का उत्तर दिया। जैसे ही ग्राहक फोन उठाता है, हम इसकी ध्वनि धारा प्राप्त करेंगे और इसे रिमोटएडियो ['कनेक्टिंग' और 'एडस्ट्रीम'] तत्व में डाल देंगे।
कॉल के अंत में, CloseMediaStream करें। आप आराम कर सकते हैं।

ऑपरेशन के बारे में थोड़ा सा

परीक्षण के दौरान, दो चीजों की खोज की गई थी।

1. क्रोम में, डायल करने की शुरुआत में कई सेकंड की देरी थी, जो बहुत कष्टप्रद थी। हमें लॉग से पता चला कि वह आइस सर्वर पर गया था, जिसकी बिल्कुल भी आवश्यकता नहीं थी, क्योंकि हमारे पास अपना सर्वर है। इसलिए, JSSIP के लिए कॉन्फ़िगरेशन में, हमने बस उन्हें हटा दिया, और तुरंत प्रीटियर हो गया। PCConfig.iceServers और pcConfig.hackStripTcp देखें।
2. हमारे तारांकन चिह्न में SIP के लिए एन्क्रिप्शन के साथ WSS प्रोटोकॉल है। यह HTTPS वेबसाइट का उपयोग करते समय ब्राउज़र द्वारा आवश्यक है। लेकिन तारांकन संपर्क पैरामीटर के आधार पर WS का उपयोग करता है जिसमें JSSIP लाइब्रेरी में हार्डकोडेड WS विवरणक होता है। एक ही समय में पुस्तकालय के डेवलपर्स उन मानकों को इंगित करते हैं जिनमें वास्तव में इस विषय पर कोई आवश्यकता नहीं है। और एस्टर के साथी लगातार कुछ भी ठीक नहीं करना चाहते हैं। सामान्य तौर पर, एक मृत अंत। ठीक है, इस समय हम स्रोत में इस लाइन को ढूँढते हैं ।_configuration.contact_uri = new URI (...), परिवहन बदलें: 'ws' को परिवहन: 'wss' और जीवन का आनंद लेना जारी रखें।

सामान्य तौर पर, उदाहरण तैयार है, आप ले सकते हैं और कॉल कर सकते हैं। कोई सॉफ्टफोन लगाने या अपना विकास करने की आवश्यकता नहीं है। क्लाइंट कारों के लिए इस सॉफ्टवेयर को तैनात करने के बारे में चिंता करने की कोई जरूरत नहीं है। बस ब्राउज़र खोलें और कॉल करें।

एक अन्य लाइब्रेरी आपको टोन मोड में अतिरिक्त नंबर डायल करने की अनुमति देती है। यही है, आप अच्छी तरह से कॉल कर सकते हैं, उदाहरण के लिए, बैंक के कॉल सेंटर और वॉयस मेनू पर वांछित आइटम के लिए। ऐसा करने के लिए, बस निम्नलिखित कमांड चलाएँ:

 this._call.sendDTMF('. ') 

फकपी के बारे में

ऐसे कई बिंदु थे जिन्होंने मुझे वास्तव में परेशान किया।

मैंने इस हिस्से को लेख के दायरे से बाहर छोड़ दिया, लेकिन आउटगोइंग कॉल के अलावा, हमें इनकमिंग कॉल स्वीकार करने की भी आवश्यकता थी। और कुछ समय के लिए मुझे एक इनकमिंग कॉल के साथ बैठना पड़ा, जो आई और फिर टूट गई। सब कुछ ऊपर वर्णित rtcpMuxPolicy सेटिंग द्वारा तय किया गया था और तारांकन पर मल्टीप्लेक्सिंग को सक्षम किया गया था, लेकिन हम काफी समय से बेवकूफ थे।

और अपने आप को डायल करने में अभी भी समस्याएं हैं - जब एक ही मशीन पर कॉल और कॉल किया जाता है। मुझे ठीक से याद नहीं है, लेकिन कनेक्शन सफलतापूर्वक स्थापित किया गया था, इसमें कोई त्रुटि नहीं थी और कोई आवाज़ भी नहीं थी :) समय समाप्त हो रहा था, इसलिए हमने इस विशेष प्रभाव पर रन बनाए। लेकिन ध्यान रखें कि इनकमिंग कॉल की टेस्टिंग अलग कार पर करना बेहतर है।

निष्कर्ष

अंत में, मैं यह नोट करना चाहता हूं कि हमने अपने कॉल सेंटर में JSSIP + Asterisk बंडल का परीक्षण किया, सब कुछ ठीक काम करता है, कम से कम क्रोम में, जो हमें पूरी तरह से सूट करता है। मुख्य बात यह है कि ब्राउज़र को मीडिया उपकरणों तक पहुंचने और डायलर सर्वर पर उपयोगकर्ताओं को पंजीकृत करने की अनुमति है।

आप जीथब पर तैयार उदाहरण देख सकते हैं।

उपयोगी लिंक

वज़न के बारे में
SIP के बारे में: tyts , tyts
तारांकन के बारे में
Jssip पुस्तकालय