From 3b72174b1c36a4a1d694c1e8d1e3605233436c35 Mon Sep 17 00:00:00 2001 From: Daniel Kulangiev Date: Wed, 7 Apr 2021 12:18:25 -0400 Subject: [PATCH 1/3] issue #44 --- client/src/components/WebcamCapture.js | 8 ++++++-- package.json | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/client/src/components/WebcamCapture.js b/client/src/components/WebcamCapture.js index 4fdda1a..53e297b 100644 --- a/client/src/components/WebcamCapture.js +++ b/client/src/components/WebcamCapture.js @@ -53,7 +53,9 @@ const WebcamStreamCapture = ({ ({ data }) => { if (!data || data.size === 0) return const blob = new Blob([data], { - type: 'video/webm', + type: MediaRecorder.isTypeSupported('video/mp4') + ? 'video/mp4' + : 'video/webm', }) onStopCapture(blob) }, @@ -64,7 +66,9 @@ const WebcamStreamCapture = ({ const constraints = getConstraints() stream = await navigator.mediaDevices.getUserMedia(constraints) mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, { - mimeType: 'video/webm', + mimeType: MediaRecorder.isTypeSupported('video/mp4') + ? 'video/mp4' + : 'video/webm', }) mediaRecorderRef.current.addEventListener('dataavailable', onDataAvailable) onCaptureReady() diff --git a/package.json b/package.json index ebeca62..df537f7 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "dev": "concurrently \"npm run server/server.js\" \"npm run client\"", - "start": "concurrently \"node server/server.js\" \"npm run client\"", + "start": "BROWSER=none concurrently \"node server/server.js\" \"npm run client\"", "server": "nodemon server/server.js", "client": "node start-client.js", "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build", From e085b4e80846070b369c51e586e45c531ce4448d Mon Sep 17 00:00:00 2001 From: Daniel Kulangiev Date: Tue, 13 Apr 2021 15:06:38 -0400 Subject: [PATCH 2/3] Remove open new browser prevention on npm start --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index df537f7..ebeca62 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "dev": "concurrently \"npm run server/server.js\" \"npm run client\"", - "start": "BROWSER=none concurrently \"node server/server.js\" \"npm run client\"", + "start": "concurrently \"node server/server.js\" \"npm run client\"", "server": "nodemon server/server.js", "client": "node start-client.js", "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build", From db67fdcdc58d32c94bd54e75e5d03ee2297e40ba Mon Sep 17 00:00:00 2001 From: Daniel Kulangiev Date: Mon, 26 Apr 2021 13:03:09 -0400 Subject: [PATCH 3/3] Change MediaRecorder fallback to mp4 --- client/src/components/WebcamCapture.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/client/src/components/WebcamCapture.js b/client/src/components/WebcamCapture.js index 53e297b..fe903b4 100644 --- a/client/src/components/WebcamCapture.js +++ b/client/src/components/WebcamCapture.js @@ -53,9 +53,9 @@ const WebcamStreamCapture = ({ ({ data }) => { if (!data || data.size === 0) return const blob = new Blob([data], { - type: MediaRecorder.isTypeSupported('video/mp4') - ? 'video/mp4' - : 'video/webm', + type: MediaRecorder.isTypeSupported('video/webm') + ? 'video/webm' + : 'video/mp4', }) onStopCapture(blob) }, @@ -66,9 +66,9 @@ const WebcamStreamCapture = ({ const constraints = getConstraints() stream = await navigator.mediaDevices.getUserMedia(constraints) mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, { - mimeType: MediaRecorder.isTypeSupported('video/mp4') - ? 'video/mp4' - : 'video/webm', + mimeType: MediaRecorder.isTypeSupported('video/webm') + ? 'video/webm' + : 'video/mp4', }) mediaRecorderRef.current.addEventListener('dataavailable', onDataAvailable) onCaptureReady()