large-screen-height

介绍

适用大屏项目的响应式方案

安装教程

npm i webrtc-screen-recorder -s

API 说明

/**
 * 构造函数，初始化录制选项和相关变量
 * @param {Object} options - 用户自定义的录制选项
 默认的录制选项
 {
        // 视频录制的相关选项
        video: {
            cursor: 'always', // 鼠标状态
            frameRate: 30, // 视频帧率
        },
        // 是否录制音频
        audio: true,
        // MediaRecorder 的配置选项
        mediaRecorderOption: {
            videoBitsPerSecond: 2500000, // 视频比特率
            mimeType: 'video/webm', // 录制媒体的 MIME 类型
            audioBitsPerSecond: 128000, // 音频比特率，128 kbps
        },
        // 录制频率，每 1000 毫秒推流录制一次
        rcordFrequency: 1000,
        // 是否优先录制当前标签页
        preferCurrentTab: false,
 }
 */

 new Recorder(options)



/**
 * 启动屏幕录制功能
 * @param {Function} availableCallback - 当数据可用时调用的回调函数
 * @returns {Promise<boolean>} - 返回一个Promise，指示录制是否成功开始
 */
  start()

/**
 * 停止屏幕录制
 *
 * 本方法用于停止屏幕录制功能，清除当前的视频源和blob对象，并从WebScreenRecorder中获取停止录制后的视频数据
 * 它创建一个新的blob对象表示的视频源，并返回包含视频数据和视频源URL的对象
 *
 * @returns {Object} 包含视频blob对象和视频源临时URL的对象
 */
stop ()


/**
 * 下载录制的视频文件
 *
 * 该函数用于触发浏览器下载一个视频文件如果提供了文件名参数，则使用该名称作为下载文件的名称
 * 如果没有提供，则使用默认名称如果录制的视频数据（videoBlob）不存在，则在控制台输出错误信息
 * 并返回 false，表示下载失败如果视频数据存在，则创建一个临时的 URL 对象，生成一个隐藏的<a>标签
 * 用于下载，并在用户点击后触发下载功能，最后移除临时的 URL 对象和<a>标签
 *
 * @param {string} [name] - 可选参数，指定下载文件的名称如果没有提供，默认为'screen_recording'
 * @returns {boolean} - 返回 true 表示下载成功，返回 false 表示下载失败
 */

 downloadRecording()

使用说明

<script setup>
import Recorder from 'webrtc-screen-recorder'
const  webRtcRecorder = Recorder()
let callback = (blob,times) => {
    console.log('实时视频流blob,录制时间times')
}
<!-- 开始录制 -->
webRtcRecorder.start(callback)

<!-- 停止录制 -->
webRtcRecorder.stop()

<!-- 下载录制的视频 -->
webRtcRecorder.downloadRecording('视频名称')

</script>

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request