23672

Get an image from the video

Question:

I want to grab an image from a video based on the current time of the video upon button click. I'm currently using the video tag to play the video but have not seen any resource for grabbing an image from that.

<video id="video-player" class="video-player" width="640" controls="controls" muted=true> <source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" id="mp4"></source> <source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" id="webm"></source> <source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv" id="ogv"></source>

Your user agent does not support the HTML5 Video element.

</video>

Answer1:

ok this is how you would do it

<video id="video" controls="controls"> .... </video> <div id="capturedimage"></div> <button>take picture from video</button>

and the for the js

<pre class="lang-javascript prettyprint-override">(function() { var $image = $("#capturedimage"); var video = $("#video").get(0); var getImage = function() { var canvas = document.createElement("canvas"); canvas.getContext('2d') .drawImage(video, 0, 0, canvas.width, canvas.height); var img = document.createElement("img"); img.src = canvas.toDataURL(); $image.prepend(img); }; $("button").click(getImage); })();

heavily influenced by <a href="http://odetocode.com/" rel="nofollow">http://odetocode.com/</a>

Answer2:

Pure JS way with scale support:

<pre class="lang-javascript prettyprint-override">/** * Takes a screenshot from video. * @param videoEl {Element} Video element * @param scale {Number} Screenshot scale (default = 1) * @returns {Element} Screenshot image element */ function getScreenshot(videoEl, scale) { scale = scale || 1; const canvas = document.createElement("canvas"); canvas.width = videoEl.clientWidth * scale; canvas.height = videoEl.clientHeight * scale; canvas.getContext('2d').drawImage(videoEl, 0, 0, canvas.width, canvas.height); const image = new Image() image.src = canvas.toDataURL(); return image; }

Recommend

  • Segmentation fault on initializing a 2D array
  • Is there a way to include child Rmd files from a different directory
  • Azure DocumentDB Owner resource does not exist
  • Calculate SUBTOTAL of a SUMPRODUCT without a column for total
  • Call JQuery function From Controller
  • How to inject String property in a spring bean
  • Is it possible to host multiple django projects under the same domain?
  • 0:1(10): error: GLSL 3.30 is not supported. ubuntu 18.04 c++
  • Alphabetical array sort - lowercase first
  • Joining across databases with dbplyr
  • Using XPATH to isolate inline javascript
  • Can someone explain how Yii minimizing assets is supposed to work on Heroku?
  • ROR + MVC Disable Browser Cache
  • Do iTunesConnect external testers get updates for *every* uploaded ipa file after Beta Approval?
  • How to run Daphne Server (Django Channels) & workers in the background?
  • Draw 9 patch dotted /dashed line on Android
  • Getting Microsoft Calibri font on Amazon EC2 ubuntu
  • cSPADE data mining in R using arulesSequences - Error while converting to “transactions” format
  • Why do you need 2 Javascript files for cross-platform Cordova plugin?
  • How to make Rss News Reader application in android …? [closed]
  • 'Edit' function for forum posts and such
  • SQL Server 2012 not showing unicode character in results
  • select an input by value?
  • How to split wav file into two or more parts using c#
  • Content-Type alternative in MQTT
  • How to use Streams api peek() function and make it work?
  • Change cell value based on cell color in google spreadsheet
  • How to decleare char *const argv[] in swift [duplicate]
  • How to encrypt Connectionstring written in web.config from codebehind?
  • How to get rgb from transparent pixel in js
  • Capture SIGFPE from SIMD instruction
  • Call Microservice from another Microservice within Docker
  • Using Service Component Runtime
  • How do I use TagLib-Sharp to write custom (PRIV) ID3 frames?
  • WPF custom control and direct content support
  • PHP Permalinks.. how to change?
  • media foundation H264 decoder not working properly
  • CAS 4 - Not able to retrieve the LDAP groups after successful authentication
  • Running R's aov() mixed effects model from Python using rpy2
  • Access to a Matlab gui from the web