flvdemo/flv/indexcontroller.js

$(document).ready(function () {
  let token =
    "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjb21wYW55SWQiOiI1MDc0NDY2NjU1NjUyNDU0NDAiLCJsb2dpbk5hbWUiOiJhZG1pbiIsImN1cnJlbnRUaW1lTWlsbGlzIjoiMTY4MTU2OTMzNTI3MiIsImV4cCI6MTY4MTU3NjUzNSwidXNlcklkIjoiNTEzNjA0MzE2MTQ1NzE3MjQ4In0.xSg5C0tqCQfDbKnHHLKMGPgWa9k3dnfb5QmpJSOG-tg";

  function login() {
    var domain = $("#domain").val();
    var loginName = $("#loginName").val();
    var pass = $("#pass").val();
    //  var password = $.base64.encode(pass);
    var password = pass;
    $.post(
      domain + "/system/login",
      { loginName: loginName, password: password, type: 1 },
      function (data, status) {
        if (status == "success") {
          if (data.errorCode == 0) {
            token = data.data;
          } else {
            alert(data.desc);
          }
        }
      }
    );
  }

  login();

  function nowPlay() {
    var domain = $("#domain").val();
    var deviceId = $("#deviceId").val();
    var channel = $("#channel").val();

    var nowDataRate = $("#nowDataRate").val();
    var nowDataType = $("#nowDataType").val();

    $.ajax(domain + "/core/Jtt808Order/videoStart", {
      type: "post",
      dataType: "json",
      contentType: "application/json",
      data: JSON.stringify({
        channel: channel,
        deviceId: deviceId,
        dataRate: nowDataRate,
        dataType: nowDataType,
      }),
      headers: { Authorization: token },
      success: function (data, status) {
        if (status == "success") {
          if (data.errorCode == 0) {
            $("#curDeviceId").html(deviceId);
            $("#curChannel").html(channel);
            var playurl =
              domain +
              "/video/now/" +
              deviceId +
              "-" +
              channel +
              "/time1681547649168";
            $("#playurl").val(playurl);
            //alert("实时播放");
            play();
          } else {
            alert(data.desc);
          }
        }
      },
    });
  }

  function nowControll() {
    var domain = $("#domain").val();
    var deviceId = $("#deviceId").val();
    var channel = $("#channel").val();

    var nowControllOrder = $("#nowControllOrder").val();
    var audioVideoType = $("#audioVideoType").val();
    var controllDataRate = $("#controllDataRate").val();

    $.ajax(domain + "/core/Jtt808Order/videoControl", {
      type: "post",
      dataType: "json",
      contentType: "application/json",
      data: JSON.stringify({
        channel: channel,
        deviceId: deviceId,
        controll: nowControllOrder,
        audioVideoType: audioVideoType,
        dataRate: controllDataRate,
      }),
      headers: { Authorization: token },
      success: function (data, status) {
        if (status == "success") {
          if (data.errorCode == 0) {
            // 0 关闭音视频，1 切换码流 ， 2 暂停该通道所有流的传输 ，3 恢复该通道所有流的传输 ，4 关闭双向对讲
            if (nowControllOrder == 0) {
              alert("关闭音视频");
              close();
            } else if (nowControllOrder == 1) {
              //alert("切换码流");
              var playurl = $("#playurl").val();
              switchURL(playurl);
            }
          } else {
            alert(data.desc);
          }
        }
      },
    });
  }

  function hisOrder() {
    var domain = $("#domain").val();
    var deviceId = $("#deviceId").val();
    var channel = $("#channel").val();
    var start = $("#start").val();
    var end = $("#end").val();

    var hisPlayback = $("#hisPlayback").val();
    var hisFastTimes = $("#hisFastTimes").val();

    $.ajax(domain + "/core/Jtt808Order/videoHis", {
      type: "post",
      dataType: "json",
      contentType: "application/json",
      data: JSON.stringify({
        channel: channel,
        dataRate: 0,
        dataType: 0,
        deviceId: deviceId,
        startTime: start,
        endTime: end,
        fastTimes: hisFastTimes,
        playback: hisPlayback,
        storageType: 0,
      }),
      headers: { Authorization: token },
      success: function (data, status) {
        if (status == "success") {
          if (data.errorCode == 0) {
            var playurl =
              domain +
              "/video/history/" +
              deviceId +
              "-" +
              channel +
              "/time1681547649168";
            $("#playurl").val(playurl);
            close();
            play();

            $("#curDeviceId").html(deviceId);
            $("#curChannel").html(channel);
          } else {
            alert(data.desc);
          }
        }
      },
    });
  }

  function hisControl() {
    var domain = $("#domain").val();
    var deviceId = $("#deviceId").val();
    var channel = $("#channel").val();
    // 回放控制方式,0：开始回放；1：暂停回放；2：结束回放；3：快进回放；4：关键帧快退回放；5：拖动回放；6：关键帧播放
    var hisControlPlayback = $("#hisControlPlayback").val();
    var hisControlFastTimes = $("#hisControlFastTimes").val();
    var hisControlTime = $("#hisControlTime").val();

    $.ajax(domain + "/core/Jtt808Order/videoHisControl", {
      type: "post",
      dataType: "json",
      contentType: "application/json",
      data: JSON.stringify({
        deviceId: deviceId,
        channel: channel,
        playback: hisControlPlayback,
        fastTimes: hisControlFastTimes,
        curTime: hisControlTime,
      }),
      headers: { Authorization: token },
      success: function (data, status) {
        if (status == "success") {
          if (data.errorCode == 0) {
            if (hisControlPlayback == 5) {
              alert("拖动回放");
              close();
              play();
            } else if (hisControlPlayback == 2) {
              alert("结束回放");
              close();
            } else if (hisControlPlayback == 3) {
              alert("快进回放");
              close();
              play();
            }
          } else {
            alert(data.desc);
          }
        }
      },
    });
  }

  var flvPlayer;

  function close() {
    if (flvPlayer != null) {
      console.log("close");
      flvPlayer.pause(); //暂停播放数据流

      flvPlayer.unload(); //取消数据流加载
      flvPlayer.detachMediaElement(); //将播放实例从节点中取出
      flvPlayer.destroy(); //销毁播放实例
    }
  }

  function replay() {
    if (flvPlayer != null) {
      //flvPlayer.pause(); //暂停播放数据流
      //flvPlayer.unload(); //取消数据流加载
      //flvPlayer.load({ reset: true }); //加载
      //flvPlayer.play();
      // close();
      // play();
    } else {
      play();
    }
  }

  function play() {
    var playurl = $("#playurl").val();
    if (playurl != null && playurl != "") {
      var player = document.getElementById("videoElement");

      if (flvjs.isSupported()) {
        flvPlayer = flvjs.createPlayer({
          isLive: true,
          type: "flv",
          url: playurl,
          // 是否启用 worker，开启后会使用 web worker 解析数据，提高性能
          //enableWorker: true,
          // 是否启用媒体源缓存功能
          enableStashBuffer: false,
          stashInitialSize: 128, // 减少首桢显示等待时长
        });

        flvPlayer.attachMediaElement(player);
        flvPlayer.load(); //加载
        flvPlayer.play();
      }
    }
  }

  var otherFlvPlayer;
  function otherPlay() {
    var otherPlayurl = $("#otherPlayurl").val();
    if (otherPlayurl != null && otherPlayurl != "") {
      var player = document.getElementById("otherVideoElement");

      if (flvjs.isSupported()) {
        otherFlvPlayer = flvjs.createPlayer({
          isLive: true,
          type: "flv",
          url: otherPlayurl,
          // 是否启用 worker，开启后会使用 web worker 解析数据，提高性能
          //enableWorker: true,
          // 是否启用媒体源缓存功能
          enableStashBuffer: false,
          stashInitialSize: 128, // 减少首桢显示等待时长
        });

        otherFlvPlayer.attachMediaElement(player);
        otherFlvPlayer.load(); //加载
        otherFlvPlayer.play();
      }
    }
  }

  function destroyOther() {
    if (otherFlvPlayer != null) {
      console.log("destroyOther");
      otherFlvPlayer.pause(); //暂停播放数据流

      otherFlvPlayer.unload(); //取消数据流加载
      otherFlvPlayer.detachMediaElement(); //将播放实例从节点中取出
      otherFlvPlayer.destroy(); //销毁播放实例
      otherFlvPlayer = null;
    }
  }

  $("#login").click(function () {
    login();
  });

  $("#nowPlay").click(function () {
    nowPlay();
  });

  $("#nowControll").click(function () {
    nowControll();
  });

  $("#hisOrder").click(function () {
    hisOrder();
  });

  $("#hisControl").click(function () {
    hisControl();
  });

  $("#close").click(function () {
    close();
  });

  $("#play").click(function () {
    play();
  });

  $("#otherPlay").click(function () {
    otherPlay();
  });

  $("#destroyOther").click(function () {
    destroyOther();
  });
});