ZTranscribe

录制画面，支持录制本地画面或通过摄像头进行画面录制。

DANGER

注意事项：在使用时，你应确保所处环境为以下环境中的任意一种 HTTPS、Localhost，否则游览器出于安全策略将会阻止您的行为。

基础用法

使用 transcribe 开始制录制视频

<template>
  <div>
    <z-button type="primary" @click="startScreenRecording">开始录屏</z-button>
    <z-button @click="stopScreenRecording">停止录屏</z-button>
  </div>
</template>

<script setup lang="ts">
import { transcribe } from "@d7ee/z-base-ui";


let md: any;

// 录屏
const startScreenRecording = () => {
  md = transcribe();

  // 录制时回调
  md.onsuccess = () => {
    console.log("正在录制");
  };

  // 接收数据
  md.onchange = (chunks: Boolean[]) => {
    console.log(chunks);
  };

  // 开始录制
  md.start();
};

const stopScreenRecording = () => {
  md && md.stop();
};
</script>

实时预览

在 onsuccess 的回调函数中接收一个参数 stream，参数类型为 MediaStream。

<template>
  <div>
    <video src="" autoplay muted ref="RVideo" class="video"></video>
    <z-button type="primary" @click="startScreenRecording">开始录屏</z-button>
    <z-button @click="stopScreenRecording">停止录屏</z-button>
  </div>
</template>

<script setup lang="ts">
import { transcribe } from "@d7ee/z-base-ui";
import { ref } from "vue";


let md: any;
const RVideo = ref<HTMLVideoElement | null>(null);


// 录屏
const startScreenRecording = () => {
  md = transcribe();

  // 录制时回调
  md.onsuccess = (stream: MediaStream) => {
    if (RVideo.value) {
      RVideo.value.srcObject = stream;
    }

    console.log("正在录制");
  };

  // 接收数据
  md.onchange = (chunks: Boolean[]) => {
    console.log(chunks);
  };

  // 开始录制
  md.start();
};

const stopScreenRecording = () => {
  md && md.stop();
};
</script>

<style>
.video {
  width: 250px;
  height: 250px;
  border: 1px solid red;
}
</style>

API 属性

transcribe - 参数1

属性名	说明	类型	默认值
time	几秒推一次流，单位秒	number	5s
base64	流返回的格式是否转换为base64	boolean	false
blobType	通过Blob从而实现类型：如视频：video/mp4	string	video/mp4
device	录制视频还是启用摄像头，0 摄像头，1 视频	0 | 1	1
config	{audio?: boolean, video?: boolean}，是否录制音视频，详见MediaDevices	boolean	—

transcribe 使用说明

import { transcribe } from "@/components/ZTranscribe/method";

// ITranscribeConfig
export interface ITranscribeConfig {
  // 几秒返回一次数据,单位s 默认5s
  time?: number;
  // 数据返回格式为base64
  base64?: boolean;
  // blob输出类型为自定义格式如视频格式：video/mp4
  blobType?: string;
  // 录制类型 0 摄像头 1 录制本地视频
  device?: 0 | 1;
  // mediaDevices 配置
  config?: DisplayMediaStreamOptions;
}

// number类型时为几秒返回一次数据
const md = transcribe(config?: ITranscribeConfig | number);

事件说明

// 数据发生更新时触发，用于接收数据流
md.onchange = (chunks: Blob[], str?: string | ArrayBuffer | null) => {}

// 正式开始录屏时触发，接收一个参数，该参数可用于实时播放视频
md.onsuccess = (stream: MediaStream) => {};

// 停止录屏时触发
md.onstop = () => {};

// 发生异常时触发
md.onerror = (params: transcribeErrEvt) => {};

// 下载视频，调用该函数后会触发下载行为
md.exportVideo();

// 结束录屏，调用该函数后会停止录屏
md.stop();

// 开始录屏，调用该方法后开启屏幕录制
md.start();

transcribeErrEvt

// cancel 取消录屏，role 权限问题，other 其它原因，export 导出视频
type transcribeErrType = "cancel" | "role" | "other" | "export";

export interface transcribeErrEvt {
  type: transcribeErrType,
  info: string
}