[PoC] SIP client in mainUI for (door) intercom

Hi there!

I’ve started working on something which I had thought of ever I’ve put a openHAB (3) tablet on the wall:
a SIP client integration.
Mainly for my SIP based door intercom, to be able to see who is there, answer and open the door without the need to switch to another app on the tablet.

Actually, I thought this is highly complex. But it turned out to be relatively easy and is already fairly working. Here is what I did and how it works:

I created a new “SIP client widget”, which lazy loads the JavaScript SIP client library jssip. The widget can be configured as usual and allows setting the required SIP credentials.
To use it, you simply put it on the main page that is usually shown on your tablet. Currently it shows a door icon and a dot indicating the SIP status (red=disconnected, orange=connected but unregistered, green=registered).

When a call comes in, a (fullscreen) popup is opened showing an image - which is meant to be a “live” mjpeg image from the front door - and the tablet rings. After accepting the “call” you can send a DTMF sequence to open the door lock.
See some screenshots below.

SIP Settings:

Incoming call from front door (with fake image):
openHAB_SIPclient

Limitations:

  • no SIP video yet (I’m currently using a mjpeg stream from my front door camera to see the video upfront (couldn’t get early media to work))
  • Framework7 keeps previous pages loaded in background which keeps the SIP client active

Thoughts:

  • only works when the page with the SIP widget is shown and with the tablet being awake, but I think this is ok for many/most tablet installations
  • requires a webrtc capable PBX, e.g. asterisk (popular german FritzBox alone won’t do). Setup is not very complicated, but requires HTTPS to be set up
  • since it requires JS it needs to be shipped with OH (TMK)
  • with multiple tablets this could also be used as intercom. Though, in order to use different registrations for each device, the credentials need to be stored somehow in local browser storage
  • for this (and others) SIP video could also be added

The current code can be found on github.

Let me know what you think.
Also, I’m curious who else might be interested in this. If there’s enough votes, perhaps it gets included.

hubsif.

11 Likes

Great to see someone playing with this. Check out this github request here as it should be possible and it may be what you have already have working, to use a widget to side load a webRTC connection to play a RTSP stream.

Simple RTSP support via Video Widget · Issue #10591 · openhab/openhab-addons (github.com)

There are webrtc javascript players for both RTSP and also HLS streams. Should be simple if you know how to side load the javascript players that people embed into websites.

1 Like

I noticed if you use oh-webframe instead of oh-image to show camera’s mjpeg stream then the connection closes if you set url to "". When using oh-image the connection stays open even the src is set to "".
Maybe this helps a little bit.

I am no developer and started looking for an intercom solution. If you finished that widget that would be fantastic!

Did you open a Pull Request for this ???
If not, please do so.

1 Like

No, I didn’t. I’m still testing and fixing a few things. Once I’m done I surely will.

1 Like

So, I extended and finished the first version of this SIP widget.
Changes:
It can now be used as intercom (i.e. outgoing calls).

I think I found a neat way to solve this: To set the individual credentials for a device you just long-touch the widget on that device and it will open a configuration popup, whose values will be saved to local browser storage (I (ab)used the WidgetConfigPopup for this). Since F7 doesn’t cover this for long mouse presses, the same popup will be shown when you click the widget in edit mode.
The local config also allows you to individually define call destinations for up to 4 (quick) dial buttons

I was able to fix this by using F7’s pageBeforeOut event, instead of Vue’s lifecycle hooks.

Outstanding:

  • video support
  • “announcement” mode: make announcement to another or all stations (technically an auto-answer on the announcement clients). Could be used to speak to other rooms or floors, e.g. to announce “lunch is ready!”

I think it’s ready in its first version, so I’ll open a pull request soon.

2 Likes

This is really interesting for me. Asterisk already in use, so… why not use it inside ΟΗ !

You have a SIP door camera/ringbell ?

@hubsif Looks great to me, would be great if we could get this merged into openhab-webui.

Any progress on testing and any chance of having a PR?

