89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
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,
|
|
};
|
|
}
|