capture-video-frame icon indicating copy to clipboard operation
capture-video-frame copied to clipboard

Get an issue using files other than .mp4 (Youtube, streamable)

Open Fred-Macdo opened this issue 5 years ago • 2 comments

Whenever I try a video that isn't .mp4 I get an error:

TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

But this works for .mp4 videos. Any idea whats going on here?

class Player extends React.Component {
	constructor (props) {
  	super(props)
    this.state = {
      url: "https://www.youtube.com/watch?v=oZrA9nQuEOM",
    	playing: false,
      image: null,
      frames: [], 
      captureInterval: 10000, 
      isLoading: false, 
      result: 0
    }  
`....`
  	  <ReactPlayer 
          ref={player => { this.player = player }}
          url={this.state.url}
          playing={this.state.playing}
          width='320px'
          height='180px'
          config={{ file: { attributes: {
            crossorigin: 'anonymous'
          }}}}
        />

Fred-Macdo avatar Jan 22 '20 19:01 Fred-Macdo

@Fred-Macdo Did you find any solution to this?

VIRGO96 avatar Mar 13 '20 07:03 VIRGO96

Sorry for huge delay. Source element must be a native HTML video element. I think e.g. youtube can use something more exotic.

ilkkao avatar Feb 26 '23 19:02 ilkkao