src/tools/camera-recorder/useMediaRecorder.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

import { computed, ref, type Ref } from 'vue';

export { useMediaRecorder };

function useMediaRecorder({ stream }: { stream: Ref<MediaStream | undefined> }): {
  isRecordingSupported: Ref<boolean>;
  recordingState: Ref<'stopped' | 'recording' | 'paused'>;
  startRecording: () => void;
  stopRecording: () => void;
  pauseRecording: () => void;
  resumeRecording: () => void;
  onRecordAvailable: (cb: (url: string) => void) => void;
} {
  const isRecordingSupported = computed(() => MediaRecorder.isTypeSupported('video/webm'));
  const mediaRecorder = ref<MediaRecorder | null>(null);
  const recordedChunks = ref<Blob[]>([]);
  const recordAvailable = createEventHook();
  const recordingState = ref<'stopped' | 'recording' | 'paused'>('stopped');

  const startRecording = () => {
    if (!isRecordingSupported.value) return;
    if (!stream.value) return;
    if (recordingState.value !== 'stopped') return;

    mediaRecorder.value = new MediaRecorder(stream.value, { mimeType: 'video/webm' });

    mediaRecorder.value.ondataavailable = (e) => {
      if (e.data.size > 0) {
        recordedChunks.value.push(e.data);
      }
    };

    mediaRecorder.value.onstop = () => {
      recordAvailable.trigger(createVideo());
    };

    if (mediaRecorder.value.state !== 'inactive') return;

    mediaRecorder.value.start();
    recordingState.value = 'recording';
  };

  const stopRecording = () => {
    if (!isRecordingSupported.value) return;
    if (!mediaRecorder.value) return;
    if (recordingState.value === 'stopped') return;

    mediaRecorder.value.stop();
    recordingState.value = 'stopped';
  };

  const pauseRecording = () => {
    if (!isRecordingSupported.value) return;
    if (!mediaRecorder.value) return;
    if (recordingState.value !== 'recording') return;

    mediaRecorder.value.pause();
    recordingState.value = 'paused';
  };

  const resumeRecording = () => {
    if (!isRecordingSupported.value) return;
    if (!mediaRecorder.value) return;

    if (recordingState.value !== 'paused') return;

    mediaRecorder.value.resume();
    recordingState.value = 'recording';
  };

  const createVideo = () => {
    const blob = new Blob(recordedChunks.value, { type: 'video/webm' });
    const url = URL.createObjectURL(blob);
    recordedChunks.value = [];
    return url;
  };

  return {
    isRecordingSupported,
    startRecording,
    stopRecording,
    pauseRecording,
    resumeRecording,
    recordingState,

    onRecordAvailable: recordAvailable.on,
  };
}