| 57 | }; |
| 58 | |
| 59 | export const loadVideoFromURL = url => { |
| 60 | return new Promise((resolve, reject) => { |
| 61 | const video = document.createElement('video'); |
| 62 | video.crossOrigin = 'anonymous'; |
| 63 | video.muted = true; |
| 64 | video.playsInline = true; |
| 65 | video.preload = 'auto'; |
| 66 | video.loop = true; |
| 67 | |
| 68 | video.onloadedmetadata = () => { |
| 69 | video.currentTime = 0.001; |
| 70 | }; |
| 71 | |
| 72 | video.onseeked = () => { |
| 73 | try { |
| 74 | const testCanvas = document.createElement('canvas'); |
| 75 | testCanvas.width = 1; |
| 76 | testCanvas.height = 1; |
| 77 | const ctx = testCanvas.getContext('2d'); |
| 78 | ctx.drawImage(video, 0, 0, 1, 1); |
| 79 | ctx.getImageData(0, 0, 1, 1); |
| 80 | resolve({ |
| 81 | video, |
| 82 | url, |
| 83 | width: video.videoWidth, |
| 84 | height: video.videoHeight, |
| 85 | duration: video.duration, |
| 86 | corsError: false |
| 87 | }); |
| 88 | } catch { |
| 89 | resolve({ |
| 90 | video, |
| 91 | url, |
| 92 | width: video.videoWidth, |
| 93 | height: video.videoHeight, |
| 94 | duration: video.duration, |
| 95 | corsError: true |
| 96 | }); |
| 97 | } |
| 98 | }; |
| 99 | |
| 100 | video.onerror = () => { |
| 101 | reject(new Error('Failed to load video. Check the URL and try again.')); |
| 102 | }; |
| 103 | |
| 104 | video.src = url; |
| 105 | }); |
| 106 | }; |
| 107 | |
| 108 | export const loadImageFromURL = url => { |
| 109 | return new Promise((resolve, reject) => { |