|
|
| (64 intermediate revisions by 11 users not shown) |
| Line 1: |
Line 1: |
| [[Category:Concept|myPBX WebRTC Softwarephone]] | | [[Category:Concept|myPBX WebRTC Softwarephone]] |
| The myPBX toolkit is a set of Java Script files that can be used for integrating functionality of the innovaphone PBX into arbitrary web sites.
| |
|
| |
|
| = Supported features =
| | Version 12r1 is not compatible with WebRTC any more due to the missing RTCP-Mux feature that is only included in 12r2 and up. |
| * Presence monitoring
| |
| * Outgoind WebRTC calls with audio, video and application sharing
| |
| | |
| = Requirements =
| |
| ;Web site:
| |
| * The needed JavaScript files of the libraries have to be included in the web site.
| |
| ;PBX:
| |
| * User object with password for login and a WebRTC device
| |
| * Call filters for that user object
| |
| * Valid STUN/TURN configuration
| |
| ;Licenses:
| |
| * myPBX license
| |
| * Video license (for video telephony)
| |
| * Application Sharing license (for viewing shared applications)
| |
| * WebRTC channel license (per WebRTC call)
| |
| ;Network:
| |
| * The PBX service (<code>https://xxx/PBX0/WEBSOCKET</code>) must be accessible from the public internet (NAT port forwarding or reverse proxy).
| |
| | |
| = Authentication =
| |
| For connecting the credentials of a PBX user account is needed.
| |
| | |
| = Reference =
| |
| == innovaphone.pbxwebsocket.Connection ==
| |
| === Includes ===
| |
| The following files have to be included in the html file in order to use the WebRTC endpoint.
| |
| * <code>innovaphone.common.crypto.js</code>
| |
| * <code>innovaphone.pbxwebsocket.Connection.js</code>
| |
| | |
| === Constructor ===
| |
| ;new Connection(url, username, password):
| |
| :;url: The URL of the PBX websocket service (e.g. <code>ws://10.0.0.1/PBX0/WEBSOCKET/websocket</code>)
| |
| :;username: The username of the PBX user object.
| |
| :;password: The password of the PBX user object.
| |
| | |
| === Methods ===
| |
| ;function close(): Disconnects from the PBX.
| |
| ;function sendSubscribeEndpoint(name, number): Starts presence monitoring for a given endpoint specifyed by name ''or'' number.
| |
| :;name: The URI or H.323 id
| |
| :;number: The phone number
| |
| ;function sendUnsubscribeEndpoint(name, number): Stops presence monitoring for a given endpoint specifyed by name ''or'' number.
| |
| :;name: The URI or H.323 id
| |
| :;number: The phone number
| |
| | |
| The methods for WebRTC calls are not described here. Use innovaphone.pbxwebsocket.WebRtcEndpoint.js instead.
| |
| | |
| === Callbacks ===
| |
| ;function onconnected(userInfo): Called when the connection has been successfully established.
| |
| :;userInfo: An object containing informmation about the connected user.
| |
| | |
| ;function onerror(error): Called when the connection could not be established or an other error occurred.
| |
| :;error: A string containing an error message.
| |
| ;onclosed(): Called if the connection was closed.
| |
| | |
| ;function onendpointpresence(name, number, phoneStatus, imStatus, activity, note): Called if the presence of a subscribed endpoint has changed.
| |
| :;name: The URI or H.323 id
| |
| :;number: The phone number
| |
| :;phoneStatus: Tells if a phone is registered, <code>open</code> or <code>closed</code>.
| |
| :;imStatus: Tells if a chat client is registered, <code>open</code> or <code>closed</code>.
| |
| :;activity: Presence activity <code>away</code>, <code>busy</code>, <code>lunch</code>, <code>vacation</code>, <code>busy</code>, <code>dnd</code>, <code>on-the-phone</code>
| |
| :;note: Presence note
| |
| | |
| The callbacks for WebRTC calls are not described here. Use innovaphone.pbxwebsocket.WebRtcEndpoint.js instead.
| |
| | |
| === Example ===
| |
| The following example connects to the PBX and does presence monitoring for the user with the H.323 ID "target".
| |
| | |
| <script type="text/javascript" src="innovaphone.common.crypto.js"></script>
| |
| <script type="text/javascript" src="innovaphone.pbxwebsocket.Connection.js"></script>
| |
| <script type="text/javascript">
| |
| | |
| // dependencies
| |
| var Connection = innovaphone.pbxwebsocket.Connection;
| |
|
| |
| // private
| |
| var connection = null;
| |
| var config = {
| |
| url: "ws://192.168.0.1/PBX0/WEBSOCKET/websocket",
| |
| username: "user",
| |
| password: "password"
| |
| };
| |
|
| |
| // callbacks
| |
| function onConnected(userInfo) {
| |
| console.log("Connected: " + JSON.stringify(userInfo));
| |
| connection.sendSubscribeEndpoint("target", null);
| |
| }
| |
|
| |
| function onError(error) {
| |
| console.log("Error: " + error);
| |
| }
| |
|
| |
| function onClosed() {
| |
| console.log("Closed");
| |
| }
| |
|
| |
| function close() {
| |
| if (connection) connection.close();
| |
| connection = null;
| |
| }
| |
|
| |
| function onEndpointPresence(name, number, phoneStatus, imStatus, activity, note) {
| |
| console.log("EndpointPresence: activity=" + activity + " note=" + note);
| |
| }
| |
|
| |
| // main function
| |
| function start() {
| |
| if (connection) connection.close();
| |
| connection = new Connection(config.url, config.username, config.password);
| |
| connection.onconnected = onConnected;
| |
| connection.onerror = onError;
| |
| connection.onclosed = onClosed;
| |
| connection.onendpointpresence = onEndpointPresence;
| |
| }
| |
| | |
| </script>
| |
| | |
| == innovaphone.pbxwebsocket.WebRtcEndpoint ==
| |
| This file contains a WebRTC endpoint implementation that can be used for adding WebRTC calls to a web page. For that the credentials of a user object on the PBX is needed. Visitors of the web page will use that user object for making phone calls.
| |
| | |
| === Includes ===
| |
| The following files have to be included in the html file in order to use the WebRTC endpoint.
| |
| * <code>innovaphone.common.crypto.js</code>
| |
| * <code>innovaphone.pbxwebsocket.Connection.js</code>
| |
| * <code>innovaphone.pbxwebsocket.ToneGenerator.js</code>
| |
| * <code>innovaphone.pbxwebsocket.WebRtcEndpoint.js</code>
| |
| | |
| If you want to use application sharing the following files must also be included:
| |
| * <code>innovaphone.applicationSharing.jpeg.js</code>
| |
| * <code>innovaphone.applicationSharing.zlib.js</code>
| |
| * <code>innovaphone.applicationSharing.png.js</code>
| |
| * <code>innovaphone.applicationSharing.main.js</code>
| |
| | |
| Additionally the MP3 files containing the ring tones and ring back tones are needed on the web server in the same directory as the javascript files.
| |
| | |
| === Constructor ===
| |
| ;new WebRtcEndpoint(url, username, password, device, physicalLocation, regContext, onLog, onCall):
| |
| :;url: The URL of the PBX websocket service (e.g. <code>ws://10.0.0.1/PBX0/WEBSOCKET/websocket</code>)
| |
| :;username: The username of the PBX user object.
| |
| :;password: The password of the PBX user object.
| |
| :;device: The device ID that shall be used for making calls.
| |
| :;physicalLocation: The physical location of the user (optional).
| |
| :;regContext: A numeric value that will be used for identifying the registration in the PBX (optional).
| |
| :;logFunction: A callback function that is called for logging debug info (optional).
| |
| :;onCall: A callback function that is called when calls are added, updated or removed. Applications that want to use call control have to specify this callback function. Applications that don't should give <code>null</code>. (optional)
| |
| | |
| === Methods ===
| |
| ;function close(): Closes the WebRTC endpoint and disconnects from the PBX.
| |
| ;function initCall(name, number, video, sharing): Starts a phone call. This is only possible if the application supplied an <code>onCall</code> callback to the constructor.
| |
| :;name: The URI to be called (optional, supply name or number).
| |
| :;number: The phone number to be called (optional, supply name or number).
| |
| :;video: Set to <code>true</code> for starting a video call (optional).
| |
| :;sharing: Set to <code>true</code> for starting an application sharing call (optional).
| |
| ;function clearCall(id): Terminates a call.
| |
| :;id: The ID of the call (optional). If no ID is supplied, all calls are terminated.
| |
| ;function attachVideo(local, remote): Attaches HTML video elements to the WebRTC endpoints. The endpoint will use them to playback video. Applications can both attach before or during a video call. Also attaching multiple video elements for a single call is possible. The application should mute the video elements (<code>muted="muted"</code>) in order to avoid playback of audio.
| |
| :;local: The HTML video element for playback of the local webcam image (optional, may be <code>null</code>).
| |
| :;remote: The HTML video element for playback of the remote video image (optional, may be <code>null</code>).
| |
| ;function detachVideo(local, remote): Detaches HTML video elements that have previously attached. This will stop the playback on the supplied elements.
| |
| :;local: The HTML video element to be detached (optional, may be <code>null</code>).
| |
| :;remote: The HTML video element to be detached (optional, may be <code>null</code>).
| |
| | |
| === Callbacks ===
| |
| ;function onLog(text): Should write the supplied text to the log of the application.
| |
| ;function onCall(event, call): Is called when the state of calls of this WebRTC endpoint changes.
| |
| :;event: A string that can be <code>added</code>, <code>updated</code> and <code>removed</code>.
| |
| :;call: The call object containing the current info about the call.
| |
| ::;id: The numeric id of the call.
| |
| ::;dir: The direction of the call (<code>in</code> or <code>out</code>).
| |
| ::;state:The state of the call (<code>idle</code>, <code>calling</code>, <code>incomplete</code>, <code>complete</code>, <code>alerting</code>, <code>connected</code>, <code>disconnecting</code>, <code>disconnected</code>, <code>parked</code>).
| |
| ::;hold: <code>true</code>, if the call is on hold (optional).
| |
| ::;name: The URI of the remote party (optional).
| |
| ::;number: The phone number of the remote party (optional).
| |
| ::;video: <code>true</code>, if video is active (optional).
| |
| ::;sharing: <code>true</code>, if application sharing is active (optional).
| |
| ::;cause: The cause code (optional).
| |
| | |
| === Example ===
| |
| <script type="text/javascript" src="innovaphone.common.crypto.js"></script>
| |
| <script type="text/javascript" src="innovaphone.pbxwebsocket.Connection.js"></script>
| |
| <script type="text/javascript" src="innovaphone.pbxwebsocket.ToneGenerator.js"></script>
| |
| <script type="text/javascript" src="innovaphone.pbxwebsocket.WebRtcEndpoint.js"></script>
| |
| <script type="text/javascript">
| |
| | |
| // dependencies
| |
| var WebRtcEndpoint = innovaphone.pbxwebsocket.WebRtc.Endpoint;
| |
|
| |
| var endpoint = null;
| |
| var config = {
| |
| url: "ws://192.168.0.1/PBX0/WEBSOCKET/websocket",
| |
| username: "user",
| |
| password: "password",
| |
| device: "user-webrtc",
| |
| physicalLocation: null,
| |
| regContext: "0"
| |
| };
| |
|
| |
| function logFunction(text) {
| |
| console.log("WebRTC demo: " + text);
| |
| }
| |
|
| |
| function onCall(event, call) {
| |
| console.log("Call " + event + ": " + JSON.stringify(call));
| |
| }
| |
|
| |
| function initCall(number, video) {
| |
| if (endpoint) endpoint.initCall(null, number, video, false);
| |
| }
| |
|
| |
| function clearAllCalls() {
| |
| if (endpoint) endpoint.clearCall();
| |
| }
| |
|
| |
| function close() {
| |
| if (endpoint) {
| |
| endpoint.detachVideo(document.getElementById("video-lcoal"), document.getElementById("video-remote"));
| |
| endpoint.close();
| |
| }
| |
| endpoint = null;
| |
| }
| |
|
| |
| function start() {
| |
| if (endpoint) endpoint.close();
| |
| endpoint = new WebRtcEndpoint(config.url, config.username, config.password, config.device, config.physicalLocation, config.regContext, logFunction, onCall);
| |
| endpoint.attachVideo(document.getElementById("video-lcoal"), document.getElementById("video-remote"));
| |
| }
| |
| | |
| </script>
| |