capture-video-frame
capture-video-frame copied to clipboard
Get an issue using files other than .mp4 (Youtube, streamable)
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 Did you find any solution to this?
Sorry for huge delay. Source element must be a native HTML video element. I think e.g. youtube can use something more exotic.