html通过websocket播放后端推送的rtsp流

前一篇文章介绍了java通过ffmpeg来解码。java接受rtsp流解码，推送给前端，实现播放实时流_xzm2011023的博客-CSDN博客

那么通过websocket推过来的流我们应该怎么处理呢？这需要前端页面展示的插件，一般声纹插件用的是Wavesurfer或者是Musicvisualizer来进行声纹可视化处理。

function playRtmp(deviceId){
            ws = new WebSocket('ws://'+ip+':8093/ws/rt/'+deviceIp +"_"+ dateRtmp);
            ws.binaryType = 'arraybuffer';
            ws.onopen = function(p) {
                console.log(p)
            }
            var isFirst = true;
            ws.onmessage = function(arr) {
                if (arr.data instanceof ArrayBuffer) {
                    if (isFirst) {
                        isFirst = false;
                        setTimeout(function() {
                            mv.play(arr.data);
                        }, 20);
                    } else {
                        mv.play(arr.data);
                    }
                } else {
                    console.log(arr);
                    isFirst = true;
                }
            }
            ws.onerror = function () {
                showTips("实时流播放失败！");
                if(mv){
                    mv.stop();
                }
            }
            ws.onclose = function () {
                console.log("ws关闭！");
                if(mv){
                    mv.stop();
                }
            }
        }

 此处放上获取的rtsp流通过webscoket获取到之后的播放，声纹的可视化页面不懂的可以联系我+v:18709843023。