小栗帽今天吃什么-CSDN博客

原创【山大会议】多人视频通话 WebRTC 工具类搭建

山大会议基于 WebRTC 技术实现多人同时在线的视频会议功能。但是 WebRTC 技术是一项针对 P2P 实现的实时通讯技术，这意味着我们无法直接使用 WebRTC 实现多人的视频会议，因此，在对 WebRTC 技术有一定程度的熟悉后，我将 WebRTC 技术封装为了一组能够支持多人在线的视频会议工具类。目前，要使用 WebRTC 实现支持多人的视频聊天功能，主流的架构有三种：Mesh 架构对流量和带宽的要求极大，它本质上就是在每一个与会者之间建立起完全图网络，每个用户之间互相进行 P2P 通信。这种架

2022-06-09 16:59:50 856 1

原创【山大会议】软件性能优化及bug修复

这篇文章主要用于记录几个项目中客户端代码的性能优化以及恶性bug的修复。在测试中发现，软件在进行视频通话时，CPU 负载较高，经过检测发现是由于 WebRTC 默认使用 VP8 的编码器、解码器。为了降低 CPU 负载，我允许用户自行选择使用 CPU 或是 GPU 进行渲染。当使用 GPU 进行视频渲染时，会使用 H264 的编码器进行实现。将编码器进行保存，如果有需要则使用 H264 的编码器/解码器。由于我们的 WebRTC 默认用户上传音视频两条轨道，一旦用户不具备某种设备可能会导致整套流程无法走下

2022-06-07 11:57:04 308

原创【山大会议】私人聊天频道 WebRTC 工具类

在山大会议中，我们不仅要实现多人视频会议，我们还需要实现一个类似 QQ、微信这样的即时通讯服务。在这个一对一的私人聊天服务中，我们添加了一个一对一的私人视频通话功能，一来是增加软件功能的多样性，二来也是为实现多人聊天做铺垫，先熟悉 WebRTC 在实际环境下的运行。首先，我们需要对私人视频通话的代码逻辑进行设计。我们之前在【山大会议】WebRTC基础之对等体连接这篇文章中介绍过基本的 WebRTC 对等体连接的过程。它的建立本质上是一个两次握手的过程：在私人视频聊天模块中，我们决定采用去中心化的、P2

2022-06-07 11:38:02 2042

原创【山大会议】一些基本工具类定义

要想实现山大会议客户端的各种功能，并提高开发效率，我需要在开发的途中设计一些供其他组件使用的工具类，并把一些可以复用的代码提取出来进行封装。这是一个我用于发送 Http 异步请求的工具类，我在项目中引入了 axios 模块，并根据 axios 模块进行封装，得到了自己的用于发送网络请求的工具类。整个工具类的代码如下：事件总线由于 React 倡导单向数据流，我们如果不通过一些特殊写法很难实现类似于 Vue 那样的双向绑定。Redux 是一种解决方案，然而 Redux 的部分写法太过繁琐，如果是一些

2022-06-03 16:56:47 185

原创【山大会议】应用设置模块

在本篇文章中，我将介绍我对山大会议客户端的设置页面所作的设计。整个设置模块被封装在一个模块中，在客户端内将以模态屏的形式展示给用户。其整体结构被划分为四个部分：每个部分都被细分为独立的模块，便于维护。下面先来介绍一下通用设置模块，它负责对应用的某些通用功能进行管理。包括是否需要在启动应用时自动登录，是否允许应用开机时自动启动，以及私人视频通话是否开启加密。整个通用设置的模块代码如下：其中自动登录功能实现较为简单，我将着重介绍开机自启动功能的实现。要实现本功能，需要对用户的注册表进行修改。而前端

2022-06-03 14:45:05 198

原创【山大会议】WebRTC基础之对等体连接

在上一篇文章中，我们简单介绍了一下如何通过 WebRTC 提供的 API 实现用户设备媒体流的获取。在这篇文章中，我将着重介绍如何使用 WebRTC 搭建一个简单的 WebRTC 一对一音视频通话的 Demo。首先，我们先编写我们的 HTML 代码，搭好页面的骨架。我们搭建了一个简单的页面骨架，两个标签分别对应自己发出的视频流以及对方发送给自己的视频流。两个分别存储双方的 SDP 。在搭建好骨架后，我们来编写具体的逻辑。首先，我们需要点击 id 为的按钮，获取用户本地的音视频流。代码如下：建

2022-06-02 23:04:19 411

原创【山大会议】WebRTC基础之用户媒体的获取

