为什么我构建了spicycamcast
在开发新的数字标牌应用程序时,我需要可靠的屏幕截图和网络摄像头记录功能。现有的图书馆虽然有能力,但通常是不必要的复杂性或不够清晰的。我看到了一个更简单的东西的机会。
>
> spicycamcast从这种需求中浮现出来 - 一个最小的,专门的图书馆,以最小的大惊小怪处理媒体捕获。这不仅是另一个网络摄像头库;这是一个实用的解决方案,源于现实世界的数字标牌开发挑战。
该结果现已发布在
git
hub上。
Git
程序猿必备版本控制工具
下载
spicycamcast是一个最小的javascript库(在3kb下),简化了web应用程序中的相机和屏幕截图集成。它具有现代javascript功能,提供了用于管理视频流和捕获照片的直观api。
关键功能
轻量级
:少于3kb,保持应用程序束
现代javascript
:利用es6类,私人领域,承诺和异步等待
双功能
:处理同时处理相机流和屏幕录制
灵活的照片捕获
:支持多种格式(jpeg,png,webp)
>
>设备管理
:简单的视频设备检测和选择
快速启动指南
相机集成
屏幕记录
捕获照片
spicycamcast提供了从活动视频流提供灵活的照片捕获。以多种格式捕获:
每个方法都返回一个可以直接在
>元素中或上传到服务器的数据url字符串。
>
结论
spicycamcast旨在简化web开发人员的媒体捕获。通过专注于基本功能并提供简洁的api,它提供了一种轻巧有效的解决方案,可将相机和屏幕截图功能集成到您的项目中。
您是构建交互式web应用程序,创建数字标牌体验还是开发以视频为中心的工具,spicycamcast为您的媒体捕获需求提供了坚实的基础。
我鼓励您在github -spicycamcast上探索完整的文档和示例。
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);
// 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);
