websocket播放rtsp方案之HTML实现

1前言

         之前本来想偷懒等前端哥们儿把代码写出来然后搞一下；但是由于各种原因还是没能等到(项目采用了其它方案)；不过还是要感谢前端朋友的指教，太久没写了，js都不会写了；多谢前端哥们儿的代码；让该demo得以完整！

        不废话，上才艺！

2代码实现

controller

@Slf4j
@Controller
public class IndexController {
    @Autowired
    RTSPToImage RTSPToImage;

    @GetMapping("/test")
    public void test() {
        RTSPToImage.live();
        return;
    }

    @GetMapping("/")
    public String index() {
        RTSPToImage.live();
        return "index";
    }

}

html

js

(function (window) {
    "use strict";
    let Event = {
        wsMessageEvent: function (message) {
            console.log(message)
        }
    }, dftOpt = {
        protocol: (window.location.protocol == 'http:') ? 'ws://' : 'wss://'
        , host: window.location.host
        , port: '80'
        , path: ''
        , isReConect: false
        , wsMessageEvent: Event.wsMessageEvent
    }, Util = {
        arrayLike(arrayLike) {
            Array.from(arrayLike)
        },
        isArray(arr) {
            Array.isArray(arr)
        },
        forEach(array, iterate) {
            let index = -1
                , length = array.length;
            if (typeof iterate != 'function') {
                return array;
            }
            while (++index < length) {
                iterate.call(array, array[index], index);
            }
        },
        isPlainObject(obj) {
            let flag = false;
            if (!obj || typeof obj != 'object') {
                return flag;
            }
            if (obj.constructor.prototype.hasOwnProperty("isPrototypeOf")) {
                flag = true;
            }
            return flag;
        },
        extend(...args) {
            if (args.length <= 0) {
                return
            };
            let target = args[0];
            if (args.length == 1) {
                return args[0]
            };
            this.forEach(args, (arg, i) => {
                if (i != 0) {
                    var keys = Object.keys(arg);
                    this.forEach(keys, (key, i) => {
                        var val = arg[key];
                        if (this.isPlainObject(val) || this.isArray(val)) {
                            var newTarget = this.isArray(val) ? [] : {};
                            target[key] = this.extend(newTarget, val);
                        } else {
                            target[key] = val;
                        }
                    });
                }
            });
            return target;
        }
    }, Ws = function (opt) {
        let config = this.config = Util.extend({}, dftOpt, opt);
        //接口地址url
        this.url = config.host === "" || config.host === "" ?
            config.protocol + config.path:
            config.protocol + config.host + ':' + config.port + config.path;
        //心跳状态  为false时不能执行操作 等待重连
        this.isHeartBeat = false;
        //重连状态  避免不间断的重连操作
        this.isReconnect = config.isReConect;
        //发送的消息
        this.curSendMes = null;
        //响应的信息
        this.message = null;
        //创建webSocket
        this.ws;
        //初始化websocket
        this.initWs = function () {
            //创建WebSocket
            let ws = this.ws = new WebSocket(this.url);
            // ws.binaryType = "arraybuffer";
            //Ws连接函数：服务器连接成功
            ws.onopen = (e) => {
                console.log(`与${this.config.host}:${this.config.port}${this.config.path}连接已建立...`)
                this.isHeartBeat = true;
                //发布事件
                this.send();
            };
            //Ws消息接收函数：服务器向前端推送消息时触发
            ws.onmessage = (e) => {
                //处理各种推送消
                this.message = e.data;
                config.wsMessageEvent.apply(this, [e.data]);
            }
            //Ws异常事件：Ws报错后触发
            ws.onerror = (e) => {
                this.isHeartBeat = false;
                this.reConnect();
            }
            //Ws关闭事件：Ws连接关闭后触发
            ws.onclose = (e) => {
                console.log('连接已关闭...');
                alert("websocket连接已关闭，按F5尝试重新刷新页面");
                this.isHeartBeat = false;
                ws = null;
                this.reConnect();
            };
        };
        this.initWs();
    };

    //重新连接
    Ws.prototype.reConnect = function () {
        //不需要重新连接，直接返回
        if (!this.isReconnect) return;
        this.isReconnect = true;
        //没连接上 会一直重连
        setTimeout(() => {
            this.initWs()
            this.isReconnect = false;
        }, 5000);
    }

    //发送消息
    Ws.prototype.send = function (content) {
        this.curSendMes = content || this.curSendMes;
        if(this.curSendMes == null){
            return;
        }
        if (this.isHeartBeat) {
            this.ws.send(this.curSendMes);
        }
    }
    window.Ws = Ws;
})(window);

 3测试验证

图片上有没有看见我帅气的脸，哈哈！到此希望摄像头相关的业务能告一段落。