<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<base href="https://wiki.asterisk.org/wiki" />
<title>Message Title</title>
<style type="text/css">@media only screen and (max-device-width: 480px) {.mobile-only {
width: auto !important;
height: auto !important;
overflow: visible !important;
line-height: normal !important;
font-size: inherit !important;
mso-hide: all;
}
.desktop-only {
display: none !important;
}
/* iPhone 3GS fix for unwanted 20px right margin */
body { min-width: 100% !important; padding: 0; margin: 0; }
#center-content-table { max-width: none; !important; }
#header-pattern-container { padding: 10px 10px 10px 10px !important; line-height: 20px !important; }
#header-avatar-image-container { padding-right: 8px !important; }
#email-content-container { padding: 0 !important; }
.mobile-expand { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; padding-left: 26px !important;}
.mobile-resize-text { font-size: 16px !important; line-height: 22px !important; }
#page-title-pattern-header { font-size: 20px !important; line-height: 28px !important; }
#page-title-pattern-icon-image-container-cell { padding-top: 7px !important; }
#inline-user-pattern { display: block !important; }
#inline-user-pattern-avatar { padding-top: 3px !important; }
.contextual-area-pattern { border-bottom: 1px solid #ccc !important; padding: 15px 10px 0 10px !important;}
.users-involved-pattern-column-table { width: 100% !important; }
.users-involved-pattern-avatar-table-cell { padding: 3px 5px 5px 0 !important; }
.users-involved-pattern-column-container { padding-right: 0 !important; }
.contextual-excerpt-pattern, #users-involved-pattern { border: 0 !important; }
/** Aui Typography upsized for mobile **/
#content-excerpt-pattern-container, #contextual-excerpt-pattern-text-container { font-size: 16px !important; line-height: 22px !important; }
#content-excerpt-pattern-container h1, #contextual-excerpt-pattern-text-container h1 { font-size: 24px !important; line-height: 28px !important; }
#content-excerpt-pattern-container h2, #contextual-excerpt-pattern-text-container h2 { font-size: 20px !important; line-height: 28px !important; }
#content-excerpt-pattern-container h3, #contextual-excerpt-pattern-text-container h3 { font-size: 18px !important; line-height: 24px !important; }
#content-excerpt-pattern-container h4, #contextual-excerpt-pattern-text-container h4 { font-size: 16px !important; line-height: 22px !important; }
#content-excerpt-pattern-container h5, #contextual-excerpt-pattern-text-container h5 { font-size: 14px !important; line-height: 20px !important; }
#content-excerpt-pattern-container h6, #contextual-excerpt-pattern-text-container h6 { font-size: 14px !important; line-height: 20px !important; }
.user-mention { line-height: 18px !important; }
/** Aui Typography end **/
/* Show appropriate footer logo on mobile, display links vertically */
#footer-pattern { padding: 15px 10px !important; }
#footer-pattern-logo-desktop-container { padding: 0 !important; }
#footer-pattern-logo-desktop { width: 0 !important; height: 0 !important; }
#footer-pattern-logo-mobile {
padding-top: 10px !important;
width: 30px !important;
height: 27px !important;
display: inline !important;
}
#footer-pattern-text {
display: block !important;
}
#footer-pattern-links-container { line-height: 0 !important;}
.footer-pattern-links.mobile-resize-text,
.footer-pattern-links.mobile-resize-text,
#footer-pattern-text.mobile-resize-text,
#footer-pattern-links-container.no-footer-links {
font-size: 14px !important;
line-height: 20px !important;
}
.footer-link { display: block !important; }
#footer-pattern-links-container table { display: inline-block !important; float: none !important; }
#footer-pattern-links-container, #footer-pattern-text { text-align: center !important; }
#footer-pattern-links { padding-bottom: 5px !important; }
/** Team Calendar overrides, these should be removed when notifications are updated in Team Calendars. For now CSS
overrides are being used because the structure of the content can't change without rereleasing the plugin */
.mail-calendar-container .day-header + table tr td:first-child {
vertical-align: top !important;
padding-top: 5px !important;
}}
@media (min-width: 900px) {#center-content-table { width: 900px; }}
@media all {#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/
body{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
#background-table {margin:0; padding:0; width:100% !important; }
/* Needed to override highlighting on date and time links in iOS */
.grey a {color: #707070; text-decoration: none; }/* These styles are appended to the head element of a notification in order to prevent Apple Mail and similar
clients from underlining the due dates with a blue hyperlink */
/* a lozenge outside an inline task should always be #333, lozenges inside an inline task should be
colored according to their upcoming due dates, a completed task date lozenge or deleted task date
lozenge should always be #707070 */
.date-time-lozenge a {color: #333333; text-decoration: none; }
.inline-task-text-container .date-time-lozenge.date-upcoming a {color: #DF6F00; text-decoration: none; }
.inline-task-text-container .date-time-lozenge.date-past a {color: #D04437; text-decoration: none; }
.inline-task-text-container.content-deleted-color .date-time-lozenge a,
.inline-task-text-container.checked .date-time-lozenge a {
color: #707070; text-decoration: none;
}}
</style>
</head>
<body>
<table id="background-table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; background-color: #f5f5f5">
<tbody>
<tr>
<td id="header-pattern-container" style="padding: 0px; border-collapse: collapse; padding: 10px 20px">
<table id="header-pattern" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr>
<td id="header-avatar-image-container" valign="top" style="padding: 0px; border-collapse: collapse; vertical-align: top; width: 32px; padding-right: 9px"><a href="https://wiki.asterisk.org/wiki/display/~seanbright?src=email" style="color: #3b73af; text-decoration: none"><img id="header-avatar-image" class="image_fix" src="cid:avatar_597ac98724191519f1212ed9dc97d7c9" height="32" width="32" border="0" style="border-radius: 3px; vertical-align: top" /></a></td>
<td id="header-text-container" valign="middle" style="padding: 0px; border-collapse: collapse; vertical-align: middle; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 1px">Sean Bright <strong>edited</strong> a page</td>
</tr>
</tbody>
</table> </td>
</tr>
<!-- End Header pattern -->
<tr>
<td id="email-content-container" style="padding: 0px; border-collapse: collapse; padding: 0 20px">
<table id="email-content-table" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; border-spacing: 0; border-collapse: separate">
<tbody>
<tr>
<td class="email-content-rounded-top mobile-expand" style="padding: 0px; border-collapse: collapse; color: #fff; padding: 0 15px 0 16px; height: 15px; background-color: #fff; border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 0; border-top-right-radius: 5px; border-top-left-radius: 5px"> </td>
</tr>
<tr>
<td class="email-content-main mobile-expand" style="padding: 0px; border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0 15px 15px 16px; background-color: #fff">
<table id="page-title-pattern" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr>
<td id="page-title-pattern-icon-image-container" valign="top" style="padding: 0px; border-collapse: collapse; width: 16px; vertical-align: top">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr>
<td id="page-title-pattern-icon-image-container-cell" style="padding: 0px; border-collapse: collapse; width: 16px; padding: 9px 8px 0px 0px; mso-text-raise: 5px; mso-line-height-rule: exactly"><a href="https://wiki.asterisk.org/wiki/display/AST/Configuring+Asterisk+for+WebRTC+Clients?src=email" title="page icon" style="vertical-align: top;; color: #3b73af; text-decoration: none"><img style="vertical-align: top; display: block;" src="cid:page-icon" alt="page icon" title="page icon" height="16" width="16" border="0" /></a></td>
</tr>
</tbody>
</table> </td>
<td style="vertical-align: top;; padding: 0px; border-collapse: collapse; padding-right: 5px; font-size: 20px; line-height: 30px; mso-line-height-rule: exactly" id="page-title-pattern-header-container"><span id="page-title-pattern-header" style="font-family: Arial, sans-serif; padding: 0; font-size: 20px; line-height: 30px; mso-text-raise: 2px; mso-line-height-rule: exactly; vertical-align: middle"><a href="https://wiki.asterisk.org/wiki/display/AST/Configuring+Asterisk+for+WebRTC+Clients?src=email" title="Configuring Asterisk for WebRTC Clients" style="color: #3b73af; text-decoration: none">Configuring Asterisk for WebRTC Clients</a></span></td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td class="email-content-main mobile-expand" style="padding: 0px; border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0 15px 15px 16px; background-color: #fff">
<table class="content-excerpt-pattern" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 1px">
<tbody>
<tr>
<td class="content-excerpt-pattern-container mobile-resize-text " style="padding: 0px; border-collapse: collapse; padding: 0 0 0 24px">
<div class="contentLayout2 diff-block-target">
<table width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr class="columnLayout two-right-sidebar" data-layout="two-right-sidebar">
<td valign="top" class="cell normal" data-type="normal" style="padding: 0px; border-collapse: collapse">
<div class="innerCell">
<h1 id="ConfiguringAsteriskforWebRTCClients-Overview" style="margin: 10px 0 0 0; margin-top: 0; font-size: 24px; font-weight: normal; line-height: 30px; margin: 40px 0 0 0; margin-top: 0">Overview</h1>
<p style="margin: 10px 0 0 0">This tutorial will walk you through configuring Asterisk to service WebRTC clients.</p>
<p style="margin: 10px 0 0 0">You will...</p>
<ul style="margin: 10px 0 0 0">
<li>Modify or create an Asterisk HTTPS TLS server.</li>
<li>Create a PJSIP WebSocket transport.</li>
<li>Create PJSIP Endpoint, AOR and Authentication objects that represent a WebRTC client.</li>
</ul>
</div> </td>
<td valign="top" width="30%" class="cell aside" data-type="aside" style="padding: 0px; border-collapse: collapse">
<div class="innerCell">
<p style="margin: 10px 0 0 0; margin-top: 0"></p>
<table class="diff-macro bodyless" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;margin: 5px 0; padding: 0; width: auto;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<thead>
<tr>
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5639/a252d7f5e75d7a8bf7047b4b2c92f71a56a8f048.48/_/images/icons/macrobrowser/dropdown/toc.png" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Table of Contents</th>
</tr>
</thead>
<tbody>
<tr>
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse">
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">printable</td>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">false</td>
</tr>
<tr>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">absoluteUrl</td>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">true</td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<p style="margin: 10px 0 0 0"></p>
</div> </td>
</tr>
</tbody>
</table>
<table width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr class="columnLayout single" data-layout="single">
<td valign="top" class="cell normal" data-type="normal" style="padding: 0px; border-collapse: collapse">
<div class="innerCell">
<h1 id="ConfiguringAsteriskforWebRTCClients-Prerequisites" style="margin: 10px 0 0 0; margin-top: 0; font-size: 24px; font-weight: normal; line-height: 30px; margin: 40px 0 0 0; margin-top: 0">Prerequisites</h1>
<h2 id="ConfiguringAsteriskforWebRTCClients-AsteriskInstallation" style="margin: 10px 0 0 0; font-size: 20px; font-weight: normal; line-height: 30px; margin: 40px 0 0 0; margin-top: 10px"> <span style="color: rgb(133,120,102);font-family: MuseoSans500 , sans-serif;font-size: 20.0px;"><span class="diff-html-changed" id="changed-diff-0" style="background-color: #d6f0ff;">Asterisk Installation</span></span> </h2>
<span class="diff-html-removed" id="removed-diff-0" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">:</span>
<h2 id="ConfiguringAsteriskforWebRTCClients-AsteriskInstallation" style="margin: 10px 0 0 0; font-size: 20px; font-weight: normal; line-height: 30px; margin: 40px 0 0 0"></h2>
<p style="margin: 10px 0 0 0">You should have a working <code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-2" style="background-color: #d6f0ff;">chan_pjsip</span></code><span class="diff-html-changed" style="background-color: #d6f0ff;"> </span>based Asterisk installation to start with and for purposes of this tutorial, it must be version 15.5 or <span class="diff-html-removed" id="removed-diff-1" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">greater</span><span class="diff-html-added" id="added-diff-0" style="font-size: 100%; background-color: #ddfade;">higher</span>. <span class="diff-html-removed" id="removed-diff-2" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>Either install Asterisk from your distribution's packages or<span class="diff-html-removed" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span><span class="diff-html-removed" id="removed-diff-3" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">preferably </span><span class="diff-html-added" id="added-diff-1" style="font-size: 100%; background-color: #ddfade;">, preferably, </span><a class="confluence-link unresolved" href="#" style="color: #3b73af; text-decoration: none">install Asterisk from source</a>. <span class="diff-html-removed" id="removed-diff-4" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>Either way, there are a few modules over and above the standard ones that must be present for <span class="diff-html-removed" id="removed-diff-5" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">websockets </span><span class="diff-html-added" id="added-diff-2" style="font-size: 100%; background-color: #ddfade;">WebSockets </span>and WebRTC to work:</p>
<ul style="margin: 10px 0 0 0">
<li> <code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-3" style="background-color: #d6f0ff;">res_crypto</span></code> </li>
<li> <code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-4" style="background-color: #d6f0ff;">res_http_websocket</span></code> </li>
<li> <code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-5" style="background-color: #d6f0ff;">res_pjsip_transport_websocket</span></code> </li>
<li> <code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-6" style="background-color: #d6f0ff;">codec_opus</span></code><span class="diff-html-changed" style="background-color: #d6f0ff;"> </span>(optional but highly recommended for high quality audio)<br /> <br /> </li>
</ul>
<div>
We recommend installing Asterisk from source because it's easy to make sure
<span class="diff-html-removed" id="removed-diff-6" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">those </span>
<span class="diff-html-added" id="added-diff-3" style="font-size: 100%; background-color: #ddfade;">these </span>modules are built and installed.
</div>
<h2 id="ConfiguringAsteriskforWebRTCClients-Certificates" style="margin: 10px 0 0 0; font-size: 20px; font-weight: normal; line-height: 30px; margin: 40px 0 0 0"> <span class="diff-html-changed" id="changed-diff-7" style="background-color: #d6f0ff;">Certificates</span> </h2>
<span class="diff-html-removed" id="removed-diff-7" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">:</span>
<h2 id="ConfiguringAsteriskforWebRTCClients-Certificates" style="margin: 10px 0 0 0; font-size: 20px; font-weight: normal; line-height: 30px; margin: 40px 0 0 0"></h2>
<p style="margin: 10px 0 0 0">Technically, a client can use WebRTC over an <span class="diff-html-removed" id="removed-diff-8" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">unsecured websocket </span><span class="diff-html-added" id="added-diff-4" style="font-size: 100%; background-color: #ddfade;">insecure WebSocket </span>to connect to Asterisk. <span class="diff-html-removed" id="removed-diff-9" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>In practice though, most browsers will require a TLS based <span class="diff-html-removed" id="removed-diff-10" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">websocket </span><span class="diff-html-added" id="added-diff-5" style="font-size: 100%; background-color: #ddfade;">WebSocket </span>to be used. <span class="diff-html-removed" id="removed-diff-11" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>You can use self-signed certificates to set up the Asterisk TLS server but getting browsers to accept them is tricky so if you're able, we highly recommend getting trusted certificates from an organization such as <a href="https://letsencrypt.org" class="external-link" rel="nofollow" style="color: #3b73af; text-decoration: none">LetsEncrypt</a>.</p>
<p style="margin: 10px 0 0 0">If you already have certificate files (certificate, key, CA certificate), whether self-signed or trusted, <span class="diff-html-removed" id="removed-diff-12" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>you can skip the rest of this section. <span class="diff-html-removed" id="removed-diff-13" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>If you need to generate a self-signed certificate, read on.</p>
<h3 id="ConfiguringAsteriskforWebRTCClients-CreateCertificates" style="margin: 10px 0 0 0; font-size: 16px; line-height: 25px; margin: 30px 0 0 0"> <span style="color: rgb(133,120,102);">Create Certificates</span> </h3>
<p style="margin: 10px 0 0 0">Asterisk provides a utility script, <code style="font-family: monospace"><strong><span class="diff-html-changed" id="changed-diff-9" style="background-color: #d6f0ff;">ast_tls_cert</span></strong></code> in <span class="diff-html-removed" id="removed-diff-14" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">its </span><span class="diff-html-added" id="added-diff-6" style="font-size: 100%; background-color: #ddfade;">the </span><code style="font-family: monospace"><strong><span class="diff-html-changed" id="changed-diff-10" style="background-color: #d6f0ff;">contrib/scripts</span></strong></code> source directory. <span class="diff-html-removed" id="removed-diff-15" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> We </span><span class="diff-html-added" id="added-diff-7" style="font-size: 100%; background-color: #ddfade;">We </span>will use it to make a self-signed certificate authority and a server certificate for Asterisk, signed by our new authority.</p>
<p style="margin: 10px 0 0 0">From the Asterisk source directory run the following commands. <span class="diff-html-removed" id="removed-diff-16" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>You'll be prompted to set a a pass phrase for the CA key, then you'll be asked for that same pass phrase a few times. <span class="diff-html-removed" id="removed-diff-17" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>Use anything you can easily remember. <span class="diff-html-removed" id="removed-diff-18" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>The pass phrase is indicated below with "<code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-11" style="background-color: #d6f0ff;">********</span></code>". Replace "<code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-12" style="background-color: #d6f0ff;">pbx.example.com</span></code>" with your PBX's hostname or <span class="diff-html-removed" id="removed-diff-19" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">ip </span><span class="diff-html-added" id="added-diff-8" style="font-size: 100%; background-color: #ddfade;">IP </span>address. <span class="diff-html-removed" id="removed-diff-20" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>Replace "<code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-13" style="background-color: #d6f0ff;">My Organization</span></code>" as appropriate.</p>
<table class="diff-macro" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<thead>
<tr>
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5639/a252d7f5e75d7a8bf7047b4b2c92f71a56a8f048.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th>
</tr>
</thead>
<tbody>
<tr>
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">$ sudo mkdir /etc/asterisk/keys
$ sudo contrib/scripts/ast_tls_cert -C pbx.example.com -O "My Organization" -d /etc/asterisk/keys
No config file specified, creating '/etc/asterisk/keys/tmp.cfg'
You can use this config file to create additional certs without
re-entering the information for the fields in the certificate
Creating CA key /etc/asterisk/keys/keys/ca.key
Generating RSA private key, 4096 bit long modulus
............................................................................++
.....................++
e is 65537 (0x010001)
Enter pass phrase for /etc/asterisk/keys/ca.key:********
Verifying - Enter pass phrase for /etc/asterisk/keys/ca.key:********
Creating CA certificate /etc/asterisk/keys/ca.crt
Enter pass phrase for /etc/asterisk/keys/ca.key:********
Creating certificate /etc/asterisk/keys/asterisk.key
Generating RSA private key, 1024 bit long modulus
........++++++
............++++++
e is 65537 (0x010001)
Creating signing request /etc/asterisk/keys/asterisk.csr
Creating certificate /etc/asterisk/keys/asterisk.crt
Signature ok
subject=CN = pbx.example.com, O = My Organization
Getting CA Private Key
Enter pass phrase for /etc/asterisk/keys/ca.key:********
Combining key and crt into /etc/asterisk/keys/asterisk.pem
$ ls -l /etc/asterisk/keys
total 32
-rw------- 1 root root 1204 Mar 4 2019 asterisk.crt
-rw------- 1 root root 574 Mar 4 2019 asterisk.csr
-rw------- 1 root root 887 Mar 4 2019 asterisk.key
-rw------- 1 root root 2091 Mar 4 2019 asterisk.pem
-rw------- 1 root root 149 Mar 4 2019 ca.cfg
-rw------- 1 root root 1736 Mar 4 2019 ca.crt
-rw------- 1 root root 3311 Mar 4 2019 ca.key
-rw------- 1 root root 123 Mar 4 2019 tmp.cfg
</pre> </td>
</tr>
</tbody>
</table>
<p style="margin: 10px 0 0 0"> <span class="diff-html-removed" id="removed-diff-21" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span> </p>
<p style="margin: 10px 0 0 0"> <span class="diff-html-changed" id="changed-diff-14" style="background-color: #d6f0ff;">We'll </span> </p>
<span class="diff-html-removed" id="removed-diff-22" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>
<p style="margin: 10px 0 0 0"> <span class="diff-html-changed" style="background-color: #d6f0ff;"> </span><span class="diff-html-changed" id="changed-diff-15" style="background-color: #d6f0ff;">use </span> </p>
<span class="diff-html-removed" id="removed-diff-23" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>
<p style="margin: 10px 0 0 0"> <span class="diff-html-changed" style="background-color: #d6f0ff;"> </span><span class="diff-html-changed" id="changed-diff-16" style="background-color: #d6f0ff;">the </span> </p>
<span class="diff-html-removed" id="removed-diff-24" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>
<p style="margin: 10px 0 0 0"> <code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-17" style="background-color: #d6f0ff;">asterisk.crt</span></code> </p>
<span class="diff-html-removed" id="removed-diff-25" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>
<p style="margin: 10px 0 0 0"> <span class="diff-html-changed" style="background-color: #d6f0ff;"> </span><span class="diff-html-changed" id="changed-diff-18" style="background-color: #d6f0ff;">and </span> </p>
<span class="diff-html-removed" id="removed-diff-26" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>
<p style="margin: 10px 0 0 0"> <code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-19" style="background-color: #d6f0ff;">asterisk.key</span></code> </p>
<span class="diff-html-removed" id="removed-diff-27" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>
<p style="margin: 10px 0 0 0"> <span class="diff-html-changed" style="background-color: #d6f0ff;"> </span><span class="diff-html-changed" id="changed-diff-20" style="background-color: #d6f0ff;">files </span> </p>
<span class="diff-html-removed" id="removed-diff-28" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>
<p style="margin: 10px 0 0 0"> <span class="diff-html-changed" style="background-color: #d6f0ff;"> </span><span class="diff-html-changed" id="changed-diff-21" style="background-color: #d6f0ff;">later </span> </p>
<span class="diff-html-removed" id="removed-diff-29" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>
<p style="margin: 10px 0 0 0"> <span class="diff-html-changed" style="background-color: #d6f0ff;"> </span><span class="diff-html-changed" id="changed-diff-22" style="background-color: #d6f0ff;">to </span> </p>
<span class="diff-html-removed" id="removed-diff-30" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>
<p style="margin: 10px 0 0 0"> <span class="diff-html-changed" style="background-color: #d6f0ff;"> </span><span class="diff-html-changed" id="changed-diff-23" style="background-color: #d6f0ff;">configure </span> </p>
<span class="diff-html-removed" id="removed-diff-31" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>
<p style="margin: 10px 0 0 0"> <span class="diff-html-changed" style="background-color: #d6f0ff;"> </span><span class="diff-html-changed" id="changed-diff-24" style="background-color: #d6f0ff;">the </span> </p>
<span class="diff-html-removed" id="removed-diff-32" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>
<p style="margin: 10px 0 0 0"> <span class="diff-html-changed" style="background-color: #d6f0ff;"> </span><span class="diff-html-changed" id="changed-diff-25" style="background-color: #d6f0ff;">HTTP </span> </p>
<span class="diff-html-removed" id="removed-diff-33" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>
<p style="margin: 10px 0 0 0"> <span class="diff-html-changed" style="background-color: #d6f0ff;"> </span><span class="diff-html-changed" id="changed-diff-26" style="background-color: #d6f0ff;">server.</span> </p>
<h1 id="ConfiguringAsteriskforWebRTCClients-AsteriskConfiguration" style="margin: 10px 0 0 0; font-size: 24px; font-weight: normal; line-height: 30px; margin: 40px 0 0 0"> <span style="color: rgb(133,120,102);">Asterisk Configuration</span> </h1>
<h2 id="ConfiguringAsteriskforWebRTCClients-ConfigureAsterisk'sbuilt-inHTTPserver" style="margin: 10px 0 0 0; font-size: 20px; font-weight: normal; line-height: 30px; margin: 40px 0 0 0; margin-top: 10px"> <span class="diff-html-changed" id="changed-diff-27" style="background-color: #d6f0ff;">Configure Asterisk's built-in HTTP </span> </h2>
<span class="diff-html-removed" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>
<span class="diff-html-removed" id="removed-diff-34" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">daemon</span>
<h2 id="ConfiguringAsteriskforWebRTCClients-ConfigureAsterisk'sbuilt-inHTTPserver" style="margin: 10px 0 0 0; font-size: 20px; font-weight: normal; line-height: 30px; margin: 40px 0 0 0"> <span class="diff-html-added" id="added-diff-9" style="font-size: 100%; background-color: #ddfade;">server</span> </h2>
<p style="margin: 10px 0 0 0">To communicate with <span class="diff-html-removed" id="removed-diff-35" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">websocket </span><span class="diff-html-added" id="added-diff-10" style="font-size: 100%; background-color: #ddfade;">WebSocket </span>clients, Asterisk uses its built-in HTTP <span class="diff-html-removed" id="removed-diff-36" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">daemon</span><span class="diff-html-added" id="added-diff-11" style="font-size: 100%; background-color: #ddfade;">server</span>. <span class="diff-html-removed" id="removed-diff-37" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> Configure </span><span class="diff-html-added" id="added-diff-12" style="font-size: 100%; background-color: #ddfade;">Configure </span><code style="font-family: monospace"><strong><span class="diff-html-changed" id="changed-diff-29" style="background-color: #d6f0ff;">/etc/asterisk/http.conf</span></strong></code> as follows:</p>
<table class="diff-macro" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<thead>
<tr>
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5639/a252d7f5e75d7a8bf7047b4b2c92f71a56a8f048.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th>
</tr>
</thead>
<tbody>
<tr>
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse">
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse"><span class="diff-html-added" id="added-diff-13" style="font-size: 100%; background-color: #ddfade;">title</span></td>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse"><span class="diff-html-added" style="font-size: 100%; background-color: #ddfade;">/etc/asterisk/http.conf</span></td>
</tr>
<tr>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse"><span class="diff-html-added" style="font-size: 100%; background-color: #ddfade;">language</span></td>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse"><span class="diff-html-added" style="font-size: 100%; background-color: #ddfade;">text</span></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
<tbody>
<tr>
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">[general]
enabled=yes
bindaddr=0.0.0.0
bindport=8088
tlsenable=yes
tlsbindaddr=0.0.0.0:8089
tlscertfile=/etc/asterisk/keys/asterisk.crt
tlsprivatekey=/etc/asterisk/keys/asterisk.key</pre> </td>
</tr>
</tbody>
</table>
<table class="diff-macro" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<thead>
<tr>
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5639/a252d7f5e75d7a8bf7047b4b2c92f71a56a8f048.48/_/images/icons/macrobrowser/dropdown/note.png" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <p style="margin: 10px 0 0 0; margin-top: 0">If you have not used the generated self-signed certificates produced in the "<a href="#ConfiguringAsteriskforWebRTCClients-CreateCertificates" style="color: #3b73af; text-decoration: none"><span class="diff-html-changed" id="changed-diff-30" style="background-color: #d6f0ff;">Create Certificates</span></a>" section then you will need to set the "<code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-31" style="background-color: #d6f0ff;">tlscertfile</span></code>" and "<code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-32" style="background-color: #d6f0ff;">tlsprivatekey</span></code>" to the path of your own certificates if they differ.</p> </td>
</tr>
</tbody>
</table>
<p style="margin: 10px 0 0 0"> </p>
<p style="margin: 10px 0 0 0">Now start or restart Asterisk and make sure the TLS server is running by issuing the following CLI command:</p>
<table class="diff-macro" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<thead>
<tr>
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5639/a252d7f5e75d7a8bf7047b4b2c92f71a56a8f048.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th>
</tr>
</thead>
<tbody>
<tr>
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse">
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse"><span class="diff-html-added" id="added-diff-14" style="font-size: 100%; background-color: #ddfade;">title</span></td>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse"><span class="diff-html-added" style="font-size: 100%; background-color: #ddfade;">Asterisk CLI</span></td>
</tr>
<tr>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse"><span class="diff-html-added" style="font-size: 100%; background-color: #ddfade;">language</span></td>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse"><span class="diff-html-added" style="font-size: 100%; background-color: #ddfade;">text</span></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
<tbody>
<tr>
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">*CLI> http show status
HTTP Server Status:
Prefix:
Server: Asterisk/GIT-16-a84c257cd6
Server Enabled and Bound to [::]:8088
HTTPS Server Enabled and Bound to [::]:8089
Enabled URI's:
/test_media_cache/... => HTTP Media Cache Test URI
/guimohdir_rh => HTTP POST mapping
/httpstatus => Asterisk HTTP General Status
/phoneprov/... => Asterisk HTTP Phone Provisioning Tool
/amanager => HTML Manager Event Interface w/Digest authentication
/backups => HTTP POST mapping
/arawman => Raw HTTP Manager Event Interface w/Digest authentication
/manager => HTML Manager Event Interface
/rawman => Raw HTTP Manager Event Interface
/static/... => Asterisk HTTP Static Delivery
/amxml => XML Manager Event Interface w/Digest authentication
/mxml => XML Manager Event Interface
/moh => HTTP POST mapping
/ari/... => Asterisk RESTful API
/ws => Asterisk HTTP WebSocket
<there may be more></pre> </td>
</tr>
</tbody>
</table>
<p style="margin: 10px 0 0 0">Note that the HTTPS Server is enabled and bound to <code style="font-family: monospace">[::]:8089</code> and that the <code style="font-family: monospace">/ws</code> URI is enabled.</p>
<h2 id="ConfiguringAsteriskforWebRTCClients-ConfigurePJSIP" style="margin: 10px 0 0 0; font-size: 20px; font-weight: normal; line-height: 30px; margin: 40px 0 0 0"> <span style="color: rgb(133,120,102);">Configure PJSIP</span> </h2>
<p style="margin: 10px 0 0 0"> <span style="color: rgb(133,120,102);"> </span>If you're not already familiar with configuring Asterisk's <code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-33" style="background-color: #d6f0ff;">chan_pjsip</span></code><span class="diff-html-changed" style="background-color: #d6f0ff;"> </span>driver, visit the <a class="confluence-link unresolved" href="#" style="color: #3b73af; text-decoration: none"><code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-34" style="background-color: #d6f0ff;">res_pjsip</span></code><span class="diff-html-changed" style="background-color: #d6f0ff;"> </span>configuration page</a>.</p>
<h3 id="ConfiguringAsteriskforWebRTCClients-PJSIPWSSTransport" style="margin: 10px 0 0 0; font-size: 16px; line-height: 25px; margin: 30px 0 0 0"> <span style="color: rgb(133,120,102);">PJSIP WSS Transport</span> </h3>
<p style="margin: 10px 0 0 0">Although the HTTP <span class="diff-html-removed" id="removed-diff-38" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">daemon </span><span class="diff-html-added" id="added-diff-15" style="font-size: 100%; background-color: #ddfade;">server </span>does the heavy lifting for <span class="diff-html-removed" id="removed-diff-39" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">websockets</span><span class="diff-html-added" id="added-diff-16" style="font-size: 100%; background-color: #ddfade;">WebSockets</span>, we still need to define a basic PJSIP Transport<span class="diff-html-removed" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span><span class="diff-html-removed" id="removed-diff-40" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">for websockets.</span><span class="diff-html-added" id="added-diff-17" style="font-size: 100%; background-color: #ddfade;">:</span> </p>
<table class="diff-macro" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<thead>
<tr>
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5639/a252d7f5e75d7a8bf7047b4b2c92f71a56a8f048.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th>
</tr>
</thead>
<tbody>
<tr>
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse">
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">title</td>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">/etc/asterisk/pjsip.conf</td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
<tbody>
<tr>
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">[transport-wss]
type=transport
protocol=wss
bind=0.0.0.0
; All other transport parameters are ignored for wss transports.
</pre> </td>
</tr>
</tbody>
</table>
<h3 id="ConfiguringAsteriskforWebRTCClients-PJSIPEndpoint,AORandAuth" style="margin: 10px 0 0 0; font-size: 16px; line-height: 25px; margin: 30px 0 0 0"> <span style="color: rgb(133,120,102);">PJSIP Endpoint, AOR and Auth</span> </h3>
<p style="margin: 10px 0 0 0">We now need to create the basic PJSIP objects that represent the client. <span class="diff-html-removed" id="removed-diff-41" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>In this example, we'll call the client <code style="font-family: monospace">webrtc_client</code> but you can use any name you like, such as an extension number. <span class="diff-html-removed" id="removed-diff-42" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>Only the minimum options needed for a working configuration are shown. <span class="diff-html-removed" id="removed-diff-43" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>NOTE: <span class="diff-html-removed" id="removed-diff-44" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>It's normal for multiple objects in <code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-35" style="background-color: #d6f0ff;">pjsip.conf</span></code><span class="diff-html-changed" style="background-color: #d6f0ff;"> </span>to have the same name as long as the types differ.</p>
<table class="diff-macro" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<thead>
<tr>
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5639/a252d7f5e75d7a8bf7047b4b2c92f71a56a8f048.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th>
</tr>
</thead>
<tbody>
<tr>
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse">
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">title</td>
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">/etc/asterisk/pjsip.conf</td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
<tbody>
<tr>
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">[webrtc_client]
type=aor
max_contacts=5
remove_existing=yes
[webrtc_client]
type=auth
auth_type=userpass
username=webrtc_client
password=webrtc_client ; This is a completely insecure password! Do NOT expose this
; system to the Internet without utilizing a better password.
[webrtc_client]
type=endpoint
aors=webrtc_client
auth=webrtc_client
dtls_auto_generate_cert=yes
webrtc=yes
; Setting webrtc=yes is a shortcut for setting the following options:
; use_avpf=yes
; media_encryption=dtls
; dtls_verify=fingerprint
; dtls_setup=actpass
; ice_support=yes
; media_use_received_transport=yes
; rtcp_mux=yes
context=default
disallow=all
allow=opus,ulaw
</pre> </td>
</tr>
</tbody>
</table>
<p style="margin: 10px 0 0 0">An explanation of each of these settings parameters can be found on the <a class="confluence-link unresolved" href="#" style="color: #3b73af; text-decoration: none">Asterisk 15 Configuration_res_pjsip</a> page. <span class="diff-html-removed" id="removed-diff-45" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> Briefly</span><span class="diff-html-added" id="added-diff-18" style="font-size: 100%; background-color: #ddfade;">Briefly</span>:</p>
<ul style="margin: 10px 0 0 0">
<li>Declare an endpoint that references our previously-made aor and auth. </li>
<li>Notify Asterisk to expect the AVPF profile (secure RTP)</li>
<li>Setup the DTLS method of media encryption.</li>
<li>Specify which certificate files to use for TLS negotiations with this endpoint and our verification and setup methods.</li>
<li>Enable ICE support</li>
<li>Tell Asterisk to send media across the same transport that we receive it from.</li>
<li>Enable mux-ing of RTP and RTCP events onto the same socket.</li>
<li>Place received calls from this endpoint into an Asterisk <a href="https://wiki.asterisk.org/wiki/display/AST/Dialplan" rel="nofollow" style="color: #3b73af; text-decoration: none">Dialplan</a> context called "default"</li>
<li>And setup codecs by first disabling all and then selectively enabling Opus (presuming that you installed the Opus codec for Asterisk as mentioned at the beginning of this tutorial), then G.711 <span class="diff-html-removed" id="removed-diff-46" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">u</span><span class="diff-html-added" id="added-diff-19" style="font-size: 100%; background-color: #ddfade;">μ</span>-law.</li>
</ul>
<h2 id="ConfiguringAsteriskforWebRTCClients-RestartAsterisk" style="margin: 10px 0 0 0; font-size: 20px; font-weight: normal; line-height: 30px; margin: 40px 0 0 0">Restart Asterisk</h2>
<p style="margin: 10px 0 0 0">Restart Asterisk to pick up the changes and if you have a firewall, don't forget to allow TCP port 8089 through so your client can connect.</p>
<span style="color: rgb(133,120,102);"><span class="diff-html-removed" id="removed-diff-47" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">Wrapup</span></span>
<h1 id="ConfiguringAsteriskforWebRTCClients-WrapUp" style="margin: 10px 0 0 0; font-size: 24px; font-weight: normal; line-height: 30px; margin: 40px 0 0 0"> <span style="color: rgb(133,120,102);"><span class="diff-html-added" id="added-diff-20" style="font-size: 100%; background-color: #ddfade;">Wrap Up</span></span> </h1>
<p style="margin: 10px 0 0 0">At this point, your WebRTC client should be able to register and make calls. <span class="diff-html-removed" id="removed-diff-48" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span>If you've used self-signed certificates however, your browser may not allow the connection and because the attempt is not from a normal URI supplied by the user, the user might not even be notified that there's an issue. You <em>may</em> be able to get the browser to accept the certificate by visiting "<code style="font-family: monospace"><span class="diff-html-changed" id="changed-diff-37" style="background-color: #d6f0ff;">https://pbx.example.com:8089/ws</span></code>" directly. This will usually result in a warning from the browser and may give you the opportunity to accept the self-signed certificate and/or create an exception. <span class="diff-html-removed" id="removed-diff-49" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> If </span><span class="diff-html-added" id="added-diff-21" style="font-size: 100%; background-color: #ddfade;">If </span>you generated your certificate from a pre-existing local Certificate Authority, you can also import that Certificate Authority's certificate into your trusted store but that procedure is beyond the scope of this document.</p>
<p style="margin: 10px 0 0 0"> <span class="diff-html-removed" id="removed-diff-50" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span> </p>
<p style="margin: 10px 0 0 0"> <span class="diff-html-removed" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span> </p>
<p style="margin: 10px 0 0 0"> <span class="diff-html-removed" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> </span> </p>
</div> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td class="email-content-main mobile-expand action-padding last-row-padding" style="padding: 0px; border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0 15px 15px 16px; background-color: #fff; padding-bottom: 10px; padding-bottom: 10px">
<table id="actions-pattern" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 1px">
<tbody>
<tr>
<td id="actions-pattern-container" valign="middle" style="padding: 0px; border-collapse: collapse; padding: 15px 0 0 24px; vertical-align: middle">
<table align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr>
<td class="actions-pattern-action-icon-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 0px; vertical-align: middle"><a href="https://wiki.asterisk.org/wiki/display/AST/Configuring+Asterisk+for+WebRTC+Clients?src=email" title="View page Icon" style="color: #3b73af; text-decoration: none"><img class="actions-pattern-action-icon-image" height="16" width="16" border="0" title="View page Icon" src="cid:com.atlassian.confluence.plugins.confluence-email-resources%3Aview-page-email-adg-footer-item%3Aicon" alt="View page Icon" style="vertical-align: middle" /></a></td>
<td class="actions-pattern-action-text-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 4px; padding-left: 5px; white-space: nowrap"><a href="https://wiki.asterisk.org/wiki/display/AST/Configuring+Asterisk+for+WebRTC+Clients?src=email" title="View page" style="color: #3b73af; text-decoration: none">View page</a></td>
<td class="actions-pattern-action-bull" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 4px; color: #999; padding: 0 5px">•</td>
</tr>
</tbody>
</table>
<table align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr>
<td class="actions-pattern-action-icon-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 0px; vertical-align: middle"><a href="https://wiki.asterisk.org/wiki/display/AST/Configuring+Asterisk+for+WebRTC+Clients?showComments=true&showCommentArea=true&src=email#addcomment" title="Add comment Icon" style="color: #3b73af; text-decoration: none"><img class="actions-pattern-action-icon-image" height="16" width="16" border="0" title="Add comment Icon" src="cid:com.atlassian.confluence.plugins.confluence-email-resources%3Aadd-comment-to-content-email-adg-footer-item%3Aicon" alt="Add comment Icon" style="vertical-align: middle" /></a></td>
<td class="actions-pattern-action-text-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 4px; padding-left: 5px; white-space: nowrap"><a href="https://wiki.asterisk.org/wiki/display/AST/Configuring+Asterisk+for+WebRTC+Clients?showComments=true&showCommentArea=true&src=email#addcomment" title="Add comment" style="color: #3b73af; text-decoration: none">Add comment</a></td>
<td class="actions-pattern-action-bull" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 4px; color: #999; padding: 0 5px">•</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr>
<td class="actions-pattern-action-icon-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 0px; vertical-align: middle"><a href="https://wiki.asterisk.org/wiki/plugins/likes/like.action?contentId=40818051&src=email" title="Like Icon" style="color: #3b73af; text-decoration: none"><img class="actions-pattern-action-icon-image" height="16" width="16" border="0" title="Like Icon" src="cid:com.atlassian.confluence.plugins.confluence-like%3Aview-email-adg-content-item%3Aicon" alt="Like Icon" style="vertical-align: middle" /></a></td>
<td class="actions-pattern-action-text-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 4px; padding-left: 5px; white-space: nowrap"><a href="https://wiki.asterisk.org/wiki/plugins/likes/like.action?contentId=40818051&src=email" title="Like" style="color: #3b73af; text-decoration: none">Like</a></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td class="email-content-rounded-bottom mobile-expand" style="padding: 0px; border-collapse: collapse; color: #fff; height: 5px; line-height: 5px; padding: 0 15px 0 16px; background-color: #fff; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-top: 0; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; mso-line-height-rule: exactly"> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td id="footer-pattern" style="padding: 0px; border-collapse: collapse; padding: 12px 20px">
<table id="footer-pattern-container" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333">
<tbody>
<tr>
<td id="footer-pattern-links-container" width="100%" style="padding: 0px; border-collapse: collapse; color: #999; font-size: 12px; line-height: 18px; font-family: Arial, sans-serif; mso-line-height-rule: exactly; mso-text-raise: 2px">
<table align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; font-size: 12px; line-height: 18px; font-family: Arial, sans-serif; mso-line-height-rule: exactly; mso-text-raise: 2px">
<tbody>
<tr>
<td class="footer-pattern-links mobile-resize-text" style="padding: 0px; border-collapse: collapse"><a href="https://wiki.asterisk.org/wiki/users/removespacenotification.action?spaceKey=AST&src=email" title="" style="color: #3b73af; text-decoration: none">Stop watching space</a></td>
<td class="footer-pattern-links-bull" style="padding: 0px; border-collapse: collapse; padding: 0 5px; color: #999">•</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; font-size: 12px; line-height: 18px; font-family: Arial, sans-serif; mso-line-height-rule: exactly; mso-text-raise: 2px">
<tbody>
<tr>
<td class="footer-pattern-links mobile-resize-text" style="padding: 0px; border-collapse: collapse"><a href="https://wiki.asterisk.org/wiki/users/editmyemailsettings.action?src=email" title="" style="color: #3b73af; text-decoration: none">Manage notifications</a></td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td id="footer-pattern-text" class="mobile-resize-text" width="100%" style="padding: 0px; border-collapse: collapse; color: #999; font-size: 12px; line-height: 18px; font-family: Arial, sans-serif; mso-line-height-rule: exactly; mso-text-raise: 2px; display: none">This message was sent by Atlassian Confluence 5.6.6</td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table id="sealed-section" border="0" cellpadding="0" cellspacing="0" width="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; display: none">
<tbody>
<tr>
<td style="padding: 0px; border-collapse: collapse; border: 0; font-size: 0px; line-height: 0; mso-line-height-rule: exactly"></td>
</tr>
</tbody>
</table>
</body>
</html>