From d10118727feb37bd501278423b14f1a99b23e7e3 Mon Sep 17 00:00:00 2001
From: Francisco Baio Dias <francisco@typeform.com>
Date: Tue, 27 Nov 2018 17:34:37 +0100
Subject: [PATCH] feat: try to use video/webm;codecs=H264 and fix storybook

---
 src/video-recorder.js         | 11 +++++++----
 src/video-recorder.stories.js |  6 ++++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/video-recorder.js b/src/video-recorder.js
index d5fb959..2ae6454 100644
--- a/src/video-recorder.js
+++ b/src/video-recorder.js
@@ -13,13 +13,16 @@ const chunkSizeInMS = 250
 const dataCheckInterval = 2000 / chunkSizeInMS
 
 const getMimeType = () => {
-  let mimeType = 'video/webm;codecs=vp9'
+  let mimeType = 'video/webm;codecs=H264'
   if (!window.MediaRecorder.isTypeSupported(mimeType)) {
-    mimeType = 'video/webm;codecs=vp8'
+    mimeType = 'video/webm;codecs=vp9'
     if (!window.MediaRecorder.isTypeSupported(mimeType)) {
-      mimeType = 'video/webm'
+      mimeType = 'video/webm;codecs=vp8'
       if (!window.MediaRecorder.isTypeSupported(mimeType)) {
-        mimeType = ''
+        mimeType = 'video/webm'
+        if (!window.MediaRecorder.isTypeSupported(mimeType)) {
+          mimeType = ''
+        }
       }
     }
   }
diff --git a/src/video-recorder.stories.js b/src/video-recorder.stories.js
index 6cc24da..6fcf92f 100644
--- a/src/video-recorder.stories.js
+++ b/src/video-recorder.stories.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import styled, { injectGlobal } from 'styled-components'
+import styled, { createGlobalStyle } from 'styled-components'
 import VideoRecorder from './video-recorder'
 
-injectGlobal`
+const GlobalStyle = createGlobalStyle`
   html, body, #root {
     height: 100%;
     margin: 0;
@@ -33,6 +33,7 @@ storiesOf('VideoRecorder', module)
   .add('default', () => {
     return (
       <Wrapper>
+        <GlobalStyle />
         <VideoRecorder onRecordingComplete={handleRecordingComplete} />
       </Wrapper>
     )
@@ -40,6 +41,7 @@ storiesOf('VideoRecorder', module)
   .add('isOnInitially', () => {
     return (
       <Wrapper>
+        <GlobalStyle />
         <VideoRecorder
           isOnInitially
           onRecordingComplete={handleRecordingComplete}