app-xiangsonghua/app-saas-src/script/feature/camera.js

apiready = function() {
    var ctrl = {
        init: {},
        bind: {},
        // 为了确保视频加载完成 延时显示
        delay: 5000,
        definition: 'low',
        cameraIndex: 0
    }

    ctrl.init = function() {
        CommonModel.fitInStatusBar();

        ctrl.bind();
        ctrl.getCameraList();
    }
    ctrl.bind = function() {
        //点击返回按钮
        $api.addEvt($api.dom("#back"), "touchend", function() {
                api.closeWin();
            })
            // 清晰度切换
        ctrl.bindDefinitionBtnEvent();
    }

    ctrl.getCameraList = function() {
        //显示载入动画
        api.showProgress({
            title: '载入中...',
            text: '请稍后',
            modal: false
        });
        var url = '/ems/rest/camera/h5/page';
        var args = {
            page: 1,
            pageSize: 9999,
            prId: $api.getStorage('powerRoom')['prId']
        }

        $api.get(url, args, function(data, err) {
            if (err) {
                api.hideProgress();
                toast("网络请求失败");
            } else {
                if (!data.code || data.code != "200") {
                    toast("服务器响应错误" + (data.code ? ("，错误码：" + data.code) : ""));
                    api.hideProgress();
                    $api.css($api.dom('#content'), 'display:none');
                    $api.css($api.dom('#camera-empty-tips'), "display:block");
                } else {
                    api.hideProgress();
                    ctrl.cameraList = data.body.records[0]['cameras'];
                    // 判断当前配电室是否有监控视频
                    if (ctrl.cameraList.length && ctrl.cameraList.length == 0) {
                        $api.css($api.dom('#content'), 'display:none');
                        $api.css($api.dom('#camera-empty-tips'), "display:block");
                        return false;
                    }
                    ctrl.renderCameraList();
                    // ctrl.initPlayer();
                    // ctrl.startPlay();
                    ctrl.play();
                }
            }
        })
    }

    // 渲染 摄像头列表按钮
    ctrl.renderCameraList = function() {
        var domStr = '';
        ctrl.cameraList.forEach(function(item, index) {
            if (index == 0) {
                // domStr += `<input class="btn btn-highlight" type="button" value="${item.channelName}" ctvalue="${index}" />`;
                domStr += '<input class="btn btn-highlight" type="button" value="';
                domStr += item.channelName;
                domStr += '" ctvalue="';
                domStr += index;
                domStr += '" />';
            } else {
                // domStr += `<input class="btn" type="button" value="${item.channelName}" ctvalue="${index}" />`;
                domStr += '<input class="btn" type="button" value="';
                domStr += item.channelName;
                domStr += '" ctvalue="';
                domStr += index;
                domStr += '" />';
            }
        })
        $('#video-group').html(domStr);
        ctrl.bindCameraBtnEvent();
    }

    // // 初始化视频播放器
    // ctrl.initPlayer = function() {
    //     ctrl.video = document.getElementById("video");
    //     ctrl.player = new Hls();
    //     ctrl.player.attachMedia(ctrl.video);
    //
    //     ctrl.player.on(Hls.Events.MANIFEST_PARSED, function() {
    //         ctrl.video.play();
    //     });
    // }
    //
    // // 开始播放视频
    // ctrl.startPlay = function() {
    //     ctrl.stopPlay();
    //     if (!ctrl.cameraList.length) {
    //         alert('未发现视频源');
    //         return false;
    //     }
    //     ctrl.loadSource(ctrl.player);
    // }
    //
    // // 停止播放视频
    // ctrl.stopPlay = function() {
    //     ctrl.player.stopLoad();
    // }

    // ctrl.loadSource = function(toLoadPlayer) {
    //     var url = null;
    //     var source = ctrl.cameraList[ctrl.cameraIndex];
    //
    //     // 如果清晰度为流畅 优先播放低清晰度视频
    //     if (ctrl.definition == 'low') {
    //         if (source.liveAddress) {
    //             url = source.liveAddress;
    //         } else {
    //             url = source.hdAddress;
    //         }
    //     } else {
    //         // 如果清晰度为高清，优先播放高清视频，没有高清视频源则播放流畅
    //         if (source.hdAddress) {
    //             url = source.hdAddress;
    //         } else {
    //             alert('没有高清视频源!')
    //             url = source.liveAddress;
    //         }
    //     }
    //     toLoadPlayer.loadSource(url);
    // }

    // 摄像头列表按钮 添加事件
    ctrl.bindCameraBtnEvent = function() {
            var btnList = $('#video-group').children();

            for (var i = 0; i < btnList.length; i++) {
                var btn = $(btnList[i]);
                btn.on('touchend', ctrl.switchButtonClicked);
            }
        }
        // 摄像头列表按钮 点击
    ctrl.switchButtonClicked = function() {
        var sender = $(this);
        var brothers = sender.parent().children();
        for (var i = 0; i < brothers.length; i++) {
            var inputElement = $(brothers[i]);
            inputElement.removeClass("btn-highlight");
        }
        sender.addClass("btn-highlight");

        ctrl.cameraIndex = sender.attr('ctvalue');
        // ctrl.initPlayer();
        // ctrl.startPlay();
        ctrl.play();
    }

    // 清晰度 按钮 添加事件
    ctrl.bindDefinitionBtnEvent = function() {
        var btns = $('#definition').children();
        for (var i = 0; i < btns.length; i++) {
            var btn = $(btns[i]);
            btn.on('touchend', ctrl.switchDefinition);
        }
    }

    ctrl.switchDefinition = function() {
        var sender = $(this);
        var brothers = sender.parent().children();
        for (var i = 0; i < brothers.length; i++) {
            var inputElement = $(brothers[i]);
            inputElement.removeClass("btn-highlight");
        }
        sender.addClass("btn-highlight");
        ctrl.definition = sender.attr('ctvalue');
        // ctrl.initPlayer();
        // ctrl.startPlay();
        ctrl.play();
    }

    // 11111111
    ctrl.play = function () {
      ctrl.video = document.getElementById("video");
      var url = null;
      var source = ctrl.cameraList[ctrl.cameraIndex];

      // 如果清晰度为流畅 优先播放低清晰度视频
      if (ctrl.definition == 'low') {
          if (source.liveAddress) {
              url = source.liveAddress;
          } else {
              url = source.hdAddress;
          }
      } else {
          // 如果清晰度为高清，优先播放高清视频，没有高清视频源则播放流畅
          if (source.hdAddress) {
              url = source.hdAddress;
          } else {
              alert('没有高清视频源!')
              url = source.liveAddress;
          }
      }
      ctrl.video.src = url;
      ctrl.video.load();
      ctrl.video.play();
    }
    // 11111111

    ctrl.init();
}