Little update from my site:
I started working on a SIP Client integration into the MainUI on my own.

PR is open now: [WIP] New SIP client component & widget by florian-h05 · Pull Request #1453 · openhab/openhab-webui · GitHub

Hi @florian-h05 !

Thank you for taking this up! By now I didn’t quite find the time to test and finish it properly. Perhaps I can at least find some time to have a look at your improvements.

Hello @hubsif,

your work here made it much easier for me to get a starting point.
My PR includes a much more general SIP Client component and card widget, that is just for phoning with one number and no intercom functionality between multiple openHAB clients.

I already got @digitaldan at the PR for some testing, but would be great if you could also review.

I am currently try to build the latest version of openhab/openhab-webui to do some further development (with blockly).

However when I run “npm start” on the clean checkout (even on main and not my branch) and then call http://localhost:8080/ it throws an error related to jssips as follows:

ERROR in ./src/components/widgets/system/oh-sipclient.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/widgets/system/oh-sipclient.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'jssip' in '/Users/aaa.bbbb/Development/checkout/blockly-webui/openhab-webui/bundles/org.openhab.ui/web/src/components/widgets/system'
 @ ./src/components/widgets/system/oh-sipclient.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/widgets/system/oh-sipclient.vue?vue&type=script&lang=js&) 122:6-124:14
 @ ./src/components/widgets/system/oh-sipclient.vue?vue&type=script&lang=js&
 @ ./src/components/widgets/system/oh-sipclient.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/widgets/standard/oh-sipclient-card.vue?vue&type=script&lang=js&
 @ ./src/components/widgets/standard/oh-sipclient-card.vue?vue&type=script&lang=js&
 @ ./src/components/widgets/standard/oh-sipclient-card.vue
 @ ./src/components/widgets/standard/index.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/widgets/generic-widget-component.vue?vue&type=script&lang=js&
 @ ./src/components/widgets/generic-widget-component.vue?vue&type=script&lang=js&
 @ ./src/components/widgets/generic-widget-component.vue
 @ ./src/js/app.js
 @ multi ./src/js/app.js
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 2.33 KiB {0} [built]
    [./node_modules/lodash/lodash.js] 531 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ 「wdm」: Failed to compile.
node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Error: ENOENT: no such file or directory, stat '/.VolumeIcon.icns'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: '/.VolumeIcon.icns'
}

I am hesitant to run npm update because @ysc told me once to be very careful with it (it will not run through anyway because of some mismatch in echarts…

Note, I am running the frontend against the backend which is on version openHAB 3.4.0.M1

Does anyone know why I get this error and how I can fix this to start development?

Hi Stefan,
Just a guess: Perhaps you just forgot to run ‘npm install’ for your node_modules to reflect the changed package.json (and thereby get the jssip module installed)?

Yep but especially a general “npm install” yannick warned me about in particular. But you are right because I did a dedicated

npm install jssip

and now it works!

Thank you :hugs: @hubsif for the very quick response and the right hint!

You might have mixed up something:
When you run npm install (without any arguments), all modules will get installed as recorded in the package-lock.json file. This is required whenever the modules change and is safe to run. It’s actually THE mechanism to ensure everybody has the very same module tree installed.
It’s much different from npm update [<package>], which either updates the provided package including(!) its dependencies if required, or all packages. After this your modules will have different versions and your setup might become broken.

4 Likes

How to setup Asterisk for WebRTC and how to troubleshoot the connection? Installed and enabled WebRTC in Asterisk, enabled WebRTC in browser, both Openhab and Asterisk tell me that calls not supported in browser.

Hi guys,
First of all, many thanks to everyone involved for this great extension!

I just have one request, could someone redesign the widget ?

It’s not nice to have to drag the widget big enough to see something when the video is activated :slight_smile:

It would be better to keep the widget simple and small (only the status symbol of the handset), only after answering the call should a popup pop up with the actual video, with the option to end the call or open the door via dtmf.

I’ve already opened an issue that clarifies the design issue

1 Like