为什么我构建了spicycamcast
在开发新的数字标牌应用程序时，我需要可靠的屏幕截图和网络摄像头记录功能。现有的图书馆虽然有能力，但通常是不必要的复杂性或不够清晰的。我看到了一个更简单的东西的机会。
>> spicycamcast从这种需求中浮现出来 - 一个最小的，专门的图书馆，以最小的大惊小怪处理媒体捕获。这不仅是另一个网络摄像头库；这是一个实用的解决方案，源于现实世界的数字标牌开发挑战。
该结果现已发布在github上。
spicycamcast是一个最小的javascript库（在3kb下），简化了web应用程序中的相机和屏幕截图集成。它具有现代javascript功能，提供了用于管理视频流和捕获照片的直观api。
关键功能
- 轻量级
- ：少于3kb，保持应用程序束 现代javascript
- ：利用es6类，私人领域，承诺和异步等待 双功能
- ：处理同时处理相机流和屏幕录制 灵活的照片捕获
- ：支持多种格式（jpeg，png，webp）> >设备管理
- ：简单的视频设备检测和选择 快速启动指南
相机集成
import { spicycam } from './src/spicycamcast.js';
const videoelement = document.queryselector('video');
const spicycam = new spicycam(videoelement);
// start camera stream
spicycam.juststart()
.then(() => console.log('camera started'))
.catch(error => console.error('error:', error));
// capture photo
const canvaselement = document.queryselector('canvas');
const photodataurl = spicycam.capturephotoasjpeg(canvaselement);
屏幕记录
import { spicycast } from './src/spicycamcast.js';
const videoelement = document.queryselector('video');
const spicycast = new spicycast(videoelement);
spicycast.startscreencast()
.then(() => console.log('screencast started'))
.catch(error => console.error('error:', error));
捕获照片
const canvaselement = document.queryselector('canvas');
const photodataurl = spicycam.capturephotoasjpeg(canvaselement);
console.log('captured photo:', photodataurl);
spicycamcast提供了从活动视频流提供灵活的照片捕获。以多种格式捕获：// JPEG capture const jpegPhoto = spicyCam.capturePhotoAsJpeg(canvasElement); // PNG capture for lossless quality const pngPhoto = spicyCam.capturePhotoAsPng(canvasElement); // WebP for optimal compression const webpPhoto = spicyCam.capturePhotoAsWebp(canvasElement);
每个方法都返回一个可以直接在
>元素中或上传到服务器的数据url字符串。
spicycamcast旨在简化web开发人员的媒体捕获。通过专注于基本功能并提供简洁的api，它提供了一种轻巧有效的解决方案，可将相机和屏幕截图功能集成到您的项目中。
我鼓励您在github -spicycamcast上探索完整的文档和示例。
