add browser workarounds for safari and edge

CHANGES.md

@@ -9,9 +9,10 @@ videojs-record changelog
   clip, and stop recording when that limit is reached (#234)
 - Add `msDisplayMax` option to control display of time format (#188)
 - Documentation: add Angular and Vue.js wiki pages (#274, #283)
-- Bump required videojs-wavesurfer version to 2.6.1 for microphone support
-  in the MS Edge browser (#294)
+- Bump required videojs-wavesurfer version to 2.6.2 for microphone support
+  in the MS Edge and Safari browsers (#294)
 - Fix issue with `timeSlice` option when resetting the player (#300 by @GDIBass)
+- Examples: add Safari/Edge browser workarounds for audio-only recording (#295)
 
 **Backwards-incompatible changes** (when upgrading from a previous version):
 

bower.json

@@ -47,9 +47,9 @@
   },
   "dependencies": {
     "recordrtc": ">=5.4.7",
-    "video.js": ">=6.0.0",
-    "videojs-wavesurfer": ">=2.5.0",
-    "webrtc-adapter": ">=5.0.0"
+    "video.js": ">=6.2.7",
+    "videojs-wavesurfer": ">=2.6.2",
+    "webrtc-adapter": ">=6.2.1"
   },
   "devDependencies": {
     "lamejs": "https://github.com/zhuker/lamejs.git",

examples/animated-gif.html

@@ -26,7 +26,7 @@
 <video id="myVideo" class="video-js vjs-default-skin"></video>
 
 <script>
-var player = videojs('myVideo', {
+var options = {
     controls: true,
     width: 320,
     height: 240,
@@ -44,7 +44,9 @@
             debug: true
         }
     }
-}, function(){
+};
+
+var player = videojs('myVideo', options, function() {
     // print version information at startup
     var msg = 'Using video.js ' + videojs.VERSION +
         ' with videojs-record ' + videojs.getPluginVersion('record') +

examples/audio-only.html

@@ -16,6 +16,8 @@
 
   <script src="../dist/videojs.record.js"></script>
 
+  <script src="browser-workarounds.js"></script>
+
   <style>
   /* change player background color */
   #myAudio {
@@ -29,16 +31,16 @@
 <audio id="myAudio" class="video-js vjs-default-skin"></audio>
 
 <script>
-var player = videojs("myAudio", {
+var options = {
     controls: true,
     width: 600,
     height: 300,
     fluid: false,
     plugins: {
         wavesurfer: {
-            src: "live",
-            waveColor: "#36393b",
-            progressColor: "black",
+            src: 'live',
+            waveColor: '#36393b',
+            progressColor: 'black',
             debug: true,
             cursorWidth: 1,
             msDisplayMax: 20,
@@ -51,7 +53,12 @@
             debug: true
         }
     }
-}, function() {
+};
+
+// apply some workarounds for certain browsers
+applyAudioWorkaround();
+
+var player = videojs('myAudio', options, function() {
     // print version information at startup
     var msg = 'Using video.js ' + videojs.VERSION +
         ' with videojs-record ' + videojs.getPluginVersion('record') +

examples/audio-video.html

@@ -25,7 +25,7 @@
 <video id="myVideo" class="video-js vjs-default-skin"></video>
 
 <script>
-var player = videojs("myVideo", {
+var options = {
     controls: true,
     width: 320,
     height: 240,
@@ -38,7 +38,9 @@
             debug: true
         }
     }
-}, function(){
+};
+
+var player = videojs('myVideo', options, function() {
     // print version information at startup
     var msg = 'Using video.js ' + videojs.VERSION +
         ' with videojs-record ' + videojs.getPluginVersion('record') +

examples/browser-workarounds.js

@@ -0,0 +1,24 @@
+/* workaround browser issues */
+
+var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+var isEdge = /Edge/.test(navigator.userAgent);
+
+function applyAudioWorkaround() {
+    if (isSafari || isEdge) {
+        console.log('applied workarounds for this browser');
+
+        // see https://github.com/collab-project/videojs-record/issues/295
+        options.plugins.record.audioRecorderType = StereoAudioRecorder;
+        options.plugins.record.audioSampleRate = 44100;
+        options.plugins.record.audioBufferSize = 4096;
+        options.plugins.record.audioChannels = 2;
+    }
+}
+
+function applyScreenWorkaround() {
+    // Polyfill in Firefox.
+    // See https://blog.mozilla.org/webrtc/getdisplaymedia-now-available-in-adapter-js/
+    if (adapter.browserDetails.browser == 'firefox') {
+        adapter.browserShim.shimGetDisplayMedia(window, 'screen');
+    }
+}

examples/change-audio-input.html

@@ -16,6 +16,8 @@
 
   <script src="../dist/videojs.record.js"></script>
 
+  <script src="browser-workarounds.js"></script>
+
   <style>
   body {
       font-weight: 300;
@@ -50,20 +52,20 @@
 <hr>
 
 <div>
-    <p>This demo must be run in Chrome 49 or later, Firefox is not supported yet.</p>
+    <p>This demo must be run in Chrome 49 or later, other browsers are not supported yet.</p>
 </div>
 
 <script>
-var player = videojs("myAudio", {
+var options = {
     controls: true,
     width: 600,
     height: 300,
     fluid: false,
     plugins: {
         wavesurfer: {
-            src: "live",
-            waveColor: "black",
-            progressColor: "#2E732D",
+            src: 'live',
+            waveColor: 'black',
+            progressColor: '#2E732D',
             debug: true,
             cursorWidth: 1,
             msDisplayMax: 20,
@@ -76,7 +78,12 @@
             debug: true
         }
     }
-}, function() {
+};
+
+// apply some workarounds for certain browsers
+applyAudioWorkaround();
+
+var player = videojs('myAudio', options, function() {
     // print version information at startup
     var msg = 'Using video.js ' + videojs.VERSION +
         ' with videojs-record ' + videojs.getPluginVersion('record') +

examples/change-audio-output.html

@@ -16,6 +16,8 @@
 
   <script src="../dist/videojs.record.js"></script>
 
+  <script src="browser-workarounds.js"></script>
+
   <style>
   body {
       font-weight: 300;
@@ -50,11 +52,11 @@
 <hr>
 
 <div>
-    <p>This demo must be run in Chrome 49 or later, Firefox is not supported yet.</p>
+    <p>This demo must be run in Chrome 49 or later, other browsers are not supported yet.</p>
 </div>
 
 <script>
-var player = videojs("myAudio", {
+var options = {
     controls: true,
     width: 600,
     height: 300,
@@ -76,7 +78,12 @@
             debug: true
         }
     }
-}, function() {
+};
+
+// apply some workarounds for certain browsers
+applyAudioWorkaround();
+
+var player = videojs('myAudio', options, function() {
     // print version information at startup
     var msg = 'Using video.js ' + videojs.VERSION +
         ' with videojs-record ' + videojs.getPluginVersion('record') +

examples/enumerate-devices.html

@@ -16,6 +16,8 @@
 
   <script src="../dist/videojs.record.js"></script>
 
+  <script src="browser-workarounds.js"></script>
+
   <style>
   /* change player background color */
   #myAudio {
@@ -34,16 +36,16 @@
 </div>
 
 <script>
-var player = videojs("myAudio", {
+var options = {
     controls: true,
     width: 600,
     height: 300,
     fluid: false,
     plugins: {
         wavesurfer: {
-            src: "live",
-            waveColor: "black",
-            progressColor: "#2E732D",
+            src: 'live',
+            waveColor: 'black',
+            progressColor: '#2E732D',
             debug: true,
             cursorWidth: 1,
             msDisplayMax: 20,
@@ -56,7 +58,12 @@
             debug: true
         }
     }
-}, function(){
+};
+
+// apply some workarounds for certain browsers
+applyAudioWorkaround();
+
+var player = videojs('myAudio', options, function() {
     // print version information at startup
     var msg = 'Using video.js ' + videojs.VERSION +
         ' with videojs-record ' + videojs.getPluginVersion('record') +

examples/image-only.html

@@ -24,7 +24,7 @@
 <video id="myImage" class="video-js vjs-default-skin"></video>
 
 <script>
-var player = videojs("myImage", {
+var options = {
     controls: true,
     width: 320,
     height: 240,
@@ -39,7 +39,9 @@
             debug: true
         }
     }
-}, function(){
+};
+
+var player = videojs('myImage', options, function() {
     // print version information at startup
     var msg = 'Using video.js ' + videojs.VERSION +
         ' with videojs-record ' + videojs.getPluginVersion('record');

examples/plugins/audio-only-mp3.html

@@ -28,16 +28,16 @@
 <audio id="myAudio" class="video-js vjs-default-skin"></audio>
 
 <script>
-var player = videojs("myAudio", {
+var options = {
     controls: true,
     width: 600,
     height: 300,
     fluid: false,
     plugins: {
         wavesurfer: {
-            src: "live",
-            waveColor: "#fffa00",
-            progressColor: "#FAFCD2",
+            src:'live',
+            waveColor: '#fffa00',
+            progressColor: '#FAFCD2',
             debug: true,
             cursorWidth: 1,
             msDisplayMax: 20,
@@ -48,13 +48,15 @@
             video: false,
             maxLength: 20,
             debug: true,
-            audioEngine: "lamejs",
-            audioWorkerURL: "../../node_modules/lamejs/worker-example/worker-realtime.js",
+            audioEngine: 'lamejs',
+            audioWorkerURL: '../../node_modules/lamejs/worker-example/worker-realtime.js',
             audioSampleRate: 44100,
             audioBitRate: 128
         }
     }
-}, function() {
+};
+
+var player = videojs('myAudio', options, function() {
     // print version information at startup
     var msg = 'Using video.js ' + videojs.VERSION +
         ' with videojs-record ' + videojs.getPluginVersion('record') +

examples/plugins/audio-only-ogg.html

@@ -17,6 +17,8 @@
   <script src="../../dist/videojs.record.js"></script>
   <script src="../../dist/plugins/videojs.record.libvorbis.js"></script>
 
+  <script src="../browser-workarounds.js"></script>
+
   <style>
   /* change player background color */
   #myAudio {
@@ -29,16 +31,16 @@
 <audio id="myAudio" class="video-js vjs-default-skin"></audio>
 
 <script>
-var player = videojs("myAudio", {
+var options = {
     controls: true,
     width: 600,
     height: 300,
     fluid: false,
     plugins: {
         wavesurfer: {
-            src: "live",
-            waveColor: "#16425b",
-            progressColor: "#3a7ca5",
+            src: 'live',
+            waveColor: '#16425b',
+            progressColor: '#3a7ca5',
             debug: true,
             cursorWidth: 1,
             msDisplayMax: 20,
@@ -49,11 +51,18 @@
             video: false,
             maxLength: 20,
             debug: true,
-            audioEngine: "libvorbis.js",
+            audioEngine: 'libvorbis.js',
             audioSampleRate: 32000
         }
     }
-}, function() {
+};
+
+// safari workaround for libvorbis.js
+if (isSafari) {
+    var AudioContext = window.AudioContext || window.webkitAudioContext;
+}
+
+var player = videojs('myAudio', options, function() {
     // print version information at startup
     var msg = 'Using video.js ' + videojs.VERSION +
         ' with videojs-record ' + videojs.getPluginVersion('record') +