Capturar objetos de websocket por separado

[SidP]

Hola comunidad,
tengo un webscoket sirviendo un stream de imagenes(binarias) para generar un video y este código javascript para mostrar el mismo

Código:

    var frames = document.getElementById('frames');
	var ws = new WebSocket( 'ws://127.0.0.1:8083/' );
        var reader = new FileReader();
        ws.onmessage = function(evt) {
            reader.onload = function(e) {
                frames.src = e.target.result;
            };
            reader.readAsDataURL(evt.data);
        }

hasta ahí funciona todo bien, luego necesito poner en el websocket un objeto JSON también para procesarlo en el cliente, el problema es que cuando pongo el JSON en el webscoket el vídeo comienza a parpadear.

Código:

{
    "colorsArray":[{
            "colorName":"red",
            "hexValue":"#f00"
        },
        {
            "colorName":"green",
            "hexValue":"#0f0"
        }
]
}

Como pudiera coger esos dos objetos por separados(json + imagen) en el cliente, para mostrar las imágenes y trabajar aparte con el json.

Gracias de antemano.