@ bigbinary/ neto- media- recorder

概览

@bigbinary/neeto-media-recorder 是简化了媒体的 React 软件包 抓取过程。 它记录设备的屏幕和音频并上传 使用多段上传记录到 AWS S3 存储。 记录上限为15分 分钟后, 软件包就跨出纯网络应用程序 Electron 和浏览器 扩展.

它运送了四套出口:

• 构成部分 a 包括: MediaRecorder 内置的 UI 反应组件 控件以启动、暂停/重现、丢弃和重新启动记录.
• 核心 单子 screenRecorder 处理屏幕和 音频捕获, a getMultipartS3Uploader 方法,和 a useMultipartS3UploadStatus 追踪上传进度的回放钩.
• 公用事业 - 帮助者,例如: generatePublicUrl 以构建可分享的 链接.
• 常数 记录器状态、事件和出错表加 浏览器/扩展检测帮助器.

用于

这个软件包将屏幕的录制经验 带给需要录制的屏幕 套接字组 :

• neeto-record-web - 那个 网易应用.
• neeto-record-electron ——桌面(电子)应用.
• neeto-record-chrome-extension ——浏览器扩展.

安装

yarn add @bigbinary/neeto-media-recorder

使用量

此套件会输出出四套不同的功能和组件.

1. 构成部分
2. 公用事业
3. 常数
4. 核心

构成部分

• 媒体记录

  这个 MediaRecorder 响应组件抓取的设备屏幕并将其上传到 aWS S3 存储器。 它包含要启动、 暂停/ 重置、 丢弃的 UI 控制 并重新启动一个录音.

  您可以从 @bigbinary/neeto-media-recorder。 。 。 .

  import { MediaRecorder } from "@bigbinary/neeto-media-recorder";
  

  MediaRecorder 接受三种道具:

  • onUploadComplete: 一旦上传到 屏幕记录完成.
  • onRecordingCreated: 此调用会随录音被触发 一旦在服务器上创建,则在上传之前.
  • onDiscard: 当用户丢弃时, 此调用会被触发 屏幕记录.
  • appName: 此道具用于设置将使用的应用程序名称 拒绝信件。 默认将设定为 globalProps.appName
  • mimeType:此道具用于设定录音的MIME类型. 以 默认将设定为 video/webm;codecs=h264。 。 。 .

公用事业

您可以从 @bigbinary/neeto-media-recorder/utils。 。 。 .

import { generatePublicUrl } from "@bigbinary/neeto-media-recorder/utils";

• generatePublicUrl(recordingId, baseURL = window.location.origin)

  可用于为屏幕录制生成公共 URL recordingId 财务报告和审定财务报表 baseURL 作为论据.

常数

您可以从 @bigbinary/neeto-media-recorder/constants。 。 。 .

import { UPLOAD_EVENT, UPLOAD_STATUS,... } from "@bigbinary/neeto-media-recorder/constants"

可用的常数是:

const UPLOAD_EVENT = { onComplete: "onComplete" };

const UPLOAD_STATUS = {
  uploading: "uploading",
  completed: "completed",
  aborting: "aborting",
};

const SCREEN_RECORDER_STATUS = {
  media_aborted: "media_aborted",
  permission_denied: "permission_denied",
  no_specified_media_found: "no_specified_media_found",
  media_in_use: "media_in_use",
  invalid_media_constraints: "invalid_media_constraints",
  no_chrome_flags_set: "no_chrome_flags_set",
  recorder_error: "recorder_error",
  idle: "idle",
  acquiring_media: "acquiring_media",
  media_acquired: "media_acquired",
  restarting: "restarting",
  recording: "recording",
  stopping: "stopping",
  stopped: "stopped",
  paused: "paused",
};

