ScreenRecorder for Vue

A Vue component that can record the screen

简体中文 | English

Install

npm install screen-recorder-vue --save

Usage

• 1 . Simple use

<script setup lang="ts">
import ScreenRecorderVue from "screen-recorder-vue";

// Your other logic code...
</script>

<template>
  <!-- your other components... -->
  <ScreenRecorderVue />
</template>

• 2 . Enable preview and customize some information

<script setup lang="ts">
import ScreenRecorderVue from "screen-recorder-vue";

const videoOptions: MediaTrackConstraints = {
  width: 1920,
  height: 1080,
  frameRate: 60,
};

// Your other logic code...

</script>

<template>
  <!-- your other components... -->
  <ScreenRecorderVue
    preview
    start-btn-text="🛫 start"
    start-btn-style="color: #48bfa7"
    end-btn-text="🛑 end"
    end-btn-style="color: red;"
    :video-options="videoOptions"
  />
</template>

• 3 . Listening event callback

<script setup lang="ts">
import ScreenRecorderVue from "screen-recorder-vue";

const onStart = (mediaStream: MediaStream) => {
  /** Your logic code **/
}

const onError = (err: unknown) => {
  /** Your logic code **/
}

const onUnsupport = () => {
  /** Your logic code **/
}

const onEnd = (blobUrl: string, blob: Blob) => {
  /** Your logic code **/
}

// Your other logic code...

</script>

<template>
  <!-- your other components... -->
  <ScreenRecorderVue
    preview
    @recording-start="onStart"
    @recording-end="onEnd"
    @recording-unsupport="onUnsupport"
    @recording-error="onError"
  />
</template>

• 4 . Custom view

<script setup lang="ts">
import { ref } from "vue";
import ScreenRecorderVue from "screen-recorder-vue";

const recording = ref(false);

const start = (startEvent: Function) => {
  startEvent();
  recording.value = true;
};

const recordingEnd = (url: string) => {
  recording.value = false;
  console.log(url);
  // to do sth for url
};
// Your other logic code...

</script>

<template>
  <!-- your other components... -->
  <ScreenRecorderVue preview @recording-end="recordingEnd">
    <template v-slot:start="{ startEvent }">
      <!-- your custom components... -->
      <button v-if="!recording" @click="start(startEvent)">start</button>
    </template>

    <template v-slot:end="{ endEvent }">
      <!-- your custom components... -->
      <button v-if="recording" @click="endEvent">end</button>
    </template>

    <template v-slot:preview="{ mediaStream }">
      <!-- your custom components... -->
      <div>
        <video muted autoplay width="500" :srcObject="mediaStream"></video>
      </div>
    </template>
  </ScreenRecorderVue>
</template>

props

| propsName | required | type | default | desc | | ----------------- | -------- | --------------------- | ---------- | ------------------------------------------------------------------------------------------------------ | | short-key | false | string | - | shortcut key for starting, if you set shortcut, ESC will be set as the shortcut key to end recording | | preview | false | boolean | false | show preview | | video-options | false | MediaTrackConstraints | - | video options | | start-btn-text | false | string | 开始录屏 | the text for start-button | | start-btn-style | false | string | - | the style for start-button | | end-btn-text | false | string | 结束录屏 | the text for end-button | | end-btn-style | false | string | - | the style for end-button |

events

| eventsName | paramList | desc | | --------------------- | ----------------------------------- | ------------------------ | | recording-start | [ mediaStream: MediaStream ] | recorder start | | recording-end | [ blobUrl: string, blob: Blob ] | recorder end | | recording-unsupport | [] | recorder API unsupported | | recording-error | [ err: unknown ] | recorder error |

slots

| slotsName | paramList and type | desc | | --------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | start | { startEvent: Function, endEvent: Function } | Customize the view that triggers the start screen recording event；startEvent : start screen recording, endEvent: end screen recording | | end | { endEvent: Function, startEvent: Function } | Customize the view that triggers the end screen recording event; endEvent: end screen recording, startEvent : start screen recording | | preview | { mediaStream: MediaStream } | Customize video preview,mediaStream: it is the captured screen media stream, which can be assigned to the scrobject of video to preview and play |