@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
433 lines (432 loc) • 16.7 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { h } from "@stencil/core";
import { Camera, DEFAULT_UPLINK } from "../rtsp-h264-mjpeg/camera";
import { SimpleUser as SipUser } from "sip.js/lib/platform/web";
export class LarvaIntercomContent {
constructor() {
this.buttons = [];
/**
* Use upstream proxy for cameras
*/
this.useUplinkProxy = true;
this.sipConnected = false;
this.sipConnectionFailure = false;
this.cameraLoading = true;
this.inCall = false;
this.calling = false;
this.incomingCall = false;
this.dom = false;
}
async open() {
var _a;
return (_a = this.cameraInstance) === null || _a === void 0 ? void 0 : _a.open();
}
componentWillLoad() {
this.dom = true;
this.errorMessage = '';
if (!this.server && !this.useUplinkProxy) { // we dont have to use uplink proxy and we dont have device url defined; generate from current host
this.server = Camera.getLocalVideoServer();
}
else if (!this.server) { // we do have to use uplink, but no server defined, use default
this.server = DEFAULT_UPLINK;
}
}
async disconnectedCallback() {
var _a, _b, _c, _d;
this.dom = false;
// tslint:disable-next-line: no-unbound-method
(_a = this.cameraInstance) === null || _a === void 0 ? void 0 : _a.$el.removeEventListener('larvideoloading', this.onVideoElementLoading);
(_b = this.cameraInstance) === null || _b === void 0 ? void 0 : _b.close();
if (this.inCall) {
await ((_c = this.sipInstance) === null || _c === void 0 ? void 0 : _c.hangup().catch(err => console.error(err)));
}
await ((_d = this.sipInstance) === null || _d === void 0 ? void 0 : _d.unregister().catch(err => console.error(err)).then(() => this.sipInstance.disconnect()).catch(err => console.error(err)));
}
componentDidLoad() {
this.onVideoElementLoading = this.onVideoElementLoading.bind(this);
const el = this.el.shadowRoot || this.el;
// load camera
if (this.camera) {
this.cameraLoading = true;
this.cameraInstance = new Camera(this.camera, this.server);
if (this.useUplinkProxy) {
this.output.emit({ upstream: this.cameraInstance.wsurl });
}
else {
this.cameraInstance.open()
.catch(err => console.error(err));
}
const content = el.querySelector('.camera');
content.appendChild(this.cameraInstance.$el);
// tslint:disable-next-line: no-unbound-method
this.cameraInstance.$el.addEventListener('larvideoloading', this.onVideoElementLoading);
}
// load sip
if (this.sip) {
this.loading.emit(true);
const simpleUserDelegate = {
onCallReceived: this.onCallReceived.bind(this),
onCallCreated: this.onCallCreated.bind(this),
onCallAnswered: this.onCallAnswered.bind(this),
onCallHangup: this.onCallHangup.bind(this),
onCallHold: this.onCallHold.bind(this),
};
const audioElement = el.querySelector('#remoteAudio');
const simpleUserOptions = {
delegate: simpleUserDelegate,
media: { remote: { audio: audioElement } },
aor: this.sip.aor,
userAgentOptions: {
logLevel: 'error',
userAgentString: 'Larva.io SIP Client',
authorizationPassword: this.sip.authorizationPassword,
authorizationUsername: this.sip.authorizationUsername,
viaHost: this.sip.viaHost,
}
};
this.sipInstance = new SipUser(this.sip.server, simpleUserOptions);
this.sipInstance.connect()
.then(() => {
this.sipConnected = true;
return this.sipInstance.register();
}).catch(err => {
// @TODO
this.sipConnectionFailure = true;
this.errorMessage = err.message;
}).finally(() => {
if (this.dom) {
this.loading.emit(false);
}
});
}
else {
this.loading.emit(false);
}
}
onVideoElementLoading(event) {
this.cameraLoading = event.detail;
}
onCallReceived() {
this.calling = false;
this.inCall = false;
this.incomingCall = true;
}
onCallCreated() {
// console.log(`[Call created`);
}
onCallAnswered() {
this.calling = false;
this.inCall = true;
this.incomingCall = false;
}
onCallHangup() {
this.calling = false;
this.inCall = false;
this.incomingCall = false;
}
onCallHold(held) {
// console.log(`[Call hold ${held}`);
}
async call() {
var _a, _b;
try {
this.errorMessage = '';
this.calling = true;
if (this.incomingCall) {
this.incomingCall = false;
await ((_a = this.sipInstance) === null || _a === void 0 ? void 0 : _a.answer());
}
else {
await ((_b = this.sipInstance) === null || _b === void 0 ? void 0 : _b.call(this.sip.target, undefined, {
// An example of how to get access to a SIP response message for custom handling
requestDelegate: {
onReject: (response) => {
console.error(response);
this.errorMessage = (response === null || response === void 0 ? void 0 : response.message.reasonPhrase) || 'Unknown error';
}
}
}));
}
}
catch (err) {
this.calling = false;
this.incomingCall = false;
this.inCall = false;
this.errorMessage = err.message;
}
}
async hangup() {
var _a;
try {
this.errorMessage = '';
this.calling = false;
this.incomingCall = false;
this.inCall = false;
await ((_a = this.sipInstance) === null || _a === void 0 ? void 0 : _a.hangup());
}
catch (err) {
this.errorMessage = err.message;
}
}
render() {
const buttons = [];
for (let i = 0; i < this.buttons.length; i++) {
const option = this.buttons[i].name;
buttons.push(h("lar-button", { expand: "full", color: this.colorInputs, disabled: this.disabled, onClick: () => this.output.emit(i) }, h("lar-translate", { t: option })));
}
return (h("div", { key: '1c0aa098402978cdefe56b5c84ef3495a2224a5f', class: "content" }, this.camera && h("div", { key: 'ff926242e012cb00a272e75c07fd15260f71930f', class: "camera" }, this.cameraLoading && h("lar-icon", { key: '1a5d0da9b1b626624238d837f707f3d39c27bf74', size: "large", color: this.colorInputs, icon: "loading" })), h("audio", { key: '6cbd4bf71c41cd9ab99c6f3066632a5d0e2d842d', id: "remoteAudio" }), h("div", { key: '7f1ca3e93a1a78e970fd7c3b7dc01603100f99bb', class: "info" }, this.calling && h("span", { key: '2b669d2e0cf869e8b751c2b3a8e452f59e53e744', class: "calling" }, h("lar-translate", { key: 'de02068dbe201663f328e82be259552b5466a0d7', t: "intercom.calling" })), this.errorMessage && h("span", { key: '3d9854064fc8632a7058c433085a325d16a71731', class: "error" }, h("lar-translate", { key: '6f2c73f7d047fca7a4d26f06fe9276083ebfcd30', t: this.errorMessage }))), h("div", { key: '5b1f037e35ecdef537106c58f26b4c31096848f6', class: "sipcontrols" }, !this.inCall && h("lar-button", { key: 'fb74a421fc9643ec38979ab710b1799ab2be3cdd', disabled: this.disabled || !this.sipConnected || this.inCall || this.calling, outline: true, onClick: () => this.call(), color: "success" }, h("lar-icon", { key: '9884a1a2a1f074d7c20734bd871eeb47e7722a75', icon: "telephone" })), this.inCall && h("lar-button", { key: 'ac1531fa98551b3c61b7bdc4ad1b295f20bc2a81', disabled: this.disabled || !this.sipConnected || !this.inCall, outline: true, onClick: () => this.hangup(), color: "danger" }, h("lar-icon", { key: '723c8b2e67d1d624d6c524a7a30b715b6b2496b8', icon: "telephone-hangup" }))), h("div", { key: '214b242c9957c9d1f7df2cb8ba1a105e0ece02c5', class: "radios" }, buttons)));
}
static get is() { return "lar-intercom-content"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["intercom.scss"]
};
}
static get styleUrls() {
return {
"$": ["intercom.css"]
};
}
static get properties() {
return {
"colorInputs": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color-inputs"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled"
},
"camera": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "CameraOpts",
"resolved": "CameraOpts",
"references": {
"CameraOpts": {
"location": "import",
"path": "../rtsp-h264-mjpeg/rtsp-h264-mjpeg-interface",
"id": "src/components/rtsp-h264-mjpeg/rtsp-h264-mjpeg-interface.tsx::CameraOpts"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false
},
"sip": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "SipOpts",
"resolved": "SipOpts",
"references": {
"SipOpts": {
"location": "import",
"path": "./intercom-interface",
"id": "src/components/intercom/intercom-interface.tsx::SipOpts"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false
},
"buttons": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Button[]",
"resolved": "Button[]",
"references": {
"Button": {
"location": "import",
"path": "./intercom-interface",
"id": "src/components/intercom/intercom-interface.tsx::Button"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"useUplinkProxy": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Use upstream proxy for cameras"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "use-uplink-proxy",
"defaultValue": "true"
},
"server": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "server for cameras"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "server"
}
};
}
static get states() {
return {
"sipConnected": {},
"sipConnectionFailure": {},
"cameraLoading": {},
"inCall": {},
"calling": {},
"incomingCall": {},
"errorMessage": {}
};
}
static get events() {
return [{
"method": "output",
"name": "output",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "loading",
"name": "loading",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "response",
"name": "response",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"open": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=intercom-content.js.map