复制管道媒体记录器
@addpipe/react-pipe-media-recorder 为 TypeScript 和 JavaScript 的集成提供了完全输入的反键钩,引入了 管道平台 输入您的反应项目 。 此包允许视频,音频,和屏幕+相机录制. 对于需要获取视频反馈,消息,恢复等用户生成内容的应用程序来说,这是理想的. 记录器易于设置并确保跨平台相容,同时在桌面和移动设备上工作.
与 @addpipe/react-pipe-media-recorder时,您可以:
- 记录高质量 音频和视频 内容直接来自用户.
- 捕获 屏幕和相机 用于详细的视觉反馈或演示.
- 嵌入多台录音机 用于各种用户交互的页面.
说明: 您需要免费审判或与 插管 用于使用此软件包.
如何装入 : 截至版本
1.3.0,记录客户端直接通过@addpipe/pipe-recording-clientnpm 包而不是通过远程插入页面<script>编号 :<link>标签。 Pipe记录客户端由钩子导入,所以你的捆绑器(Vite,webpack,Next.js,CRA,.)自动处理,不需要额外的设置. 记录器仍然在运行时与Pipe的服务器进行通信;只有客户端的加载方式已经改变. 录音客户端版本遵循此软件包@addpipe/pipe-recording-client依赖范围(^2.0.0; 见 固定一个特定的录音客户端版本 如果你需要锁定它 准确释放.
特征 :
- 视频、音频和屏幕记录: 在任何 React app 中加入高质量的媒体记录功能,支持桌面和移动设备.
- 最多4K视频: 支持录制可达4K分辨率.
- 无上传时间:在创建时流出录音,将用户的等待时间降到最低.
- 移动兼容性: 支持HTML Media Capture用于移动视频/音频录制.
- 屏幕+相机录音:同步抓取屏幕和相机,以提升记录能力.
- 多语种支持: 以多种语文提供:英语、法语、德语和西班牙语,并提供自定义语言支持.
- 键盘访问:通过键盘可完全控制,以改善无障碍性.
- 连接复原力: 自动重联,如果连接在录制过程中下降,则确保数据恢复.
安装
使用 npm 安装软件包 :
npm install @addpipe/react-pipe-media-recorder
用法实例
👉 就业: 您可以找到工作演示 这里。演示的源代码在JavaScript和TypeScript React中都有。 找到更多关于它 这里。 。 。 .
在页面中插入单个记录器
在这个例子中,我们将一个单管记录器插入到页面中,并使用记录器的API来控制record() 财务报告和审定财务报表 stopVideo()) (中文(简体) ).
import { useState } from "react";
import usePipeSDK from "@addpipe/react-pipe-media-recorder"; // Importing the Pipe recorder npm package
// Inserting a single Pipe recorder into the page
const SingleRecorder = () => {
// Storing the generated recorder inside of a state - optional
const [recorder, setRecorder] = useState(null);
const [canRecord, setCanRecord] = useState(false);
// Using the Pipe recorder custom hook
const { isLoaded } = usePipeSDK((PipeSDK) => {
// Check to make sure the code below is only executed on the initial load
if (isLoaded) return;
// Prepare the parameters needed to generate a new recorder
const pipeParams = { size: { width: 640, height: 390 }, qualityurl: "avq/360p.xml", accountHash: "YOUR_ACCOUNT_HASH", eid: "YOUR_ENV_CODE", mrt: 600, avrec: 1 };
// Inserting a new recorder into the page
PipeSDK.insert("custom-id", pipeParams, (pipeRecorder) => {
setRecorder(pipeRecorder); // Store the recorder instance for later use
pipeRecorder.onReadyToRecord = () => {
setCanRecord(true);
}
});
});
// Function to start a new recording using the recorder's API
const startRecording = () => {
if (!recorder || !canRecord) return;
recorder.record(); // Call to start recording
};
// Function to stop a recording using the recorder's API
const stopRecording = () => {
if (!recorder || !canRecord) return;
recorder.stopVideo(); // Call to stop recording
};
return (
<div>
{!isLoaded && <div>Loading the Pipe recorder</div>}
<div id="custom-id"></div> {/* Placeholder for where the new recorder should be inserted */}
{isLoaded && recorder && (
<>
{/* Buttons to control the recorder - Only display them after all prerequisites have loaded */}
<button onClick={startRecording}>Record</button>
<button onClick={stopRecording}>Stop</button>
</>
)}
</div>
);
};
export default SingleRecorder;
从我们的欧盟客户端交付服务器(S1)上装入一个单一记录器
在这个例子中,我们将一个单管记录器插入到页面中,并使用记录器的API来控制record() 财务报告和审定财务报表 stopVideo()) (中文(简体) ). 我们从欧盟客户端交付服务器(S1)装入其静态资产,而不是通过通过默认的全球CDN useS1: true。 。 。 .
折旧: 这个
buildSlug选项不再有任何效果,只保留后向兼容性。 它曾经要求具体pipe.min.js编号 :pipe.min.css释放; 记录客户端版本现在由已安装的确定@addpipe/pipe-recording-client依赖性。 通过buildSlug记录一次性控制台警告。 要控制客户端版本,请参见 固定一个特定的录音客户端版本 见下文.
import { useState } from "react";
import usePipeSDK from "@addpipe/react-pipe-media-recorder"; // Importing the Pipe recorder npm package
// Inserting a single Pipe recorder into the page
const SingleRecorder = () => {
// Storing the generated recorder inside of a state - optional
const [recorder, setRecorder] = useState(null);
const [canRecord, setCanRecord] = useState(false);
// Custom options
const options = {
useS1: true, // Load from our EU client delivery servers (S1)
}
// Using the Pipe recorder custom hook with S1
const { isLoaded } = usePipeSDK((PipeSDK) => {
// Check to make sure the code below is only executed on the initial load
if (isLoaded) return;
// Prepare the parameters needed to generate a new recorder
const pipeParams = { size: { width: 640, height: 390 }, qualityurl: "avq/360p.xml", accountHash: "YOUR_ACCOUNT_HASH", eid: "YOUR_ENV_CODE", mrt: 600, avrec: 1 };
// Inserting a new recorder into the page
PipeSDK.insert("custom-id", pipeParams, (pipeRecorder) => {
setRecorder(pipeRecorder); // Store the recorder instance for later use
pipeRecorder.onReadyToRecord = () => {
setCanRecord(true);
}
});
}, options);
// Function to start a new recording using the recorder's API
const startRecording = () => {
if (!recorder || !canRecord) return;
recorder.record(); // Call to start recording
};
// Function to stop a recording using the recorder's API
const stopRecording = () => {
if (!recorder || !canRecord) return;
recorder.stopVideo(); // Call to stop recording
};
return (
<div>
{!isLoaded && <div>Loading the Pipe recorder</div>}
<div id="custom-id"></div> {/* Placeholder for where the new recorder should be inserted */}
{isLoaded && recorder && (
<>
{/* Buttons to control the recorder - Only display them after all prerequisites have loaded */}
<button onClick={startRecording}>Record</button>
<button onClick={stopRecording}>Stop</button>
</>
)}
</div>
);
};
export default SingleRecorder;
固定一个特定的录音客户端版本
此软件包取决于 @addpipe/pipe-recording-client 带范围 ^2.0.0,因此默认情况下,您可以得到最新的兼容性 2.x 记录客户端。 这是现代取代旧的 buildSlug 选项.
要将录制客户端锁定到一个精确的客户端版本,请从 你们自己 项目的 package.json (不是这个包裹的). 被捆绑在你的应用软件里的录音客户端是那里任何版本的解答.
无 (v8.3+) - 增加一个 overrides 字段 :
{
"overrides": {
"@addpipe/pipe-recording-client": "2.0.0"
}
}
亚伦/平分 - 添加一个 resolutions 字段 :
{
"resolutions": {
"@addpipe/pipe-recording-client": "2.0.0"
}
}
然后重新安装( R)npm install, (中文(简体) ), yarn,或 pnpm install)并用 npm ls @addpipe/pipe-recording-client现有版本列于 记录-客户端版本页面。 。 。 .
在页面中插入多个记录器
这个例子说明如何在页面中插入多个管道记录器.
import { useState } from "react";
import usePipeSDK from "@addpipe/react-pipe-media-recorder"; // Importing the Pipe recorder npm package
// Inserting multiple Pipe recorders into the page
const MultipleRecorders = () => {
// Storing the global PipeSDK into a state
const [pipeSdk, setPipeSdk] = useState(null);
// Custom IDs for the recorders
const CUSTOM_IDS = ["custom-id-1", "custom-id-2", "custom-id-3"];
// Using the Pipe recorder custom hook
const { isLoaded } = usePipeSDK((PipeSDK) => {
// Check to make sure the code below is only executed on the initial load
if (isLoaded) return;
// Prepare the parameters needed to generate new recorders
const pipeParams = { size: { width: 640, height: 390 }, qualityurl: "avq/360p.xml", accountHash: "YOUR_ACCOUNT_HASH", eid: "YOUR_ENV_CODE", mrt: 600, avrec: 1 };
// Inserting new recorders into the page
CUSTOM_IDS.forEach((id) => PipeSDK.insert(id, pipeParams, () => {}));
// Store PipeSDK into a state for controlling the recorders later
setPipeSdk(PipeSDK);
});
// Function to start a new recording using PipeSDK
const startRecording = (recorderId) => {
if (!pipeSdk) return;
pipeSdk.getRecorderById(recorderId).record(); // Call to start recording for a specific recorder
};
// Function to stop a recording using PipeSDK
const stopRecording = (recorderId) => {
if (!pipeSdk) return;
pipeSdk.getRecorderById(recorderId).stopVideo(); // Call to stop recording for a specific recorder
};
return (
<>
{CUSTOM_IDS.map((id, index) => (
<div key={index}>
<div id={id}></div> {/* Placeholder for where the new recorder should be inserted */}
{/* Buttons to control the recorder - Only display them after all prerequisites have loaded */}
{isLoaded && (
<>
<button onClick={() => startRecording(id)}>Record</button>
<button onClick={() => stopRecording(id)}>Stop</button>
</>
)}
</div>
))}
</>
);
};
export default MultipleRecorders;
控制记录器
要控制记录器,您可以使用API控制方法,例如:
record():开始新的录音.stopVideo():停止录音.
记录器的API控制方法的完整列表可见于官方 管道 API 文档。 。 。 .
嵌入码参数
这个 pipeParams 对象用于配置管道记录器。 以下是其结构的例子:
const pipeParams = {
size: { width: 640, height: 390 },
qualityurl: "avq/360p.xml",
accountHash: "YOUR_ACCOUNT_HASH",
eid: "YOUR_ENV_CODE",
mrt: 600,
avrec: 1,
// Additional options available in the official documentation
};
更详细的嵌入式编码选项,请参见 嵌入码选项。 。 。 .
文件和定价
关键词
- 录像机
- 录像
- 录音机
- 音频记录
- 屏幕记录器
- 屏幕记录
- 相机录音机
- 播放录相机
- 反射音频记录器
- 屏幕和相机抓取
- 媒体反应钩
释放
所有释放均可使用 这里