docs: set explicit mime type when creating a blob

OrbisK · Nov 28, 2024 · 39f1089 · 39f1089
1 parent 7171ecf
commit 39f1089
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/docs/basic-example.vue b/docs/basic-example.vue
@@ -8,6 +8,7 @@ const {
   stop,
   pause,
   resume,
+  mimeType,
   state,
 } = useMediaRecorder({ constraints: { audio: true } })
 
@@ -42,7 +43,7 @@ function handleStartClick() {
 const audio = computed(() => {
   if (!data.value?.length || state.value !== 'inactive')
     return
-  const blob = new Blob(data.value)
+  const blob = new Blob(data.value, {type: mimeType.value})
   return URL.createObjectURL(blob)
 })
 </script>

diff --git a/docs/examples.md b/docs/examples.md
@@ -4,6 +4,11 @@ outline: deep
 
 # Examples
 
+::: warning
+Due to a [bug in WebKit (Safari)](https://bugs.webkit.org/show_bug.cgi?id=198015), the `<audio>` source blob does only
+work if you set an explicit `type` attribute. This is not a problem with the composable, but with the browser itself.
+:::
+
 ## Basic Example
 
 This is a basic example of how to use the `<script setup>` syntax in a Vue component.

diff --git a/docs/timeslice-example.vue b/docs/timeslice-example.vue
@@ -8,6 +8,7 @@ const {
   stop,
   pause,
   resume,
+  mimeType,
   state,
 } = useMediaRecorder({ constraints: { audio: true } })
 
@@ -44,7 +45,7 @@ function handleStartClick() {
 const audio = computed(() => {
   if (!data.value?.length || state.value !== 'inactive')
     return
-  const blob = new Blob(data.value)
+  const blob = new Blob(data.value, {type: mimeType.value})
   return URL.createObjectURL(blob)
 })
 </script>

diff --git a/vitest.workspace.js b/vitest.workspace.js
@@ -9,6 +9,7 @@ export default defineWorkspace([
       browser: {
         enabled: true,
         name: 'chromium',
+        headless: true,
         provider: 'playwright',
         providerOptions: {
           context: {