方案一

ZLmediakit + mpegts.js

推流后，zlm将流转换成flv或者ts格式的视频流，然后通过mpegts.js绑定到video播放

    registerPlayer() {
      if (mpegts.getFeatureList().mseLivePlayback) {
        let playerInsId = `player${this.playerid}`;
        this.mpegtsPlayerIns = mpegts.createPlayer(
          {
            type: 'mse',
            isLive: true,
            url: this.playerUrl,
            hasVideo: true,
            hasAudio: true,
          },
          {
            liveBufferLatencyChasing: true,
            liveBufferLatencyChasingOnPaused: true,
            liveBufferLatencyMaxLatency: 1.0,
            liveBufferLatencyMinRemain: 0.5,
          }
        );
        this.mpegtsPlayerIns.attachMediaElement(this.$refs[playerInsId]);
        this.mpegtsPlayerIns.load();
        this.mpegtsPlayerIns.play();
        this.mpegtsPlayerIns.on(mpegts.Events.ERROR, () => {
          this.$emit('error');
        });
      }
    },

经过测试这种方案延迟在1s左右，mpegts.js由flv.js演进而来，支持wbsocket，相对比开源版本的jessibuca,这种方案延迟更低，还有更优秀的自动延迟追赶机制

https://github.com/xqq/mpegts.js

方案二

ZLmediakit/transcode + ZLMRTCClient.js

推流后，获取zlm的webrtc流，通过ZLMRTCClient.js绑定到video进行播放

    play(url) {
      console.log('webrtc播放url:', url);
      this.webrtcPlayer = new ZLMRTCClient.Endpoint({
        element: this.playerIns, // video 标签
        debug: false, // 是否打印日志
        zlmsdpUrl: url, //流地址
        simulecast: false,
        useCamera: false,
        audioEnable: true,
        videoEnable: true,
        recvOnly: true,
        usedatachannel: false,
      });
      console.log('webrtcPlayer 实例', this.webrtcPlayer);
      this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, e => {
        // ICE 协商出错
        console.error('ICE 协商出错');
        this.eventcallbacK('ICE ERROR', 'ICE 协商出错');
        this.$emit('error');
      });

      this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, e => {
        //获取到了远端流，可以播放
        console.log('播放成功', e.streams);
        this.eventcallbacK('playing', '播放成功');
        this.setMute(this.muted);
      });

      this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, e => {
        // offer anwser 交换失败
        console.error('offer anwser 交换失败', e);
        this.eventcallbacK('OFFER ANSWER ERROR ', 'offer anwser 交换失败');
        if (e.code == -400 && e.msg == '流不存在') {
          console.log('流不存在');
          this.timer = setTimeout(() => {
            this.webrtcPlayer.close();
            this.play(url);
          }, 100);
        }
        this.$emit('error');
      });

      this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, s => {
        // 获取到了本地流
        // document.getElementById('selfVideo').srcObject=s;
        this.eventcallbacK('LOCAL STREAM', '获取到了本地流');
      });

      // 添加连接状态监听
      this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, state => {
        console.log('连接状态变化:', state);
        if (state === 'disconnected' || state === 'failed' || state === 'closed') {
          // 通知断流
          this.$emit('disconnect');
          if (this.disconnectTimer) {
            clearTimeout(this.disconnectTimer);
          }
          this.disconnectTimer = setTimeout(() => {
            console.error('视频流断连超过5秒');
            this.eventcallbacK('DISCONNECT', '视频流断连');
            this.pause();
          }, 5000);
        } else if (state === 'connected') {
          if (this.disconnectTimer) {
            clearTimeout(this.disconnectTimer);
            this.disconnectTimer = null;
          }
        }
      });
    },

这种方案延迟1s以内，也能支持aac推流的播放，但是代码相对较旧，如需更新，需要自己去合并代码更新

方案三

ZLmediakit + webrtc-streamer

是webrtc-streamer 将zlm的rtsp流处理成webrtc,然后使用webrtcstreamer.js绑定到video播放

    registerPlayer() {
      this.webRtcServer = new WebRtcStreamer('streamplayer', '<http://localhost:8000>');
      this.webRtcServer.connect('rtsp://192.168.0.6:554/app-feedback/112', 'rtsp://192.168.0.6:554/app-feedback/112','rtptransport=tcp&timeout=60',null,null);
    },

这种方案延迟也是1s以内，但是有个问题，支持的编码有限，仅支持以下音频编码

audio codecs:audio/opus,audio/ISAC,audio/G722,audio/PCMU,audio/PCMA,audio/CN,audio/telephone-event

不支持aac编码，导致只有画面没有声音，如果想要有声音，需要自己进行转码播放