canvas.toDataURL() Security Error The operation is insecure

Question

When I am trying to get a screenshot and save it as PNG before uploading video to server, I am having the following problem

Answer 1

As well, took some experimentation to reach that conclusion, on iOS, looks the position .crossOrigin parameter position should be put before the .src

// Webkit will throw security error when image used on canvas and canvas.toDataUrl()

return new Promise((resolve, reject) => {
  let image = new Image();
  img.onload = () => {resolve(image)}
  img.src = `${url}?${Date.now()}`;
  img.crossOrigin = ""
})

// Webkit will not throw security error when image used on canvas and canvas.toDataUrl()

return new Promise((resolve, reject) => {
  let img = new Image()
  img.onload = () => {resolve(img)}
  img.crossOrigin = ''
  img.src = `${url}?${Date.now()}`
})