fix(meteor): Video Record button disabled on iOS browsers (RocketChat…

…#29649) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
sampaiodiego · Jun 27, 2023 · 6f3eeec · 6f3eeec
1 parent ef10761
commit 6f3eeec
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 12 deletions.
diff --git a/.changeset/itchy-hotels-care.md b/.changeset/itchy-hotels-care.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+fixed video message button disabled on iOS browsers
diff --git a/apps/meteor/app/ui/client/lib/recorderjs/videoRecorder.ts b/apps/meteor/app/ui/client/lib/recorderjs/videoRecorder.ts
@@ -17,6 +17,16 @@ class VideoRecorder {
 
 	private mediaRecorder: MediaRecorder | undefined;
 
+	public getSupportedMimeTypes() {
+		if (window.MediaRecorder.isTypeSupported('video/webm')) {
+			return 'video/webm; codecs=vp8,opus';
+		}
+		if (window.MediaRecorder.isTypeSupported('video/mp4')) {
+			return 'video/mp4';
+		}
+		return '';
+	}
+
 	public start(videoel?: HTMLVideoElement, cb?: (this: this, success: boolean) => void) {
 		this.videoel = videoel;
 
@@ -51,7 +61,7 @@ class VideoRecorder {
 			return;
 		}
 
-		this.mediaRecorder = new MediaRecorder(this.stream, { mimeType: 'video/webm; codecs=vp8,opus' });
+		this.mediaRecorder = new MediaRecorder(this.stream, { mimeType: this.getSupportedMimeTypes() });
 		this.mediaRecorder.ondataavailable = (blobev) => {
 			this.chunks.push(blobev.data);
 			if (!this.recordingAvailable.get()) {
@@ -66,7 +76,6 @@ class VideoRecorder {
 		if (!this.videoel) {
 			return;
 		}
-
 		this.stream = stream;
 
 		try {
@@ -76,11 +85,6 @@ class VideoRecorder {
 			this.videoel.src = URL.createObjectURL(stream as unknown as MediaSource | Blob);
 		}
 
-		this.videoel.muted = true;
-		this.videoel.onloadedmetadata = () => {
-			void this.videoel?.play();
-		};
-
 		this.started = true;
 		return this.cameraStarted.set(true);
 	}

diff --git a/apps/meteor/client/views/composer/VideoMessageRecorder/VideoMessageRecorder.tsx b/apps/meteor/client/views/composer/VideoMessageRecorder/VideoMessageRecorder.tsx
@@ -29,6 +29,14 @@ const videoContainerClass = css`
 	}
 `;
 
+const getVideoRecordingExtension = () => {
+	const supported = VideoRecorder.getSupportedMimeTypes();
+	if (supported.match(/video\/webm/)) {
+		return 'webm';
+	}
+	return 'mp4';
+};
+
 const VideoMessageRecorder = ({ rid, tmid, chatContext, reference }: VideoMessageRecorderProps) => {
 	const t = useTranslation();
 	const videoRef = useRef<HTMLVideoElement>(null);
@@ -75,8 +83,8 @@ const VideoMessageRecorder = ({ rid, tmid, chatContext, reference }: VideoMessag
 
 	const handleSendRecord = async () => {
 		const cb = async (blob: Blob) => {
-			const fileName = `${t('Video_record')}.webm`;
-			const file = new File([blob], fileName, { type: 'video/webm' });
+			const fileName = `${t('Video_record')}.${getVideoRecordingExtension()}`;
+			const file = new File([blob], fileName, { type: VideoRecorder.getSupportedMimeTypes().split(';')[0] });
 			await chat?.flows.uploadFiles([file]);
 			chat?.composer?.setRecordingVideo(false);
 		};
@@ -94,7 +102,7 @@ const VideoMessageRecorder = ({ rid, tmid, chatContext, reference }: VideoMessag
 	};
 
 	useEffect(() => {
-		if (!window.MediaRecorder.isTypeSupported('video/webm; codecs=vp8,opus')) {
+		if (!VideoRecorder.getSupportedMimeTypes()) {
 			return dispatchToastMessage({ type: 'error', message: t('Browser_does_not_support_recording_video') });
 		}
 
@@ -109,7 +117,7 @@ const VideoMessageRecorder = ({ rid, tmid, chatContext, reference }: VideoMessag
 		<PositionAnimated visible='visible' anchor={reference} placement='top-end'>
 			<Box bg='light' padding={4} borderRadius={4} elevation='2'>
 				<Box className={videoContainerClass} overflow='hidden' height={240} borderRadius={4}>
-					<video ref={videoRef} width={320} height={240} />
+					<video muted autoPlay playsInline ref={videoRef} width={320} height={240} />
 				</Box>
 				<Box mbs={4} display='flex' justifyContent='space-between'>
 					<Button small onClick={handleRecord}>

diff --git a/...mponents/body/composer/messageBox/MessageBoxActionsToolbar/actions/VideoMessageAction.tsx b/...mponents/body/composer/messageBox/MessageBoxActionsToolbar/actions/VideoMessageAction.tsx
@@ -5,6 +5,7 @@ import { useTranslation, useSetting } from '@rocket.chat/ui-contexts';
 import type { AllHTMLAttributes } from 'react';
 import React, { useEffect, useMemo } from 'react';
 
+import { VideoRecorder } from '../../../../../../../../../app/ui/client/lib/recorderjs/videoRecorder';
 import type { ChatAPI } from '../../../../../../../../lib/chats/ChatAPI';
 import { useChat } from '../../../../../../contexts/ChatContext';
 import { useMediaActionTitle } from '../../hooks/useMediaActionTitle';
@@ -33,7 +34,7 @@ const VideoMessageAction = ({ collapsed, chatContext, disabled, ...props }: Vide
 					isVideoRecorderEnabled &&
 					!fileUploadMediaTypeBlackList?.match(/video\/webm|video\/\*/i) &&
 					(!fileUploadMediaTypeWhiteList || fileUploadMediaTypeWhiteList.match(/video\/webm|video\/\*/i)) &&
-					window.MediaRecorder.isTypeSupported('video/webm; codecs=vp8,opus'),
+					Boolean(VideoRecorder.getSupportedMimeTypes()),
 			),
 		[fileUploadMediaTypeBlackList, fileUploadMediaTypeWhiteList, isFileUploadEnabled, isPermissionDenied, isVideoRecorderEnabled],
 	);