{"action":"opened","issue":{"url":"https://api.github.com/repos/iddan/react-native-canvas/issues/65","repository_url":"https://api.github.com/repos/iddan/react-native-canvas","labels_url":"https://api.github.com/repos/iddan/react-native-canvas/issues/65/labels{/name}","comments_url":"https://api.github.com/repos/iddan/react-native-canvas/issues/65/comments","events_url":"https://api.github.com/repos/iddan/react-native-canvas/issues/65/events","html_url":"https://github.com/iddan/react-native-canvas/issues/65","id":337161803,"node_id":"MDU6SXNzdWUzMzcxNjE4MDM=","number":65,"title":"Extract a thumbnail from a video possibility?","user":{"login":"ami9000","id":20244930,"node_id":"MDQ6VXNlcjIwMjQ0OTMw","avatar_url":"https://avatars1.githubusercontent.com/u/20244930?v=4","gravatar_id":"","url":"https://api.github.com/users/ami9000","html_url":"https://github.com/ami9000","followers_url":"https://api.github.com/users/ami9000/followers","following_url":"https://api.github.com/users/ami9000/following{/other_user}","gists_url":"https://api.github.com/users/ami9000/gists{/gist_id}","starred_url":"https://api.github.com/users/ami9000/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ami9000/subscriptions","organizations_url":"https://api.github.com/users/ami9000/orgs","repos_url":"https://api.github.com/users/ami9000/repos","events_url":"https://api.github.com/users/ami9000/events{/privacy}","received_events_url":"https://api.github.com/users/ami9000/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-06-29T23:12:41Z","updated_at":"2018-06-29T23:12:41Z","closed_at":null,"author_association":"NONE","body":"Is it possible to use an .mp4 (or other video format) source for a canvas, instead of an image file, and output a base64 image from one of it's video frames? Even if it's just the first frame could be useful. \r\n\r\nVideo manipulation by frames seems to be possible within the original [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas)\r\n\r\nI tried the following which works when LOCAL_FILE_LOCATION is an image file, but doesn't if it's a video file:\r\n\r\n\r\n    handleVideoThumb = async (canvas) => {\r\n    console.log('handleVideoThumb called');\r\n    const image = new CanvasImage(canvas, 100, 100);\r\n\r\n    canvas.width = 100;\r\n    canvas.height = 100;\r\n\r\n    const context = canvas.getContext('2d');\r\n\r\n    image.src = LOCAL_FILE_LOCATION;\r\n\r\n    image.addEventListener('load', async () => {\r\n        console.log('image is loaded');\r\n        context.drawImage(image, 0, 0, 100, 100);\r\n        const dataURL = await canvas.toDataURL('image/jpeg');\r\n        console.log('dataURL: ', dataURL);\r\n    });}\r\n\r\n\r\n"}}
{"actor":{"display_login":"ami9000"}}