Merge pull request #14 from lawrencehj/wvp-28181-2.0

648540858

2020-12-17 bc2e5e7a37876b597668db5d8c4af273deca3aea

Merge pull request #14 from lawrencehj/wvp-28181-2.0

修正上级注册的代码

 src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/SIPRequestHeaderProvider.java

@@ -173,7 +173,7 @@
    }





    public Request createRegisterRequest(@NotNull ParentPlatform platform, String fromTag, String viaTag) throws ParseException, InvalidArgumentException, PeerUnavailableException {

    public Request createRegisterRequest(@NotNull ParentPlatform platform, long CSeq, String fromTag, String viaTag) throws ParseException, InvalidArgumentException, PeerUnavailableException {

        Request request = null;

        String sipAddress = sipConfig.getSipIp() + ":" + sipConfig.getSipPort();

        //请求行

@@ -206,7 +206,7 @@
        MaxForwardsHeader maxForwards = sipFactory.createHeaderFactory().createMaxForwardsHeader(70);



        //ceq

        CSeqHeader cSeqHeader = sipFactory.createHeaderFactory().createCSeqHeader(1L, Request.REGISTER);

        CSeqHeader cSeqHeader = sipFactory.createHeaderFactory().createCSeqHeader(CSeq, Request.REGISTER);

        request = sipFactory.createMessageFactory().createRequest(requestLine, Request.REGISTER, callIdHeader,

                cSeqHeader,fromHeader, toHeader, viaHeaders, maxForwards);



@@ -214,12 +214,15 @@
                .createSipURI(platform.getDeviceGBId(), sipAddress));

        request.addHeader(sipFactory.createHeaderFactory().createContactHeader(concatAddress));



        ExpiresHeader expires = sipFactory.createHeaderFactory().createExpiresHeader(3600);

        request.addHeader(expires);



        return request;

    }



    public Request createRegisterRequest(@NotNull ParentPlatform parentPlatform, String fromTag, String viaTag,

                                         String callId, String realm, String nonce, String scheme) throws ParseException, PeerUnavailableException, InvalidArgumentException {

        Request registerRequest = createRegisterRequest(parentPlatform, fromTag, viaTag);

        Request registerRequest = createRegisterRequest(parentPlatform, 2L, fromTag, viaTag);



        CallIdHeader callIdHeader = (CallIdHeader)registerRequest.getHeader(CallIdHeader.NAME);

        callIdHeader.setCallId(callId);

@@ -233,8 +236,7 @@
        String RESPONSE = DigestUtils.md5DigestAsHex((HA1 + ":" + nonce + ":" +  HA2).getBytes());



        String authorizationHeaderContent = scheme + " username=\"" + parentPlatform.getDeviceGBId() + "\", " + "realm=\""

                + realm + "\", uri=\"" + uri  + "\", response=\"" + RESPONSE + "\", nonce=\""

                + nonce + "\"";

                + realm + "\", nonce=\"" + nonce + "\", uri=\"" + uri  + "\", response=\"" + RESPONSE + "\"" + ", algorithm=MD5";

        AuthorizationHeader authorizationHeader = sipFactory.createHeaderFactory().createAuthorizationHeader(authorizationHeaderContent);

        registerRequest.addHeader(authorizationHeader);




 src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommanderFroPlatform.java

@@ -52,7 +52,7 @@
        try {
            Request request = null;
            if (realm == null || nonce == null) {
                request = headerProvider.createRegisterRequest(parentPlatform, null, null);
                request = headerProvider.createRegisterRequest(parentPlatform, 1L, null, null);
            }else {
                request = headerProvider.createRegisterRequest(parentPlatform, null, null, callId, realm, nonce, scheme);
            }

 src/main/java/com/genersoft/iot/vmp/vmanager/platform/PlatformController.java

@@ -1,5 +1,6 @@
package com.genersoft.iot.vmp.vmanager.platform;

import com.alibaba.fastjson.JSONObject;
import com.genersoft.iot.vmp.common.PageResult;
import com.genersoft.iot.vmp.gb28181.bean.Device;
import com.genersoft.iot.vmp.gb28181.bean.ParentPlatform;
@@ -15,6 +16,8 @@
import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import com.genersoft.iot.vmp.conf.SipConfig;


@CrossOrigin
@RestController
@@ -29,6 +32,19 @@
    @Autowired
    private ISIPCommanderForPlatform commanderForPlatform;

    @Autowired
    private SipConfig sipConfig;

    @GetMapping("/platforms/serverconfig")
    public ResponseEntity<JSONObject> serverConfig() {
        JSONObject result = new JSONObject();
        result.put("deviceIp", sipConfig.getSipIp());
        result.put("devicePort", sipConfig.getSipPort());
        result.put("username", sipConfig.getSipId());
        result.put("password", sipConfig.getSipPassword());
        return new ResponseEntity<>(result, HttpStatus.OK);
    }

    @GetMapping("/platforms/{count}/{page}")
    public PageResult<ParentPlatform> platforms(@PathVariable int page, @PathVariable int count){


 web_src/src/components/platformEdit.vue

@@ -1,410 +1,418 @@
<template>
<div id="addlatform" v-loading="isLoging">
    <el-dialog title="添加平台" width="70%" top="2rem" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
        <div id="shared" style="text-align: right; margin-top: 1rem;">

            <el-row :gutter="24">
                <el-col :span="11">
                    <el-form ref="platform1" :rules="rules" :model="platform" label-width="160px" >
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="platform.name"></el-input>
                        </el-form-item>
                        <el-form-item label="SIP服务国标编码" prop="serverGBId">
                            <el-input v-model="platform.serverGBId" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="SIP服务国标域" prop="serverGBDomain">
                            <el-input v-model="platform.serverGBDomain" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="SIP服务IP" prop="serverIP">
                            <el-input v-model="platform.serverIP" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="SIP服务端口" prop="serverPort">
                            <el-input v-model="platform.serverPort" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="设备国标编号" prop="deviceGBId">
                            <el-input v-model="platform.deviceGBId" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="本地IP" prop="deviceIp">
                            <el-input v-model="platform.deviceIp" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="本地端口" prop="devicePort">
                            <el-input v-model="platform.devicePort" :disabled="true"></el-input>
                        </el-form-item>

                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form ref="platform2" :rules="rules" :model="platform" label-width="160px">
                        <el-form-item label="SIP认证用户名" prop="username">
                            <el-input v-model="platform.username"></el-input>
                        </el-form-item>
                        <el-form-item label="SIP认证密码" prop="password">
                            <el-input v-model="platform.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="注册周期(秒)" prop="expires">
                            <el-input v-model="platform.expires"></el-input>
                        </el-form-item>
                        <el-form-item label="心跳周期(秒)" prop="keepTimeout">
                            <el-input v-model="platform.keepTimeout"></el-input>
                        </el-form-item>
                        <el-form-item label="信令传输" prop="transport">
                            <el-select  v-model="platform.transport" style="width:100%" placeholder="请选择信令传输方式">
                                <el-option label="UDP" value="UDP"></el-option>
                                <el-option label="TCP" value="TCP"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item  label="字符集"  prop="characterSet">
                            <el-select v-model="platform.characterSet" style="width:100%" placeholder="请选择字符集">
                                <el-option label="GB2312" value="GB2312"></el-option>
                                <el-option label="UTF-8" value="UTF-8"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="其他选项" >
                            <el-checkbox label="启用" v-model="platform.enable" ></el-checkbox>
                            <el-checkbox label="云台控制" v-model="platform.PTZEnable"></el-checkbox>
                            <el-checkbox label="RTCP保活" v-model="platform.rtcp"></el-checkbox>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">{{onSubmit_text}}</el-button>
                            <el-button @click="close">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
  <div id="addlatform" v-loading="isLoging">
    <el-dialog
      title="添加平台"
      width="70%"
      top="2rem"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
      :destroy-on-close="true"
      @close="close()"
    >
      <div id="shared" style="text-align: right; margin-top: 1rem">
        <el-row :gutter="24">
          <el-col :span="11">
            <el-form ref="platform1" :rules="rules" :model="platform" label-width="160px">
              <el-form-item label="名称" prop="name">
                <el-input v-model="platform.name"></el-input>
              </el-form-item>
              <el-form-item label="SIP服务国标编码" prop="serverGBId">
                <el-input v-model="platform.serverGBId" clearable></el-input>
              </el-form-item>
              <el-form-item label="SIP服务国标域" prop="serverGBDomain">
                <el-input v-model="platform.serverGBDomain" clearable></el-input>
              </el-form-item>
              <el-form-item label="SIP服务IP" prop="serverIP">
                <el-input v-model="platform.serverIP" clearable></el-input>
              </el-form-item>
              <el-form-item label="SIP服务端口" prop="serverPort">
                <el-input v-model="platform.serverPort" clearable></el-input>
              </el-form-item>
              <el-form-item label="设备国标编号" prop="deviceGBId">
                <el-input v-model="platform.deviceGBId" clearable></el-input>
              </el-form-item>
              <el-form-item label="本地IP" prop="deviceIp">
                <el-input v-model="platform.deviceIp" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="本地端口" prop="devicePort">
                <el-input v-model="platform.devicePort" :disabled="true"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form ref="platform2" :rules="rules" :model="platform" label-width="160px">
              <el-form-item label="SIP认证用户名" prop="username">
                <el-input v-model="platform.username"></el-input>
              </el-form-item>
              <el-form-item label="SIP认证密码" prop="password">
                <el-input v-model="platform.password" type="password"></el-input>
              </el-form-item>
              <el-form-item label="注册周期(秒)" prop="expires">
                <el-input v-model="platform.expires"></el-input>
              </el-form-item>
              <el-form-item label="心跳周期(秒)" prop="keepTimeout">
                <el-input v-model="platform.keepTimeout"></el-input>
              </el-form-item>
              <el-form-item label="信令传输" prop="transport">
                <el-select
                  v-model="platform.transport"
                  style="width: 100%"
                  placeholder="请选择信令传输方式"
                >
                  <el-option label="UDP" value="UDP"></el-option>
                  <el-option label="TCP" value="TCP"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="字符集" prop="characterSet">
                <el-select
                  v-model="platform.characterSet"
                  style="width: 100%"
                  placeholder="请选择字符集"
                >
                  <el-option label="GB2312" value="GB2312"></el-option>
                  <el-option label="UTF-8" value="UTF-8"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="其他选项">
                <el-checkbox label="启用" v-model="platform.enable"></el-checkbox>
                <el-checkbox label="云台控制" v-model="platform.PTZEnable"></el-checkbox>
                <el-checkbox label="RTCP保活" v-model="platform.rtcp"></el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">{{
                  onSubmit_text
                }}</el-button>
                <el-button @click="close">取消</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
</div>
  </div>
</template>

<script>
export default {
    name: 'platformEdit',
    props: {},
    computed: {

  name: "platformEdit",
  props: {},
  computed: {},
  created() {},
  data() {
    var deviceGBIdRules = async (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入设备国标编号"));
      } else {
        var exit = await this.deviceGBIdExit(value);
        console.log(exit);
        console.log(exit == "true");
        console.log(exit === "true");
        if (exit) {
          callback(new Error("设备国标编号已存在"));
        } else {
          callback();
        }
      }
    };
    return {
      listChangeCallback: null,
      showDialog: false,
      isLoging: false,
      onSubmit_text: "立即创建",
      // platform: {
      //     enable: false,
      //     PTZEnable: true,
      //     rtcp: false,
      //     name: null,
      //     serverGBId: null,
      //     serverGBDomain: null,
      //     serverIP: null,
      //     serverPort: null,
      //     deviceGBId: null,
      //     deviceIp: null,
      //     devicePort: null,
      //     username: null,
      //     password: null,
      //     expires: 300,
      //     keepTimeout: 60,
      //     transport: "UDP",
      //     characterSet: "GB2312",
      // },
      platform: {
        enable: true,
        PTZEnable: true,
        rtcp: false,
        name: "测试001",
        serverGBId: "34020000002000000001",
        serverGBDomain: "3402000000",
        serverIP: "192.168.1.141",
        serverPort: "5060",
        deviceGBId: "34020000001320001101",
        deviceIp: "192.168.1.20",
        devicePort: "5060",
        username: "34020000001320001101",
        password: "12345678",
        expires: 300,
        keepTimeout: 60,
        transport: "UDP",
        characterSet: "GB2312",
      },
      rules: {
        name: [{ required: true, message: "请输入平台名称", trigger: "blur" }],
        serverGBId: [
          { required: true, message: "请输入SIP服务国标编码", trigger: "blur" },
        ],
        serverGBDomain: [
          { required: true, message: "请输入SIP服务国标域", trigger: "blur" },
        ],
        serverIP: [{ required: true, message: "请输入SIP服务IP", trigger: "blur" }],
        serverPort: [{ required: true, message: "请输入SIP服务端口", trigger: "blur" }],
        deviceGBId: [{ validator: deviceGBIdRules, trigger: "blur" }],
        username: [{ required: false, message: "请输入SIP认证用户名", trigger: "blur" }],
        password: [{ required: false, message: "请输入SIP认证密码", trigger: "blur" }],
        expires: [{ required: true, message: "请输入注册周期", trigger: "blur" }],
        keepTimeout: [{ required: true, message: "请输入心跳周期", trigger: "blur" }],
        transport: [{ required: true, message: "请选择信令传输", trigger: "blur" }],
        characterSet: [{ required: true, message: "请选择编码字符集", trigger: "blur" }],
      },
    };
  },
  methods: {
    openDialog: function (platform, callback) {
      var that = this;
      this.$axios
        .get(`/api/platforms/serverconfig`)
        .then(function (res) {
          console.log(res);
          that.platform.deviceGBId = res.data.username;
          that.platform.deviceIp = res.data.deviceIp;
          that.platform.devicePort = res.data.devicePort;
          that.platform.username = res.data.username;
          that.platform.password = res.data.password;
        })
        .catch(function (error) {
          console.log(error);
        });
      this.showDialog = true;
      this.listChangeCallback = callback;
      if (platform != null) {
        this.platform = platform;
        this.onSubmit_text = "保存";
      } else {
      }
    },
    created() {},
    data() {
        var deviceGBIdRules = async (rule, value, callback) => {
          console.log(value)
          if (value === '') {
            callback(new Error('请输入设备国标编号'));
          } else {
            var exit = await this.deviceGBIdExit(value);
            console.log(exit)
            console.log(exit == "true")
            console.log(exit === "true")
            if (exit) {
              callback(new Error('设备国标编号已存在'));
            }else {
              callback();
    onSubmit: function () {
      console.log("onSubmit");
      var that = this;
      that.$axios
        .post(`/api/platforms/save`, that.platform)
        .then(function (res) {
          console.log(res);
          console.log(res.data == "success");
          if (res.data == "success") {
            that.$message({
              showClose: true,
              message: "保存成功",
              type: "success",
            });
            that.showDialog = false;
            if (that.listChangeCallback != null) {
              that.listChangeCallback();
            }
          }
        };
        return {
            listChangeCallback: null,
            showDialog: false,
            isLoging: false,
            onSubmit_text:"立即创建",
            // platform: {
            //     enable: false,
            //     PTZEnable: true,
            //     rtcp: false,
            //     name: null,
            //     serverGBId: null,
            //     serverGBDomain: null,
            //     serverIP: null,
            //     serverPort: null,
            //     deviceGBId: null,
            //     deviceIp: null,
            //     devicePort: null,
            //     username: null,
            //     password: null,
            //     expires: 300,
            //     keepTimeout: 60,
            //     transport: "UDP",
            //     characterSet: "GB2312",
            // },
            platform: {
                enable: true,
                PTZEnable: true,
                rtcp: false,
                name: "测试001",
                serverGBId: "34020000002000000001",
                serverGBDomain: "3402000000",
                serverIP: "192.168.1.141",
                serverPort: "5060",
                deviceGBId: "34020000001320001101",
                deviceIp: "192.168.1.20",
                devicePort: "5060",
                username: "34020000001320001101",
                password: "12345678",
                expires: 300,
                keepTimeout: 60,
                transport: "UDP",
                characterSet: "GB2312",
            },
            rules: {
                name: [
                    { required: true, message:"请输入平台名称", trigger: 'blur' }
                ],
                serverGBId: [
                    { required: true, message:"请输入SIP服务国标编码",  trigger: 'blur' }
                ],
                serverGBDomain: [
                    { required: true, message:"请输入SIP服务国标域",   trigger: 'blur' }
                ],
                serverIP: [
                    { required: true, message:"请输入SIP服务IP",   trigger: 'blur' }
                ],
                serverPort: [
                    { required: true, message:"请输入SIP服务端口",   trigger: 'blur' }
                ],
                deviceGBId: [
                    {validator: deviceGBIdRules,  trigger: 'blur' }
                ],
                username: [
                    { required: false, message:"请输入SIP认证用户名",   trigger: 'blur' }
                ],
                password: [
                    { required: false, message:"请输入SIP认证密码",   trigger: 'blur' }
                ],
                expires: [
                    { required: true, message:"请输入注册周期",   trigger: 'blur' }
                ],
                keepTimeout: [
                    { required: true, message:"请输入心跳周期",   trigger: 'blur' }
                ],
                transport: [
                    { required: true, message:"请选择信令传输",   trigger: 'blur' }
                ],
                characterSet: [
                    { required: true, message:"请选择编码字符集",   trigger: 'blur' }
                ]
                }
        };
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    methods: {
        openDialog: function (platform, callback) {
            this.showDialog = true;
            this.listChangeCallback = callback;
            if (platform != null) {
                this.platform = platform;
                this.onSubmit_text = "保存"
            }

        },
        onSubmit: function () {
            console.log('onSubmit');
            var that = this;
            that.$axios.post(`/api/platforms/save`, that.platform)
                .then(function (res) {
                    console.log(res)
                    console.log(res.data == "success")
                    if (res.data == "success") {
                        that.$message({
                            showClose: true,
                            message: '保存成功',
                            type: 'success'
                        });
                        that.showDialog = false;
                        if (that.listChangeCallback != null) {
                            that.listChangeCallback()
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        close: function () {
            console.log('关闭添加视频平台');
            this.showDialog = false;
            this.$refs.platform1.resetFields();
            this.$refs.platform2.resetFields();
        },
        deviceGBIdExit: async function (deviceGbId) {
          var result = false;
          var that = this
          await that.$axios.post(`/api/platforms/exit/${deviceGbId}`)
            .then(function (res) {
              result = res.data;
            })
            .catch(function (error) {
              console.log(error);
            });
            return result;

        }

    }
    close: function () {
      console.log("关闭添加视频平台");
      this.showDialog = false;
      this.$refs.platform1.resetFields();
      this.$refs.platform2.resetFields();
    },
    deviceGBIdExit: async function (deviceGbId) {
      var result = false;
      var that = this;
      await that.$axios
        .post(`/api/platforms/exit/${deviceGbId}`)
        .then(function (res) {
          result = res.data;
        })
        .catch(function (error) {
          console.log(error);
        });
      return result;
    },
  },
};
</script>

<style>
.control-wrapper {
    position: relative;
    width: 6.25rem;
    height: 6.25rem;
    max-width: 6.25rem;
    max-height: 6.25rem;
    border-radius: 100%;
    margin-top: 2.5rem;
    margin-left: 0.5rem;
    float: left;
  position: relative;
  width: 6.25rem;
  height: 6.25rem;
  max-width: 6.25rem;
  max-height: 6.25rem;
  border-radius: 100%;
  margin-top: 2.5rem;
  margin-left: 0.5rem;
  float: left;
}

.control-panel {
    position: relative;
    top: 0;
    left: 5rem;
    height: 11rem;
    max-height: 11rem;
  position: relative;
  top: 0;
  left: 5rem;
  height: 11rem;
  max-height: 11rem;
}

.control-btn {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 44%;
    height: 44%;
    border-radius: 5px;
    border: 1px solid #78aee4;
    box-sizing: border-box;
    transition: all 0.3s linear;
  display: flex;
  justify-content: center;
  position: absolute;
  width: 44%;
  height: 44%;
  border-radius: 5px;
  border: 1px solid #78aee4;
  box-sizing: border-box;
  transition: all 0.3s linear;
}

.control-btn i {
    font-size: 20px;
    color: #78aee4;
    display: flex;
    justify-content: center;
    align-items: center;
  font-size: 20px;
  color: #78aee4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.control-round {
    position: absolute;
    top: 21%;
    left: 21%;
    width: 58%;
    height: 58%;
    background: #fff;
    border-radius: 100%;
  position: absolute;
  top: 21%;
  left: 21%;
  width: 58%;
  height: 58%;
  background: #fff;
  border-radius: 100%;
}

.control-round-inner {
    position: absolute;
    left: 13%;
    top: 13%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 70%;
    font-size: 40px;
    color: #78aee4;
    border: 1px solid #78aee4;
    border-radius: 100%;
    transition: all 0.3s linear;
  position: absolute;
  left: 13%;
  top: 13%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 70%;
  font-size: 40px;
  color: #78aee4;
  border: 1px solid #78aee4;
  border-radius: 100%;
  transition: all 0.3s linear;
}

.control-inner-btn {
    position: absolute;
    width: 60%;
    height: 60%;
    background: #fafafa;
  position: absolute;
  width: 60%;
  height: 60%;
  background: #fafafa;
}

.control-top {
    top: -8%;
    left: 27%;
    transform: rotate(-45deg);
    border-radius: 5px 100% 5px 0;
  top: -8%;
  left: 27%;
  transform: rotate(-45deg);
  border-radius: 5px 100% 5px 0;
}

.control-top i {
    transform: rotate(45deg);
    border-radius: 5px 100% 5px 0;
  transform: rotate(45deg);
  border-radius: 5px 100% 5px 0;
}

.control-top .control-inner {
    left: -1px;
    bottom: 0;
    border-top: 1px solid #78aee4;
    border-right: 1px solid #78aee4;
    border-radius: 0 100% 0 0;
  left: -1px;
  bottom: 0;
  border-top: 1px solid #78aee4;
  border-right: 1px solid #78aee4;
  border-radius: 0 100% 0 0;
}

.control-top .fa {
    transform: rotate(45deg) translateY(-7px);
  transform: rotate(45deg) translateY(-7px);
}

.control-left {
    top: 27%;
    left: -8%;
    transform: rotate(45deg);
    border-radius: 5px 0 5px 100%;
  top: 27%;
  left: -8%;
  transform: rotate(45deg);
  border-radius: 5px 0 5px 100%;
}

.control-left i {
    transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.control-left .control-inner {
    right: -1px;
    top: -1px;
    border-bottom: 1px solid #78aee4;
    border-left: 1px solid #78aee4;
    border-radius: 0 0 0 100%;
  right: -1px;
  top: -1px;
  border-bottom: 1px solid #78aee4;
  border-left: 1px solid #78aee4;
  border-radius: 0 0 0 100%;
}

.control-left .fa {
    transform: rotate(-45deg) translateX(-7px);
  transform: rotate(-45deg) translateX(-7px);
}

.control-right {
    top: 27%;
    right: -8%;
    transform: rotate(45deg);
    border-radius: 5px 100% 5px 0;
  top: 27%;
  right: -8%;
  transform: rotate(45deg);
  border-radius: 5px 100% 5px 0;
}

.control-right i {
    transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.control-right .control-inner {
    left: -1px;
    bottom: -1px;
    border-top: 1px solid #78aee4;
    border-right: 1px solid #78aee4;
    border-radius: 0 100% 0 0;
  left: -1px;
  bottom: -1px;
  border-top: 1px solid #78aee4;
  border-right: 1px solid #78aee4;
  border-radius: 0 100% 0 0;
}

.control-right .fa {
    transform: rotate(-45deg) translateX(7px);
  transform: rotate(-45deg) translateX(7px);
}

.control-bottom {
    left: 27%;
    bottom: -8%;
    transform: rotate(45deg);
    border-radius: 0 5px 100% 5px;
  left: 27%;
  bottom: -8%;
  transform: rotate(45deg);
  border-radius: 0 5px 100% 5px;
}

.control-bottom i {
    transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.control-bottom .control-inner {
    top: -1px;
    left: -1px;
    border-bottom: 1px solid #78aee4;
    border-right: 1px solid #78aee4;
    border-radius: 0 0 100% 0;
  top: -1px;
  left: -1px;
  border-bottom: 1px solid #78aee4;
  border-right: 1px solid #78aee4;
  border-radius: 0 0 100% 0;
}

.control-bottom .fa {
    transform: rotate(-45deg) translateY(7px);
  transform: rotate(-45deg) translateY(7px);
}
</style>