WebRTC 是一种支持网页浏览器进行实时语音视频通话的技术，于2011年6月1日开源并在 Google、Mozilla、Opera 的支持下被纳入万维网联盟的 W3C 推荐标准。这是我第一次接触该技术，因此在正式使用之前先对该技术进行基本的学习。要开发音视频通话功能，首先我们需要获取到音视频流。现代浏览器基本已经实现了 WebRTC 的 API，我们可以通过调用这些 API 实现最基本的功能。首先我们来认识一下如何通过 WebRTC 的 API 获取用户的默认麦克风的音频流，用到的代码很简单：我们通过

2022-06-02 22:25:33 373

原创【山大会议】使用TypeScript为项目进行重构

文章目录TypeScript 简介依赖安装tsconfig.json修改 webpack.config.js修改旧的代码index.tsx登录页Victor.ts注册页Reduxactions.tsreducers.tsstore.ts增加新的代码Constraints.tsGlobal.tsTypes.tsTypeScript 简介TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。其设计目标是开发大

2022-05-31 17:25:02 630

原创【山大会议】注册页的编写

文章目录渲染进程代码index.jsxApp.jsx修改登录页代码渲染进程代码在 src/Views 文件夹下，我们新建一个 Register 文件夹，其中是我们的注册页面。index.jsx首先，我们来书写注册页的入口文件import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<App />, document.getElementBy

2022-05-31 17:06:18 109

原创【山大会议】项目引入 Redux

文章目录前言安装依赖定义活动定义分发器导出 Redux前言React 使用的是单向数据流，为了实现数据流在不同组件中实现共享，我为项目引入了 Redux 进行全局的数据状态管理。安装依赖首先需要安装 redux 核心依赖：yarn add @reduxjs/toolkit定义活动我们在 src/Utils 下创建新的文件夹 Store，在其中新建文件 actions.js 。/** * action 类型 */export const UPDATE_AVAILABLE_VIDEO_D

2022-05-31 16:49:25 156

原创【山大会议】项目初始化

文章目录技术选型electron.jsReact.jsWebpack5项目初始化添加依赖添加 webpack添加 React.js添加 electron.js编写基本文件编写前端静态文件electron.js 主进程React 入口文件及登录页Webpack 配置在本文中，我将描述为开发山大会议的客户端做的环境准备以及部分初始化工作。技术选型本人专精于 web 前端开发，更想将本次项目作为未来面试其他公司时的项目经历，因此选择采用 JavaScript 进行客户端的开发。但是 JavaScript

2022-05-31 16:29:08 111

原创蚂蚁集团-数字金融线-体验技术部前端一面面经

面试官 19:00 打了个电话过来，说往我邮箱里发了个链接，让我先做一个小时的笔试题。笔试阿里伯乐系统 60min笔试是在阿里的伯乐系统上做的，三道手撕代码。第一题、根据表达式计算字母数量描述：输入一串字符串，根据字符串求出每个字母的数量并返回结果对象。（数字为1时可省略）示例一：输入：A3B2，输出：{“A”: 3, “B”: 2}示例二：输入：A(A(A2B)2)3C2，输出：{“A”: 16, “B”: 6, “C”: 2}这题我放在最后写了，结果因为被第三题最后一个输出卡了很久只

2022-03-11 12:05:43 1560

原创 JS的防抖(debounce)与节流(throttle)

在前端项目开发中，在合适的地方做好防抖与节流是十分重要的。首先我们要知道，哪些地方适合采用防抖节流进行开发。一个重要的特征就是——某个函数在短时间内被频繁持续地执行。下面将给大家展示一个例子，方便理解：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g

2022-01-11 10:17:29 1025

原创【sduoj】题目集设计

2021SC@SDUSC文章目录架构设计界面设计导航栏设计数据管理（VueX实战）架构设计SDUOJ 效仿 PTA，通过题目集的方式为用户提供答题功能。教师可随时发布一份题目集，并修改题目集的基础信息，如名称、简介、开放状态等。学生也可进入向自己开放的题目集中选择题目编写代码作答，并可实时查看解题结果。整个题目集页面分为以下几个模块：题目集详情页面：作为题目集的首页面模块，在这里呈现了整个题目集的基本信息。教师可在该页面对自己的发布题目集进行信息更新。题目列表：这个模块将题目集中的所有题目都展

2021-12-23 12:18:52 363

原创使用 Vue 和 Electron 开发一款简单的 Markdown 编辑器

