Git Product home page Git Product logo

wangrongding / frontend-park Goto Github PK

View Code? Open in Web Editor NEW
495.0 11.0 150.0 47.32 MB

🌸这是一个有趣的前端趣味知识公园~该项目是我平时捣鼓前端相关技术的一些案例集合。【涵盖:(Tensorflow.js-姿态识别,人脸识别),(WebRTC-音视频通话,录屏,虚拟背景,信令服务器),(Threejs-太阳系,3D 动画),(图片处理-千图成像,图片压缩,画板),(隐写术-文本隐写加密,图片隐写加密)等等...】

Home Page: https://frontend-park.vercel.app/

JavaScript 41.55% HTML 0.05% Vue 44.35% Shell 0.03% TypeScript 9.18% SCSS 1.58% CSS 3.26%
vuejs vue fabricjs canvas tensorflowjs webrtc webgl threejs image-processing pixel-art

frontend-park's Introduction

frontent-park

一个有趣的前端趣味知识公园~ 在线地址:👉🏻 frontent-park

该项目是我平时捣鼓的一些好玩的前端知识案例集合,喜欢的小伙伴也可以自己 fork 到仓库后随意玩耍

包含项目

Tensorflow.js

  • 姿态识别

通过摄像头实时识别人体姿态,可以应用于比如:健身房瑜伽教室舞蹈教室等等。

WebRTC 音视频协同

  • 拍照

基于 WebRTC 的拍照功能,可以拍照并保存到本地

  • 屏幕录制

将获取到的媒体流,通过 MediaRecorder API 进行录制,然后可以下载录制的视频

  • 虚拟背景

捕获摄像头后,对背景进行处理

  • 无信令传递 (1v1 音视频通话)

手动实现 P2P 的音视频通话,不依赖信令服务器

  • 信令传递 (1v1 音视频通话)

通过信令服务器实现 P2P 的音视频通话,支持内/外网连接,可以在不同网络环境下进行通话

  • 搭建 STUN/TURN 服务器
  • 美颜功能
  • WebRTC + Three.js 实现一个有趣的项目
  • WebRTC + TensorFlow.js 实现一个有趣的项目
  • WebRTC + Electron + robotjs 实现远程控制

ThreeJs

一些 ThreeJs 的代码示例

  • 控制器

  • 太阳系

隐写术

文本隐写

将指定的文本信息,编译成零宽字符,隐藏到一段文本中,用于信息加密等

图片隐写

将图片隐藏到另一张图片中,用于加密或者隐藏信息,版权保护(隐水印)等

未完待续!

  • 文本隐写
  • 图片隐写
  • 音频隐写
  • 视频隐写

千图成像

将选取的若干张图片,通过拼接的方式,合成为一张新指定的图片(马赛克图)

(未完成的功能不影响现在项目的使用,只是一些优化的部分)

  • 目标图生成(基本功能) -- 完成
  • 自定义分布方式 -- 待完成
  • 自定义按比例调整 -- 待完成
  • 自定义方向/比例 -- 待完成
  • 自定义贴片高度 -- 待完成
  • 自定义贴片宽度 -- 待完成
  • 资源图片的连续重复控制 -- 待完成

机器学习(基于 tensorFlow.js 的前端实现)

该示例正在捣鼓中...

开发

安装依赖

pnpm i

需要注意的是

由于该仓库有一些依赖包,依赖了二进制文件

如果遇到 node-pre-gyp ERR! gyp ERR!等问题,按照下面的方法解决

# 在node-gyp之前安装 (windows用户在powershell(管理员身份)中安装)
npm install -g --production windows-build-tools

# 全局安装node-gyp
npm install -g node-gyp

如果仍然不行,检查本地是否安装了 Python,没有则安装 👉 官方地址

本地运行

pnpm dev

打包

pnpm build

格式化代码并执行 eslint 校验

pnpm fal

frontend-park's People

Contributors

dependabot[bot] avatar imgbotapp avatar snyk-bot avatar wangrongding avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

frontend-park's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.