const SCREEN_RECORDER_ERROR = {
  AbortError: "media_aborted",
  NotAllowedError: "permission_denied",
  NotFoundError: "no_specified_media_found",
  NotReadableError: "media_in_use",
  OverconstrainedError: "invalid_media_constraints",
  TypeError: "no_chrome_flags_set",
  None: "",
  NoRecorder: "recorder_error",
  UnSupportedBrowser: "unsupported_browser",
};

const SCREEN_RECORDER_EVENT = {
  onStart: "onStart",
  onStop: "onStop",
  onDiscard: "onDiscard",
  onDataAvailable: "onDataAvailable",
  onDiscardDuringCountdown: "onDiscardDuringCountdown",
  onRestart: "onRestart",
  onReUpload: "onReUpload",
  onReUploadFromDisk: "onReUploadFromDisk",
  onPause: "onPause",
  onResume: "onResume",
};

const HAS_CHROME_NAMESPACE = typeof chrome === "object";

const IS_EXTENSION = HAS_CHROME_NAMESPACE && isNotNil(chrome.extension);

const IS_SAFARI = platform.name === "Safari";

const IS_SAFARI_EXTENSION = IS_SAFARI && IS_EXTENSION;

核心

这个 @bigbinary/neeto-media-recorder/core 包含单通类 screenRecorder 财务报告和审定财务报表 getMultipartS3Uploader 方法和反应钩 useMultipartS3UploadStatus。 。 。 .

import {
  screenRecorder,
  getMultipartS3Uploader,
  useMultipartS3UploadStatus,
} from "@bigbinary/neeto-media-recorder/core";

• 屏幕反馈

  它处理屏幕和音频捕获过程. 录音有限 到15分钟。 提供的各种方法 screenRecorder 它们是:

  • startRecording()

    曾经开始屏幕录音.

  • stopRecording()

    曾停止当前屏幕录音.

  • pauseRecording()

    曾暂停当前屏幕录制.

  • resumeRecording()

    曾恢复屏幕录音.

  • discardRecording()

    用于丢弃当前屏幕记录 .

  • restartRecording()

    用于丢弃当前屏幕录制并开始新的.

  • addCallback(event, callback)

    曾为特定屏幕记录事件添加回调功能. 这个 常数 SCREEN_RECORDER_EVENT 包含所有可能的屏幕记录 事件.

    screenRecorder.addCallback(
      SCREEN_RECORDER_EVENT.onStart,
      handleStartRecording
    );
    

  • removeCallback(event, callback)

    用于通过提供事件和召回来删除已经添加的召回 将删除.

    screenRecorder.removeCallback(
      SCREEN_RECORDER_EVENT.onStart,
      handleStartRecording
    );
    

  • removeAllCallbacksByEvent(event)

    用于去除所有与特定事件相关的回调 .

    screenRecorder.removeCallback(SCREEN_RECORDER_EVENT.onStart);
    

  • resetState()

    曾将屏幕收录指令的内部状态重置为初始状态.

  • revokePermissions()

    用于取消浏览器访问MediaRecorder api的权限.

  • useRecorderStore()

    可用以了解屏幕重排状态和错误的 zustand 商店 如果在反应组件内发生任何情况

  • setAudioConfiguration({ deviceId, ...}) 用于设置配置 音频设备。 参考: https://w3c.github.io/mediacapture-main/#dom-mediachrack 支持的制约

  • videoStream 客户端可以设置的只写属性 视频流,一旦设置了屏幕反馈程序,将无法获取新视频 流或请求共享屏幕的权限.

