Minimal QML example to fetch video and mavlink data from BlueOS

blueos.qml

import QtQuick 2.7
import QtQuick.Controls 2.3
import QtMultimedia 5.8
import QtWebSockets 1.15

Item {
    id: parentLayout
    width: 640
    height: 400

    // The correct is to have a model that is populated with all rtsp streams in http://blueos.local:6020/streams
    Column {
        Video {
            id: video
            width: 300
            height: 300
            source: "rtsp://blueos.local:8554/video_stream__dev_video0"
            autoPlay: true
            onStatusChanged: {
                print(`Video status: ${status}`)
            }
        }

        Video {
            id: video2
            width: 300
            height: 300
            source: "rtsp://blueos.local:8554/video_stream_ball"
            autoPlay: true
            onStatusChanged: {
                print(`Video status: ${status}`)
            }
        }
    }

    Column {
        Label {
            id: rollLabel
        }
        Label {
            id: pitchLabel
        }
        Label {
            id: yawLabel
        }
    }

    Timer {
        running: video.status == MediaPlayer.InvalidMedia; repeat: true; interval: 200;
        onTriggered: {
            video.play()
        }
    }

    Timer {
        running: video2.status == MediaPlayer.InvalidMedia; repeat: true; interval: 200;
        onTriggered: {
            video2.play()
        }
    }

    WebSocket {
        id: socket
        url: "ws://blueos.local:6040/ws/mavlink"
        onTextMessageReceived: {
            const pack = JSON.parse(message)
            const mavMessage = pack.message
            switch (mavMessage.type) {
                case 'ATTITUDE':
                    const roll = mavMessage.roll
                    const pitch = mavMessage.pitch
                    const yaw = mavMessage.yaw
                    rollLabel.text = `Roll: ${roll * 180 / Math.PI}`
                    pitchLabel.text = `Pitch: ${pitch * 180 / Math.PI}`
                    yawLabel.text = `Yaw: ${yaw * 180 / Math.PI}`
            }
        }
        onStatusChanged: {
            switch (socket.status) {
                case WebSocket.Error:
                    console.log(`Error: ${socket.errorString}`)
                    break
                case WebSocket.Open:
                    console.log('Socket open')
                    break
                case WebSocket.Closed:
                    console.log('Socket closed')
                    break
                default:
                    console.log(socket.status)
            }
        }
        active: true
    }
}