本文并不涉及自己设计一套 Markdown 渲染组件的部分，Markdown 渲染组件可通过 marked 和 highlight.js 自行实现。但本文重点在于如何使用 Electron 和 Vue 打造一款桌面应用，因此 Markdown 渲染组件便不再重复造轮子，而是直接采用了 mavon-editor。因此，如果是想要学习如何自己写一个 Markdown 文本渲染组件的读者不必在本文浪费过多时间。文章目录Electron简介安装Typark创建 Vue/Electron 项目backgrou.

2021-12-16 21:13:21 882 2

原创【sduoj】Vuex 全局状态管理

2021SC@SDUSC文章目录前言store.js引入项目前言在上一次博客中，我们简单介绍了一下 Vuex 以及它的用法。在这一篇博客中，我们将实地分析 sduoj 项目中的 Vuex 的使用。【sduoj】初识 Vuexstore.js为了方便维护，我们为 Vuex 专门建立一个 js 文件，store.js ，将其至于 src 目录下。在其内部，我们先将 Vue 和 Vuex 引入：import Vue from 'vue';import Vuex from 'vuex';V

2021-12-09 20:26:52 204

原创【sduoj】初识 Vuex

2021SC@SDUSC文章目录VuexVuex简介Vuex安装引入Vuex核心概念State单一状态树在 Vue 组件中获得 Vuex 状态Getters通过属性访问通过方法访问Mutations提交载荷（Payload）对象风格的提交方式Mutation 需遵守 Vue 的响应规则Mutation 必须是同步函数Actions分发 ActionAction 的 PromiseModules模块的局部状态命名空间在最初的几代版本中， SDUOJ 一直依赖组件传参的方式来传递管理整个系统中的数据。然而，

2021-12-02 19:52:48 127

原创【sduoj】代码编辑器的使用

2021SC@SDUSC文章目录前言CodeMirror简介安装依赖vue-codemirror 的使用作为组件引入功能扩展编辑器主题语法高亮前言SDUOJ 是一个旨在提升山东大学学生编程能力的 Online Judge 平台，势必需要设计一个用于编写代码的输入框组件。在该项目中，我们采用了开源的 Vue-CodeMirror ，作为在线代码编辑器。CodeMirror简介CodeMirror是一个用 JavaScript 为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并带有许多实现更高级

2021-11-29 15:04:26 732

原创 Unity使用Newtonsoft报错的解决方案

文章目录Unity 使用 Newtonsoft 报错的解决方案问题描述解决方法Unity 使用 Newtonsoft 报错的解决方案问题描述由于最近在做人机交互课的实验，主要开发工具选择了 Unity3D 。在处理 Json 数据时，出现了一些问题。我是通过 Newtonsoft.Json 这个包来处理 Json 的。using Newtonsoft.Json;using Newtonsoft.Json.Linq;在 Visual Studio 中，编写代码并没有报错，但是进入 Unity3

2021-11-26 21:12:31 15207 5

原创【sduoj】出题功能模块分析 (2) --- 测试点上传

2021SC@SDUSC文章目录组件介绍组件内部模块核心功能通过压缩包上传测试点数据手动输入单个测试点下载测试点组件介绍组件名称：testPoint组件绝对路径：src / components / newProblem / testPoint.vue主要功能：教师对特定题目上传、修改测试点组件内部模块该模块组成部分较为简单，仅由一个 el-card 作为主体容器，内含 el-table 表格组件用以展示测试点数据。以下是 template 部分代码：<template>

2021-11-18 20:21:46 274

原创【sduoj】出题功能模块分析 (1) --- 题目详情

2021SC@SDUSC文章目录组件介绍组件内部模块主容器基本信息表单题面描述表单提交组件复用组件介绍组件名称：publishQuestion组件绝对路径：src / components / newProblem / publishQuestion.vue主要功能：用以编辑当前题目的基本信息组件内部模块该组件同样由若干其他组件共同构成，在这一段落中，我将依次介绍构成该页面的各个组件。主容器该组件通过 Element UI 的 el-card构成。其由头部及主体两部分构成，而大部分功能

2021-11-04 20:52:50 292

原创【sduoj】关于前端教师出题功能的设计

2021SC@SDUSC文章目录序言页面结构序言SDUOJ 项目，全称山东大学学生程序设计能力在线提升平台，作为一款 Online Judge 产品，其自然少不了出题的功能。而这篇博客就将着笔介绍 SDUOJ 项目的出题功能。页面结构对于整个出题系统的结构，可以查看下方列出的树状结构图：└── src/views/Teacher/newProblem.vue ├── src/components/newProblem/publishQuestion.vue ├── src/componen

2021-11-04 20:52:25 317

原创【sduoj】前端JSZip库的使用

