Use extended mediarecorder

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

lib/Controller/PageController.php

@@ -262,6 +262,14 @@ class PageController extends Controller {
 		$csp = new ContentSecurityPolicy();
 		$csp->addAllowedConnectDomain('*');
 		$csp->addAllowedMediaDomain('blob:');
+		$csp->addAllowedWorkerSrcDomain('blob:');
+		$csp->addAllowedWorkerSrcDomain("'self'");
+		$csp->addAllowedChildSrcDomain('blob:');
+		$csp->addAllowedChildSrcDomain("'self'");
+		$csp->addAllowedScriptDomain('blob:');
+		$csp->addAllowedScriptDomain("'self'");
+		$csp->addAllowedConnectDomain('blob:');
+		$csp->addAllowedConnectDomain("'self'");
 		$csp->addAllowedImageDomain('https://*.tile.openstreetmap.org');
 		$response->setContentSecurityPolicy($csp);
 		return $response;
@@ -315,6 +323,14 @@ class PageController extends Controller {
 		$csp = new ContentSecurityPolicy();
 		$csp->addAllowedConnectDomain('*');
 		$csp->addAllowedMediaDomain('blob:');
+		$csp->addAllowedWorkerSrcDomain('blob:');
+		$csp->addAllowedWorkerSrcDomain("'self'");
+		$csp->addAllowedChildSrcDomain('blob:');
+		$csp->addAllowedChildSrcDomain("'self'");
+		$csp->addAllowedScriptDomain('blob:');
+		$csp->addAllowedScriptDomain("'self'");
+		$csp->addAllowedConnectDomain('blob:');
+		$csp->addAllowedConnectDomain("'self'");
 		$csp->addAllowedImageDomain('https://*.tile.openstreetmap.org');
 		$response->setContentSecurityPolicy($csp);
 		return $response;

lib/Listener/CSPListener.php

@@ -47,6 +47,14 @@ class CSPListener implements IEventListener {
 
 		$csp = new ContentSecurityPolicy();
 		$csp->addAllowedImageDomain('https://*.tile.openstreetmap.org');
+		$csp->addAllowedWorkerSrcDomain('blob:');
+		$csp->addAllowedWorkerSrcDomain("'self'");
+		$csp->addAllowedChildSrcDomain('blob:');
+		$csp->addAllowedChildSrcDomain("'self'");
+		$csp->addAllowedScriptDomain('blob:');
+		$csp->addAllowedScriptDomain("'self'");
+		$csp->addAllowedConnectDomain('blob:');
+		$csp->addAllowedConnectDomain("'self'");
 		foreach ($this->config->getAllServerUrlsForCSP() as $server) {
 			$csp->addAllowedConnectDomain($server);
 		}

package.json

@@ -37,6 +37,9 @@
 		"debounce": "^1.2.1",
 		"emoji-regex": "^9.2.2",
 		"escape-html": "^1.0.3",
+		"extendable-media-recorder": "^6.3.4",
+		"extendable-media-recorder-wav-encoder": "^7.0.56",
+		"extendable-media-recorder-wav-encoder-worker": "^8.0.48",
 		"hark": "^1.2.3",
 		"leaflet": "^1.7.1",
 		"leaflet-defaulticon-compatibility": "^0.1.1",
@@ -63,7 +66,8 @@
 		"webdav": "^4.6.0",
 		"webrtc-adapter": "^8.0.0",
 		"webrtcsupport": "^2.2.0",
-		"wildemitter": "^1.2.1"
+		"wildemitter": "^1.2.1",
+		"workbox-webpack-plugin": "^6.1.5"
 	},
 	"devDependencies": {
 		"@nextcloud/babel-config": "^1.0.0-beta.1",
@@ -80,6 +84,7 @@
 		"jest-mock-axios": "^4.4.0",
 		"jest-mock-console": "^1.1.0",
 		"regenerator-runtime": "^0.13.7",
+		"terser-webpack-plugin": "^1.4.5",
 		"webpack-node-externals": "^3.0.0"
 	},
 	"browserslist": [

src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue

@@ -78,6 +78,8 @@ import Check from 'vue-material-design-icons/Check'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import { mediaDevicesManager } from '../../../utils/webrtc/index'
 import { showError } from '@nextcloud/dialogs'
+import { MediaRecorder, register } from 'extendable-media-recorder'
+import { connect } from 'extendable-media-recorder-wav-encoder'
 
 export default {
 	name: 'AudioRecorder',
@@ -154,13 +156,15 @@ export default {
 		},
 	},
 
+	async mounted() {
+		await register(await connect())
+	},
+
 	methods: {
 		/**
 		 * Initialize the media stream and start capturing the audio
 		 */
 		async start() {
-			const useSafariFallback = MediaRecorder.isTypeSupported('video/mp4; codecs="mp4a.40.2"')
-
 			// Create new audio stream
 			try {
 				this.audioStream = await mediaDevicesManager.getUserMedia({
@@ -179,15 +183,9 @@ export default {
 
 			// Create a mediarecorder to capture the stream
 			try {
-				if (useSafariFallback) {
-					this.mediaRecorder = new MediaRecorder(this.audioStream, {
-						audioBitsPerSecond: 128000,
-						videoBitsPerSecond: 0,
-						mimeType: 'video/mp4; codecs="mp4a.40.2"',
-					})
-				} else {
-					this.mediaRecorder = new MediaRecorder(this.audioStream)
-				}
+				this.mediaRecorder = new MediaRecorder(this.audioStream, {
+					mimeType: 'audio/wav',
+				})
 			} catch (exception) {
 				console.debug(exception)
 				this.audioStream.getTracks().forEach(track => track.stop())
@@ -246,7 +244,7 @@ export default {
 		generateFile() {
 			this.audioStream.getTracks().forEach(track => track.stop())
 			if (!this.aborted) {
-				this.blob = new Blob(this.chunks, { type: 'audio/mpeg-3' })
+				this.blob = new Blob(this.chunks, { type: 'audio/wav' })
 				// Generate file name
 				const fileName = this.generateFileName()
 				// Convert blob to file
@@ -288,7 +286,7 @@ export default {
 			const today = new Date()
 			let time = today.getFullYear() + '-' + ('0' + today.getMonth()).slice(-2) + '-' + ('0' + today.getDay()).slice(-2)
 			time += ' ' + ('0' + today.getHours()).slice(-2) + '-' + ('0' + today.getMinutes()).slice(-2) + '-' + ('0' + today.getSeconds()).slice(-2)
-			return t('spreed', 'Talk recording from {time} ({conversation})', { time, conversation }) + '.mp3'
+			return t('spreed', 'Talk recording from {time} ({conversation})', { time, conversation }) + '.wav'
 		},
 	},
 }