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 class SIPRequestHeaderProvider {
 	}
 
 
-	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 @@ public class SIPRequestHeaderProvider {
 		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 @@ public class SIPRequestHeaderProvider {
 				.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 @@ public class SIPRequestHeaderProvider {
 		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 @@ public class SIPCommanderFroPlatform implements ISIPCommanderForPlatform {
         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.http.ResponseEntity;
 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 @@ public class PlatformController {
     @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>