2021SC@SDUSC文章目录JSZIP安装使用引入实例化JSZIPJSZip是一个用于创建、读取和编辑.zip文件的javascript库，具有好用而简单的 API。安装在sduoj项目中，可通过npm或yarn进行安装npm install jszip或yarn add jszip使用JSZip为开发者提供了诸多API可用于处理各类业务。具体API可参考： JSZip API下面将展示部分示例：引入import JSZip from 'jszip';在script开头

2021-10-28 19:47:33 3628 3

原创【sduoj】前端JWT的使用

2021SC@SDUSC文章目录序言传统认证方式session认证基于Token的鉴权机制JWTJWT是什么JWT的构成头部（header）载荷（payload）标准中注册的声明公共的声明私有的声明签证（signature）序言由于HTTP协定是不储存状态的，当我们刚刚透过帐号密码验证一个使用者时，下一个request请求就把刚刚的资料忘了。所以我们的程序就不知道谁是谁，就要再验证一次。所以为了保证系统安全易用，我们就需要验证用户否处于登录状态。在大多数前后端分离的项目中，JWT是常见的一个认证标准

2021-10-24 22:13:27 4886

原创【sduoj】首页布局

2021SC@SDUSC文章目录App.vue模板<template />脚本<script />首页布局Home.vueojheaderojasidelayoutApp.vue该项目是一个由Vue.js框架所搭建的单页面应用（SPA），我们所看见的所有页面实际上均是在App.vue的基础上通过组件之间的切换完成的。以下是App.vue的源代码：<template> <div id="app"> <router-view /> &l

2021-10-15 16:20:17 213

原创 React Native 工作原理与生命周期

文章目录React Native 简介React Native 工作原理及生命周期React Native的工作原理React Native 与原生平台的通信React Native 组件间通信父子组件间通信子组件向父组件传递消息多级组件间通信无前后关系组件通信React Native 生命周期初始化阶段加载阶段更新阶段销毁阶段React Native 简介关于React框架，其最早诞生于Facebook内部。当时，由于前端MVC框架性能无法满足Facebook项目的性能需求以及扩展需求，Faceboo

2021-10-14 15:56:13 411

原创【sduoj】web前端视图层Element UI的应用

2021SC@SDUSC文章目录Element UI简介Element UI的安装ElementUI的安装npm安装CDN安装Element UI 的配置使用 Starter Kit引入ElementUI完整引入按需引入全局配置开始使用Element UI简介ElementUI是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。是山东大学学生程序设计能力提升平台项目web前端部分所使用的主要UI组件库。Element UI的安装ElementUI的安装ElementUI的

2021-10-07 19:08:06 402

原创字节跳动西瓜视频一面面经

文章目录前言面试概况面试的问题感想前言今天人生第一次面试给了字节跳动，面试前非常紧张，从投递简历到正式面试之间只隔了三天。感觉这三天看的博客比三个月学的都多（-_-||）。正式面试的时候也发生了很多状况，包括但不限于对方听不见我说话（面试前明明特地调试了话筒来着），害得人家面试官小哥哥还特地打了一通长达1个小时的电话来和我语音面试。不过面试官人挺好的，一直都在认真听我回答问题，虽然我面试回答得稀烂，面试结束后也立刻给我发了短信通知我准备二面。面试概况部门：字节跳动西瓜视频前端开发Base：

2021-09-30 15:14:58 864 1

原创【sduoj】系统综述

2021SC@SDUSC文章目录项目简介系统功能人员分工前端服务器环境搭建系统配置环境配置更新软件列表安装配置Nginx项目简介该项目名为学生程序设计能力提升平台，是山东大学软件学院学生开发的一套程序在线评测系统。该系统的开发目的是丰富教学活动。在学校与编程相关的课程中，教师可以通过该系统为学生布置一系列编程题，培养学生主动书写代码的习惯，让学生在教师课堂上接受传统课程培养方式的同时，又能通过Online Judge平台亲手测试自己的代码。让学生们能够在实践中不断地提升编程能力。项目采用前后端分离

2021-09-30 13:31:44 429

原创【sduoj】项目环境配置

【sduoj】项目环境配置文章目录本地Node环境搭建下载与安装2021SC@SDUSC本地Node环境搭建Node.js安装可参考博客Node.js最新最详细安装教程下载与安装首先，进入Node.js官网：https://nodejs.org/en/下载LTS版本的安装程序。打开下载好的安装程序，进行安装。安装成功后退出安装程序，打开cmd，输入node -vnpm -v看到终端打印了版本号即说明安装成功。使用npm全局安装@vue/cli以及yarn安装完成后，在c.

2021-09-30 12:55:21 154

qq_53126706的博客