ljydlv
/
video_ca
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加获取本机ip并发送到服务器

This commit is contained in:
junleea 2024-04-19 19:34:39 +08:00
parent 3de238a215
commit 3d45f5259c
10 changed files with 235 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"axios": "^1.6.5",
"cors": "^2.8.5",
"element-plus": "^2.4.4",
"video.js": "^8.9.0",
"vue": "^3.3.11",
@ -1019,6 +1020,18 @@
"node": ">= 0.8"
}
},
"node_modules/cors": {
"version": "2.8.5",
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
"dependencies": {
"object-assign": "^4",
"vary": "^1"
},
"engines": {
"node": ">= 0.10"
}
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@ -1416,6 +1429,14 @@
"resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
},
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@ -1591,6 +1612,14 @@
"resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
"integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
},
"node_modules/vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/video.js": {
"version": "8.9.0",
"resolved": "https://registry.npmjs.org/video.js/-/video.js-8.9.0.tgz",

1
package.json
View File

@ -10,6 +10,7 @@
},
"dependencies": {
"axios": "^1.6.5",
"cors": "^2.8.5",
"element-plus": "^2.4.4",
"video.js": "^8.9.0",
"vue": "^3.3.11",

2
src/api/user.js
View File

@ -5,7 +5,7 @@ export const loginService = (loginData) => {
for (let key in loginData) {
params.append(key, loginData[key])
}
return request.post('/user/login', params,)
return request.post('/user/login', params)
}
export const registerService = (registerData) => {

22
src/api/video.js
View File

@ -7,19 +7,33 @@ export const playVideoService = (data) => {
}
return request.post('/video', params, Headers = { 'Accept': 'application/vnd.apple.mpegurl', Authorization: data.Authorization });
}
export const delayVideoService = (data) => {
const params = new URLSearchParams();
for (let key in data) {
params.append(key, data[key])
}
return request.post('/video/delay_video', params, Headers = {Authorization: data.Authorization });
}
export const getVideoListService = (data) => {
const params = new URLSearchParams();
let hour = data['hour'];
for (let key in data) {
if (key === 'entrydate' && data[key].length > 0) {
console.log(data[key]);
let begin=data[key][0].toLocaleString().slice(0,10)+" 00:00:00";
console.log("begin="+begin.toString());
if (hour === "33") {
let begin = data[key][0].toLocaleString().slice(0, 10) + " 00:00:00"; //begin=data[key][0].toLocaleString().slice(0,10)+hour+":00:00";
params.append("begin", begin);
let end = data[key][1].toLocaleString().slice(0, 10) + " 23:59:59";
console.log("end="+end.toString());
params.append("end", end);
continue;
} else {
let begin = data[key][0].toLocaleString().slice(0, 10) + hour + ":00:00"; //begin=data[key][0].toLocaleString().slice(0,10)+hour+":00:00";
params.append("begin", begin);
let end = data[key][1].toLocaleString().slice(0, 10) + hour + ":59:59";
params.append("end", end);
continue;
}
}
params.append(key, data[key])
}

2
src/main.js
View File

@ -7,7 +7,7 @@ import App from './App.vue'
import router from '@/router'
import globalData from '@/utils/global.js'
const app=createApp(App);
app.provide('globalData',globalData);
app.use(router).use(ElementPlus).mount('#app');

2
src/utils/request.js
View File

@ -1,6 +1,6 @@
import axios from "axios";
import router from "@/router/index.js";
const baseURL = "/api";
const baseURL = "https://jp.ljsea.top/";
const request = axios.create({
baseURL: baseURL,
});

19
src/views/Login.vue
View File

@ -99,10 +99,11 @@ if (localStorage.getItem("token") !== null) {
const globalData = inject("globalData");
const loginData = ref({
var loginData = ref({
username: "",
email: "lijun.lj@foxmail.com",
password: "",
ip:"",
});
const registerData = ref({
username: "",
@ -159,9 +160,25 @@ const login = async () => {
localStorage.setItem("token", result.data.token);
localStorage.setItem("userId", result.data.id);
localStorage.setItem("username", result.data.username);
let now=new Date();
localStorage.setItem("end_time", now.setDate(now.getHours() + 12));//过期时间
//token.value= result.data;
router.push("/videoList");
};
const getIpClient= async() => {
try {
const response = await axios.get("https://ipinfo.io/json");
loginData.value.ip =response.data.ip;
// console.log("ip:",response.data.ip);
// console.log("login ip:",loginData.ip);
// console.log(response.data);
// console.log(loginData);
} catch (error) {
console.error(error);
}
};
getIpClient();
const register = async () => {
let result = registerService(registerData.value);
if (result.code === 0) {

4
src/views/Video.vue
View File

@ -30,10 +30,12 @@ nextTick(() => {
sources: [
{
src:
"/api/video/m3u8?filename=" +
"https://jp.ljsea.top/video/m3u8?filename=" +
localStorage.getItem("video_name") +
"&id=" +
localStorage.getItem("video_id") +
"&ip=" +
localStorage.getItem("ip")+
"&userId=" +
localStorage.getItem("userId") +
"&token=" +

176
src/views/VideoList.vue
View File

@ -2,6 +2,7 @@
import axios from "axios";
import { inject } from "vue";
import { getVideoListService } from "@/api/video.js";
import { delayVideoService } from "@/api/video.js";
import router from "@/router/index.js";
export default {
@ -14,9 +15,12 @@ export default {
// },
data() {
return {
ip: "",
tableData: [],
file_sum_size: 0,
tokenData: {
token: localStorage.getItem("token"),
ip: localStorage.getItem("ip"),
userId: localStorage.getItem("userId"),
username: localStorage.getItem("username"),
hour: 0,
@ -33,15 +37,23 @@ export default {
// 它们可以在模板中作为事件处理器绑定
methods: {
async getVideoList() {
console.log(this.tokenData.token);
let result = {};
try {
result = await getVideoListService(this.tokenData);
} catch (e) {
console.log(e);
}
this.tableData = JSON.parse(result.data);
console.log(this.tableData[0]);
let data = result.data;
let len = data.length;
for (let i = 0; i < len; i++) {
//this.file_sum_size += parseFloat(data[i].file_size);
data[i].file_size = parseFloat(data[i].file_size / 1024 / 1024).toFixed(
2
);
}
console.log("file_size", this.file_sum_size, "len=", len);
this.tableData = data;
},
onSubmit() {
getVideoList({ token: token });
@ -60,6 +72,84 @@ export default {
//alert("id=" + id + " name=" + name);
router.push("/video");
},
async downloadVideo(index) {
var id = this.tableData[index].id;
var name = this.tableData[index].video_name;
var vurl =
"https://jp.ljsea.top/video/m3u8?filename=" +
name +
"&id=" +
id +
"&userId=" +
localStorage.getItem("userId") +
"&ip=" +
this.ip +
"&token=" +
localStorage.getItem("token"); //视频地址
//下载文件
try {
// 发送请求到后端获取视频文件
const response = await axios({
url: vurl,
method: "GET",
responseType: "blob", // 告诉axios我们期望的响应是一个blob
headers: {
// 如果有必要，设置其他请求头
"Content-Type": "video/mp4",
},
});
// 创建Blob对象
const videoBlob = new Blob([response.data], { type: "video/mp4" });
// 创建一个指向Blob对象的URL
const videoUrl = URL.createObjectURL(videoBlob);
// 使用a标签下载文件
const link = document.createElement("a");
link.href = videoUrl;
link.download = name; // 设置下载文件的名称
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 释放URL对象
URL.revokeObjectURL(videoUrl);
} catch (error) {
console.error("下载视频时发生错误:", error);
}
},
async delayVideo(index) {
var id = this.tableData[index].id;
var days = 10;
var delay_data = {
id: id,
ip:this.ip,
delay: days,
userId: this.tokenData.userId,
token: this.tokenData.token,
};
try {
var d_re = await delayVideoService(delay_data);
if (d_re.code == 0) {
alert("延迟成功");
} else {
alert("操作失败");
}
} catch (e) {
console.log(e);
}
},
async getIpClient() {
try {
const response = await axios.get("https://ipinfo.io/json");
this.ip=response.data.ip;
localStorage.setItem("ip", this.ip);
//console.log(response);
} catch (error) {
console.error(error);
}
},
// 修改条纹颜色
tableRowClassName({ row, rowIndex }) {
if (row.human === 1) {
@ -74,11 +164,13 @@ export default {
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
// 例如这个函数就会在组件挂载完成后被调用
mounted() {
async mounted() {
let now=new Date();
if (localStorage.getItem("token") === null ) {
router.push("/login");
}
console.log("mounted");
// console.log("mounted");
await this.getIpClient();
this.getVideoList();
},
};
@ -105,17 +197,18 @@ export default {
</el-date-picker>
</el-form-item>
<!-- <el-select v-model="tokenData.hour">
<el-option label="0点" value="24"></el-option>
<el-option label="1点" value="1"></el-option>
<el-option label="2点" value="2"></el-option>
<el-option label="3点" value="3"></el-option>
<el-option label="4点" value="4"></el-option>
<el-option label="5点" value="5"></el-option>
<el-option label="6点" value="6"></el-option>
<el-option label="7点" value="7"></el-option>
<el-option label="8点" value="8"></el-option>
<el-option label="9点" value="9"></el-option>
<el-select v-model="tokenData.hour">
<el-option label="不选" value="33"></el-option>
<el-option label="0点" value="00"></el-option>
<el-option label="1点" value="01"></el-option>
<el-option label="2点" value="02"></el-option>
<el-option label="3点" value="03"></el-option>
<el-option label="4点" value="04"></el-option>
<el-option label="5点" value="05"></el-option>
<el-option label="6点" value="06"></el-option>
<el-option label="7点" value="07"></el-option>
<el-option label="8点" value="08"></el-option>
<el-option label="9点" value="09"></el-option>
<el-option label="10点" value="10"></el-option>
<el-option label="11点" value="11"></el-option>
<el-option label="12点" value="12"></el-option>
@ -130,41 +223,56 @@ export default {
<el-option label="21点" value="21"></el-option>
<el-option label="22点" value="22"></el-option>
<el-option label="23点" value="23"></el-option>
</el-select> -->
</el-select>
<el-form-item>
<el-button type="primary" @click="getVideoList()">查询</el-button>
</el-form-item>
<!-- <el-form-item>
所有文件大小： {{ parseFloat(this.file_sum_size/1024/1024).toFixed(2) }} GB
</el-form-item> -->
</el-form>
<!-- 表格 -->
<el-table
:data="tableData"
<!-- 表格 :row-style="this.tableRowClassName"-->
<el-table :data="tableData" width="100%" border>
:row-style="this.tableRowClassName"
border
>
<el-table-column prop="id" label="id" width="50"></el-table-column>
<el-table-column prop="id" label="id" width="80"></el-table-column>
<el-table-column
prop="video_name"
label="视频名称"
width="250"
></el-table-column>
<el-table-column label="是否有人" width="50" prop="human">
<el-table-column label="是否有人" width="30" prop="human">
<template #default="scope">
{{ scope.row.human == 1 ? "有" : "无" }}
</template>
</el-table-column>
<el-table-column
prop="create_time"
label="创建时间"
width="250"
label="开始时间"
width="180"
></el-table-column>
<el-table-column
prop="end_time"
label="结束时间"
width="180"
></el-table-column>
<el-table-column
prop="delete_time"
label="预期删除时间"
width="250"
width="180"
></el-table-column>
<el-table-column label="操作" width="250">
<el-table-column
prop="file_size"
label="文件大小(MB)"
width="80"
></el-table-column>
<el-table-column
prop="camera_id"
label="摄像头"
width="50"
></el-table-column>
<el-table-column label="操作" width="300">
<template #default="scope">
<el-button
type="primary"
@ -172,6 +280,18 @@ export default {
@click.prevent="playVideo(scope.$index)"
>播放</el-button
>
<el-button
type="primary"
size="mini"
@click.prevent="delayVideo(scope.$index)"
>延迟删除</el-button
>
<el-button
type="primary"
size="mini"
@click.prevent="downloadVideo(scope.$index)"
>下载</el-button
>
<!-- <el-button type="danger" size="mini">删除</el-button> -->
</template>

18
vite.config.js
View File

@ -13,13 +13,13 @@ export default defineConfig({
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server : {
proxy: {
'/api': {
target: 'https://jp.ljsea.top',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
// server : {
// proxy: {
// '/api': {
// target: 'https://jp.ljsea.top',
// changeOrigin: true,
// rewrite: path => path.replace(/^\/api/, '')
// }
// }
// }
})