• 获得多部分S3 卸载器

  它返回一个实例 MultipartS3Uploader 处理上传 将屏幕数据录入AWS S3存储.

  getMultipartS3Uploader 可选择接受以下对象 属性 :

  • initialize

    设定为 true它会自动初始化一个新的实例 MultipartS3Uploader 并归还它。 这是有用的,当你想要清理 上加现有的多段上传实例,并创建一个新的实例.

  这个 MultipartS3Uploader 实例返回 getMultipartS3Uploader 提供将录音以多块形式上传到S3的能力。 这个 提供的方法 MultipartS3Uploader 实例如下:

  • setRecording(recordingId, uploadId)

    用于初始化 multipartS3Uploader 通过提供 recordingId 财务报告和审定财务报表 uploadId。 。 。 . recordingId 财务报告和审定财务报表 uploadId 可以通过创建 新记录 neeto-record-web。 。 。 .

  • push(data)

    曾将所记录块上传到S3.

  • completeUpload()

    录音完成后,应使用这种方法标出 记录完成.

  • abortUpload()

    用来丢弃部分上传的录音.

  • resetState()

    曾将多部分S3Uploader的内部状态重置为初始状态.

  • addCallback(event, callback)

    曾将回调功能添加到特定的上传事件. 常数 UPLOAD_EVENT 包含所有可能的上传事件.

  • removeCallback(event, callback)

    用于通过提供事件和召回来删除已经添加的召回 将删除.

  • status

    返回当前状态的财产 MultipartS3Uploader 举个例子.

  • mimeType

    返回录音的 mime 类型的属性 .

  • setMimeType(mimeType)

    用于设定录音的MIME类型.

• 使用多部件S3升载状态

  用于了解当前状态的反应钩 MultipartUploader 举个例子 只要状态不变,它就会放弃组件 变化.

  const { status, isStatus } = useMultipartS3UploadStatus();
  // `status` can be one of the following:
  // UPLOAD_STATUS.uploading, UPLOAD_STATUS.completed, UPLOAD_STATUS.aborting, UPLOAD_STATUS.error, UPLOAD_STATUS.insufficient_data
  // `isStatus` is a function which can be used to check if the current status is one of the given statuses.
  isStatus(UPLOAD_STATUS.uploading); // will return true if the current status is UPLOAD_STATUS.uploading
  isStatus(UPLOAD_STATUS.uploading, UPLOAD_STATUS.completed); // will return true if the current status is either UPLOAD_STATUS.uploading or UPLOAD_STATUS.completed
  

发展

通过执行以下命令安装所有依赖性

yarn install

使用主机应用程序

1. 克隆这个仓库.
2. 运行 yarn install 下载依赖并设置开发 环境.
3. 准备好主机应用程序 .
4. 运行 yarn watch 在保存文件时自动转换代码。 你个 可以运行 yarn build 如果你只想运行一个建筑.
5. 在不同的终端,运行 yalc publish 出版时间 需要媒体记录员到当地雅尔克商店.
6. 运行 yalc add @bigbinary/neeto-media-recorder 以安装 需要媒体录制到主机应用程序.
7. 在对 neeto-media-recorder运行 yarn release 来推动修改到主机应用程序(假设您在监视中) 模式和更改自动捆绑。 重新启动网络软件包- dev- server 如果不应用更改,则在主机中.
8. 关于如何使用雅尔克语的视频解释: https://www.youtube.com/watch?v=Q BiYGP0Rhe0 页面存档备份,存于互联网档案馆

建造并放出.

这个 @bigbinary/neeto-neeto-media-recorder 当 我们合并了 PR 和 patch, (中文(简体) ), minor 或者说 major 标签到 main 树枝。 这个 patch 标签用于错误修正, minor 标签用于新特性和 major 标签用于断开更改。 你可以去检查 Create and publish releases gitHub Actions中的工作流程获取实时更新.

如果不能添加标签,可以手动发布软件包. 首先,您需要创建 PR 来更新版本编号 package.json 文件并合并到 main 树枝。 合并公关后,你 需要创建一个 新 github 释放 从主分支。 每当创建新版本编号时, github 动作将自动发布已建软件包到 npm 。 你们可以 检查 Publish to npm gitHub Actions中的工作流程获取实时更新.

请注意,在发布软件包之前,需要验证 本地使用 neto 网页应用程序中的功能 yalc 软件包 经理.

项目一体化