{"id":17956889,"url":"https://github.com/wangrongding/frontend-park","last_synced_at":"2025-05-15T09:07:35.869Z","repository":{"id":39607266,"uuid":"390684920","full_name":"wangrongding/frontend-park","owner":"wangrongding","description":"🌸这是一个有趣的前端趣味知识公园~该项目是我平时捣鼓前端相关技术的一些案例集合。【涵盖：（Tensorflow.js-姿态识别，人脸识别），(WebRTC-音视频通话，录屏，虚拟背景，信令服务器)，（Threejs-太阳系，3D 动画），（图片处理-千图成像，图片压缩，画板），（隐写术-文本隐写加密，图片隐写加密）等等...】","archived":false,"fork":false,"pushed_at":"2025-01-14T07:39:29.000Z","size":48658,"stargazers_count":583,"open_issues_count":11,"forks_count":171,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-04-14T15:02:42.133Z","etag":null,"topics":["canvas","fabricjs","image-processing","pixel-art","steganography","tensorflowjs","threejs","vue","vuejs","webgl","webrtc"],"latest_commit_sha":null,"homepage":"https://frontend-park.vercel.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wangrongding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-29T10:21:56.000Z","updated_at":"2025-04-11T01:16:23.000Z","dependencies_parsed_at":"2024-06-03T12:34:19.044Z","dependency_job_id":"4b3f650c-f79c-4177-b5f7-46fb816b9f9c","html_url":"https://github.com/wangrongding/frontend-park","commit_stats":{"total_commits":208,"total_committers":5,"mean_commits":41.6,"dds":0.07692307692307687,"last_synced_commit":"509ab4ccaa60d222c63b98a9b12cb28c3af3b3de"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangrongding%2Ffrontend-park","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangrongding%2Ffrontend-park/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangrongding%2Ffrontend-park/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangrongding%2Ffrontend-park/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wangrongding","download_url":"https://codeload.github.com/wangrongding/frontend-park/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310515,"owners_count":22049469,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","fabricjs","image-processing","pixel-art","steganography","tensorflowjs","threejs","vue","vuejs","webgl","webrtc"],"created_at":"2024-10-29T10:43:34.889Z","updated_at":"2025-05-15T09:07:30.860Z","avatar_url":"https://github.com/wangrongding.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# frontent-park\n\n一个有趣的前端趣味知识公园~ 在线地址：👉🏻 [frontent-park](https://frontend-park.vercel.app/home)\n\n该项目是我平时捣鼓的一些好玩的前端知识案例集合,喜欢的小伙伴也可以自己 fork 到仓库后随意玩耍\n\n\u003c!-- \u003cimg\n    src=\"https://assets.fedtop.com/picbed/20220531142022.png\"\n    alt=\"\"\n    style=\"width:400px\"\n/\u003e --\u003e\n\n\u003c!-- ## 我的博客\n\n所有示例的具体实现和技术说明，在[我的博客](https://www.fedtop.com/)中都有对应的文章 --\u003e\n\n\u003c!-- \u003cimg\n    src=\"https://assets.fedtop.com/picbed/20220531142049.png\"\n    alt=\"\"\n    style=\"width:400px\"\n/\u003e --\u003e\n\n## 包含项目\n\n### Tensorflow.js\n\n- [x] 姿态识别\n\n通过摄像头实时识别人体姿态，可以应用于比如：`健身房`、`瑜伽教室`、`舞蹈教室`等等。\n\n\u003cimg\n  src=\"https://assets.fedtop.com/picbed/202211301455997.gif\"\n  alt=\"\"\n  style=\"width:400px\"\n/\u003e\n\n\u003cimg\n  src=\"https://assets.fedtop.com/picbed/202211301132796.png\"\n  alt=\"\"\n  style=\"width:400px\"\n/\u003e\n\n### WebRTC 音视频协同\n\n- [x] 拍照\n\n基于 WebRTC 的拍照功能，可以拍照并保存到本地\n\n\u003cimg\n  src=\"https://assets.fedtop.com/picbed/202210071514394.png\"\n  alt=\"\"\n  style=\"width:400px\"\n/\u003e\n\n- [x] 屏幕录制\n\n将获取到的媒体流，通过 MediaRecorder API 进行录制，然后可以下载录制的视频\n\n\u003cimg\n  src=\"https://assets.fedtop.com/picbed/202212010050284.png\"\n  alt=\"\"\n  style=\"width:400px\"\n/\u003e\n\n\u003cimg\n  src=\"https://assets.fedtop.com/picbed/202210080230355.gif\"\n  alt=\"\"\n  style=\"width:400px\"\n/\u003e\n\n- [x] 虚拟背景\n\n捕获摄像头后，对背景进行处理\n\n\u003cimg\n  src=\"https://assets.fedtop.com/picbed/202211030012599.gif\"\n  alt=\"\"\n  style=\"width:400px\"\n/\u003e\n\n- [x] 无信令传递 (1v1 音视频通话)\n\n手动实现 P2P 的音视频通话，不依赖信令服务器\n\n\u003cimg\n  src=\"https://assets.fedtop.com/picbed/202209150922457.png\"\n  alt=\"\"\n  style=\"width:400px\"\n/\u003e\n\n- [x] 信令传递 (1v1 音视频通话)\n\n通过信令服务器实现 P2P 的音视频通话，支持内/外网连接，可以在不同网络环境下进行通话\n\n\u003cimg\n  src=\"https://assets.fedtop.com/picbed/202211132359202.png\"\n  alt=\"\"\n  style=\"width:400px\"\n/\u003e\n\n- [ ] 搭建 STUN/TURN 服务器\n- [ ] 美颜功能\n- [ ] WebRTC + Three.js 实现一个有趣的项目\n- [ ] WebRTC + TensorFlow.js 实现一个有趣的项目\n- [ ] WebRTC + Electron + robotjs 实现远程控制\n\n### ThreeJs\n\n一些 ThreeJs 的代码示例\n\n- 控制器\n\n\u003cimg\n  src=\"https://assets.fedtop.com/picbed/202202141040652.gif\"\n  alt=\"\"\n  style=\"width:400px\"\n/\u003e\n\n- 太阳系\n\n\u003cimg\n    src=\"https://assets.fedtop.com/picbed/Kapture 2022-10-10 at 04.23.10.gif\"\n    alt=\"\"\n    style=\"width:400px\"\n/\u003e\n\n### 隐写术\n\n#### 文本隐写\n\n将指定的文本信息，编译成零宽字符，隐藏到一段文本中，用于信息加密等\n\n\u003cimg\n    src=\"https://assets.fedtop.com/picbed/20220531142208.png\"\n    alt=\"\"\n    style=\"width:400px\"\n/\u003e\n\n#### 图片隐写\n\n将图片隐藏到另一张图片中，用于加密或者隐藏信息，版权保护（隐水印）等\n\n\u003cimg\n    src=\"https://assets.fedtop.com/picbed/20220531142226.png\"\n    alt=\"\"\n    style=\"width:400px\"\n/\u003e\n\n未完待续!\n\n- [x] 文本隐写\n- [x] 图片隐写\n- [ ] 音频隐写\n- [ ] 视频隐写\n\n### 千图成像\n\n将选取的若干张图片，通过拼接的方式，合成为一张新指定的图片（马赛克图）\n\n\u003cimg\n    src=\"https://assets.fedtop.com/picbed/202209150916358.gif\"\n    alt=\"\"\n    style=\"width:400px\"\n/\u003e\n\n\u003cimg\n    src=\"https://assets.fedtop.com/picbed/202209150917662.gif\"\n    alt=\"\"\n    style=\"width:400px\"\n/\u003e\n\n(未完成的功能不影响现在项目的使用,只是一些优化的部分)\n\n- [x] 目标图生成(基本功能) -- 完成\n- [ ] 自定义分布方式 -- 待完成\n- [ ] 自定义按比例调整 -- 待完成\n- [ ] 自定义方向／比例 -- 待完成\n- [ ] 自定义贴片高度 -- 待完成\n- [ ] 自定义贴片宽度 -- 待完成\n- [ ] 资源图片的连续重复控制 -- 待完成\n\n### 机器学习(基于 tensorFlow.js 的前端实现)\n\n    该示例正在捣鼓中...\n\n## 开发\n\n### 安装依赖\n\n```sh\npnpm i\n```\n\n## 需要注意的是\n\n由于该仓库有一些依赖包,依赖了二进制文件\n\n如果遇到 `node-pre-gyp ERR! ` `gyp ERR!`等问题,按照下面的方法解决\n\n```sh\n\n# 在node-gyp之前安装 (windows用户在powershell(管理员身份)中安装)\nnpm install -g --production windows-build-tools\n\n# 全局安装node-gyp\nnpm install -g node-gyp\n```\n\n如果仍然不行,检查本地是否安装了 Python,没有则安装 👉 [官方地址](https://www.python.org/downloads/)\n\n## 本地运行\n\n```sh\npnpm dev\n```\n\n## 打包\n\n```sh\npnpm build\n```\n\n## 格式化代码并执行 eslint 校验\n\n```sh\npnpm fal\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangrongding%2Ffrontend-park","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwangrongding%2Ffrontend-park","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangrongding%2Ffrontend-park/lists"}