Skip to content

Image or Stream

George Joseph edited this page Apr 4, 2021 · 3 revisions

Derived from Element -> Widget

"Image" isn't just for still images. It's also used for embedding Motion JPEG (MJPEG) video streams!

Here's an example of how to display a 640x480 MJPEG stream from "ustreamer".

{
	"id": "video_html",
	"type": "image",
	"src": "http://duet3:8080/stream",
	"alt": "Text to display if the stream can't be played",
	"style": {
		"width": "640px",
		"height": "420px",
		"border": "2px solid red",
	}
},

This example is for a webcam that provides still image snapshots. "refresh_seconds" sets how often DueUI should refresh the image.

Do NOT use "refresh_seconds" on an MJPEG stream. Your streaming server won't like it. :)

{
	"id": "video_html",
	"type": "image",
 	"src": "http://mywebcam/image/jpeg.cgi",
	"refresh_seconds": 5,
	"alt": "Text to display if the stream can't be played",
	"style": {
		"width": "640px",
		"height": "420px",
		"border": "2px solid red",
	}
},

If you want to stream video in other formats, use the HTML widget and construct your own "" element. There are too many variations for me to create a specific widget for it.

Clone this wiki locally