WebRTC فناوری نسبتا جدیدی برای برقراری تماس های صوتی، تصویری و نوشتاری بر پایه پروتکل SIP و از طریق وب است. خوشبختانه در نسخه های جدیدی سیستم های تلفنی رایج مانند Asterisk و Freeswitch بصورت پیش فرض از این فناوری پشتیبانی می شود. در این مقاله نحوه راه اندازی WebRTC برای سیستم تلفنی Freeswitch را بررسی خواهیم نمود. Freeswitch 1.5.X بصورت پیشفرض از WebRTC پشتیبانی می نماید. 
در ویکی Freeswitch مرتبط با WebRTC از سه کلاس جاوا اسکریپت:
نام برده شده است. در این مقاله از کلاس SipJS استفاده خواهیم نمود. در انتهای این مقاله صفحه وبی با امکان قابلیت رجیستر شماره داخلی، تماس تلفنی، دریافت تماس و ارسال و دریافت مسیج خواهیم داشت.
نصب و راه اندازی WebRTC در فری سوییچ:
ابتدا ws-binding و پورت مرتبط را در پروفایل تماس ها فعال میکنیم.در نسخه های 1.5 به بالای سیستم تلفنی Freeswitch این قابلیت بصورت پیش فرض فعال می باشد. برای این کار در فایل sip_profiles/internal.xml خط زیر را بصورت فعال در خواهیم آورد:
سپس کدک VP8 را برای تماس های داخلی و عمومی به کدک های قبلی و پیشفرض اضافه میکنیم. برای مدیریت کدک ها باید متغییر های سیستم را تنظیم نماییم. برای این کار فایل vars.xml را باز نموده و بصورت زیر، کدک VP8 را به انتهای لیست کدک ها اضافه می نماییم:
و در انتها برای اعمال تنظیمات جدید سرویس Freeswitch را ری استارت میکنیم:
سیستم تلفنی Freeswitch آماده برقراری ارتباط از طریق WebRTC می باشد. از این مرحله به بعد نرم افزار مبتنی بر وب خود را برای برقراری ارتباط تحت پروتکل RTC آماده می نماییم.
نرم افزار تحت وب:
این مقاله بر پایه کلاس تحت وب SipJS نگاشته شده است. برای استفاده از این نرم افزار ابتدا فایل جاوا اسکریپت آن را از این آدرس دریافت نمایید. سپس با ادیتور مناسبی یک فایل HTML جدید با نام webrtc.html ایجاد خواهیم نمود:
sipjs.js فایل نرم افزار sipjs دریافتی ما خواهد بود.
در اولین قدم سیستم دریافت و ارسال مسیج (چت) بر اساس پروتکل SIP را پیاده سازی خواهیم نمود. در پایان تمامی کلاینت های تلفنی ما در شبکه اعم از soft phone هایی مانند Jitsi و سایر نرم افزارهای پشتیبانی کننده از سیستم چت بر اساس SIP ، SIP phone های مختلف مانندYealink, Atcom و مرورگرهای وب مانند گوگل کروم و فایرفاکس، قابلیت تبادل اطلاعات و ارسال و دریافت مسیج با یکدیگر را خواهند داشت.
در این مقاله کد بالا را به مرور تکمیل خواهیم نمود. برای تبادل اطلاعات سه فیلد مبدا،مقصد و متن ارسالی را نیازمندیم.
همچنین یک textarea که تاریخچه چت را برای نمایش در خود نگهداری نماید:
فیلدهای مربوطه:*
message_history
message_register_ex
message_to
message_content
send_message
کدهای جاوا اسکریپت زیر را در داخل تگ اسکریپت به صفحه اضافه می نماییم. در خطوط اولیه، مشخصات مورد نظر را با توجه به سرور خود تغییر دهید:
در صورت انجام صحیح مراحل بالا، خروجی نرم افزار به شکل اسکرین شات پایین قابل دسترسی خواهد بود:
نویسنده: امیرحسین تیموری
در ویکی Freeswitch مرتبط با WebRTC از سه کلاس جاوا اسکریپت:
کد PHP:
SIP.js
jssip
sipml5
نصب و راه اندازی WebRTC در فری سوییچ:
ابتدا ws-binding و پورت مرتبط را در پروفایل تماس ها فعال میکنیم.در نسخه های 1.5 به بالای سیستم تلفنی Freeswitch این قابلیت بصورت پیش فرض فعال می باشد. برای این کار در فایل sip_profiles/internal.xml خط زیر را بصورت فعال در خواهیم آورد:
کد PHP:
<!--internal.xml-->
<param name="ws-binding" value=":5066"/>
کد PHP:
<!--vars.xml-->
<X-PRE-PROCESS cmd="set" data="global_codec_prefs=PCMU,PCMA,VP8">
<X-PRE-PROCESS cmd="set" data="outbound_codec_prefs=PCMU,PCMA,VP8">
کد PHP:
Service Freeswitch restart
نرم افزار تحت وب:
این مقاله بر پایه کلاس تحت وب SipJS نگاشته شده است. برای استفاده از این نرم افزار ابتدا فایل جاوا اسکریپت آن را از این آدرس دریافت نمایید. سپس با ادیتور مناسبی یک فایل HTML جدید با نام webrtc.html ایجاد خواهیم نمود:
کد PHP:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
< body align=center>
Freeswitch WebRTC Sample - blog.teymoori.net
<script src="sipjs.js"></script>
</body>
</html>
در اولین قدم سیستم دریافت و ارسال مسیج (چت) بر اساس پروتکل SIP را پیاده سازی خواهیم نمود. در پایان تمامی کلاینت های تلفنی ما در شبکه اعم از soft phone هایی مانند Jitsi و سایر نرم افزارهای پشتیبانی کننده از سیستم چت بر اساس SIP ، SIP phone های مختلف مانندYealink, Atcom و مرورگرهای وب مانند گوگل کروم و فایرفاکس، قابلیت تبادل اطلاعات و ارسال و دریافت مسیج با یکدیگر را خواهند داشت.
در این مقاله کد بالا را به مرور تکمیل خواهیم نمود. برای تبادل اطلاعات سه فیلد مبدا،مقصد و متن ارسالی را نیازمندیم.
همچنین یک textarea که تاریخچه چت را برای نمایش در خود نگهداری نماید:
کد PHP:
<table width=50% border=1 >
<tr>
<td> History : </td>
<td colspan=4> <textarea id="message_history" cols=40 rows=10 readonly ></textarea> </td>
</tr>
<tr>
<td> message_register_ex<input type="text" id="message_register_ex" value="11" > </td>
<td> message_content<input type="text" id="message_content" > </td>
<td> message_to<input type="text" id="message_to" value="48" > </td>
<td> <button id="send_message">send_message</button> </td>
</tr>
</table>
message_history
message_register_ex
message_to
message_content
send_message
کدهای جاوا اسکریپت زیر را در داخل تگ اسکریپت به صفحه اضافه می نماییم. در خطوط اولیه، مشخصات مورد نظر را با توجه به سرور خود تغییر دهید:
کد PHP:
$( "#send_message" ).click(function() {
var server_ip = '172.16.250.56';
var session;
var message_register_ex = $("#message_register_ex").val() ;
var message_content = $("#message_content").val() ;
var message_to = $("#message_to").val() ;
var config = {
uri: message_register_ex + '@' + server_ip ,
ws_servers: 'ws://' + server_ip + ':5066',
authorizationUser: message_register_ex ,
password: '123'
};
var userAgent = new SIP.UA( config );
//SEND
var options = {
media: {
constraints: {
audio: true,
video: true
},
render: {
remote: {
video: document.getElementById('remoteVideo')
},
local: {
video: document.getElementById('localVideo')
}
}
}
};
userAgent.message( message_to + '@' + server_ip , message_content );
var message_history = $("#message_history") ;
$("#message_history").val( $("#message_history").val() + "\n" + " me: " + message_content ) ;
if(message_history.length)
message_history.scrollTop(message_history[0].scrollHeight - message_history.height());
//RECEIVE
userAgent.start();
userAgent.on('message', onMessage);
function onMessage(message) {
// alert(message.body);
var message_history = $("#message_history") ;
$("#message_history").val( $("#message_history").val() + "\n" + " "+$("#message_to").val()+": " + message.body ) ;
if(message_history.length)
message_history.scrollTop(message_history[0].scrollHeight - message_history.height());
}
}) ;
نویسنده: امیرحسین تیموری