Implement mjpeg stream in sitemap

Setup, Configuration and Use Items & Sitemaps
1

Hey everybody,

i am trying to implement an mjpeg stream into my sitemap. Doesnt work correctly, ofc :wink:
I got an IP cam which i implemented into synology surveillance station. With the Surveillance station binding i am able to get an URL where i can see the stream as mjpeg. I tried this url within chrome browser and it works.
It looks like this:

(http://192.168.178.103:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Stream.VideoStreaming&version=1&method=Stream&format=mjpeg&cameraId=12&StmKey="4ca86e13bb8e4ed548be7b70bb80aa23")

In sitemap i chose video card, put in the url and typed mjpeg into the encoding box. But in OH App the video doesn´t work.
I tried with a webview card which works indeed, but i can only see a part of the picture, even when i set “height” to 20.
As the URL seems to work i might be doing somethin wrong.
Can you help me?

2

What is the URL you are using to view the sitemap with? In particular is it HTTP or HTTPS? Many browsers these days do not allow you to mix the two, they all have to be https if the main webpage your viewing is using https. This is called mixed content.

3

I am using the OpenHab App on Android and iOS.

4

You can also test Basic UI in a browser to see if this is specific to Android / iOS apps or maybe a wrong definition of your sitemap.

5

Okay, i tried the following:

I added three items into my sitemap → Image, Video and WebView.
I put in the url:

http://192.168.178.103:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Stream.VideoStreaming&version=1&method=Stream&format=mjpeg&cameraId=12&StmKey="4ca86e13bb8e4ed548be7b70bb80aa23"

When i open the sitemap on my computer (Mac, Chrome browser), i can see nothing where the image should be, nothing where the Video should be and an errorcode where WebView is:
{“error”:{“code”:105},“success”:false}

In the Android app i see nothing exept the webview, but not fullscreen. I see footage, so basically it seems to work.

I am lost :wink:

6

Hey, it is http:

http://192.168.178.67:8080/basicui/app
7

Please show the content of your sitemap and do screen captures showing the result.

8

Here my code for a part of my sitemap:

    Frame label="TEST" {
        Image url="http://192.168.178.103:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Stream.VideoStreaming&version=1&method=Stream&format=mjpeg&cameraId=12&StmKey="4ca86e13bb8e4ed548be7b70bb80aa23"" refresh=1000
        Video url="http://192.168.178.103:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Stream.VideoStreaming&version=1&method=Stream&format=mjpeg&cameraId=12&StmKey="4ca86e13bb8e4ed548be7b70bb80aa23"" encoding="mjpeg"
        Webview url="http://192.168.178.103:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.Stream.VideoStreaming&version=1&method=Stream&format=mjpeg&cameraId=12&StmKey="4ca86e13bb8e4ed548be7b70bb80aa23"" height=15
    }
}

And here the result in the android app:
Under the frame TEST i see two blank rows and under this the webframe item which is working.

Screenshot_20241104-213241
Screenshot_20241104-2132411440×3120 81 KB