collab-project / videojs-record

video.js plugin for recording audio/video/image files
https://collab-project.github.io/videojs-record
MIT License
1.39k stars 315 forks source link

Waveform is ready but doesn't appear in player #335

Closed Chivavik closed 5 years ago

Chivavik commented 5 years ago

Hi! I'm using videojs-record for audio only. Recording and playing recorded file works fine. But waveform doesn't work in real-time while recording and doesn't appear after recording ends. After switching on and off full-screen mode waveform works fine. There are no errors in the console. Could you, please, help me to make waveform works without switching to full-screen mode? versions logs before fullscreen after fullscreen code

thijstriemstra commented 5 years ago

what browser? what operating system? Can you change the player background color and wavecolor, i think it's there but colors make it impossible to see.

Chivavik commented 5 years ago

Chrome 72. Windows 7. Tried to change color but the problem is still here. Before fullscreen: before After fullscreen: after

thijstriemstra commented 5 years ago

i see you specified responsive: false, can you try without that?

Chivavik commented 5 years ago

Sure. That didn't solve the problem. 312

thijstriemstra commented 5 years ago

Are you able to reproduce it with this? https://collab-project.github.io/videojs-record/examples/audio-only.html

Chivavik commented 5 years ago

I've actually copied the source code from this example and placed scripts in the same order. The only difference is that I'm not using workarounds. The example works perfectly fine for me.

thijstriemstra commented 5 years ago

if the example works for you, you'll have to narrow it down to the differences between both.

Chivavik commented 5 years ago

Could you please tell me where I can find this script "browser-workarounds.js"?

thijstriemstra commented 5 years ago

all is located in https://github.com/collab-project/videojs-record/tree/master/examples

thijstriemstra commented 5 years ago

@Chivavik this is not a problem in Firefox right, only Chrome? If you change the line to var safari = true; in browser-workarounds.js, does it work then?

Because I'm also not seeing a realtime preview in Chrome 73, only the recording. But I'm also seeing this warning in the console:

webaudio.js:76 The AudioContext was not allowed to start.
It must be resumed (or created) after a user gesture on the page.
https://goo.gl/7K7WLu
Chivavik commented 5 years ago

@thijstriemstra I have the same problem in Firefox too. And I'm also receiving this warning message in Chrome. Does it mean that I need to reproduce a user gesture before recording to fix this problem?

thijstriemstra commented 5 years ago

@Chivavik try calling this from a button or type it in console and the visualization will appear:

player.record().surfer.surfer.backend.ac.resume()

I don't see this issue in Firefox though..

thijstriemstra commented 5 years ago

@Chivavik give PR #344 a try.