Get frame from Img tag with a url source in Javascript

Question

I have a img tag in my html

<img width="600px" height ="400px" id='the_img_1' src='http://127.0.0.1:5000/video_feed'>

Img element is displaying the video from a local url.

I want to get a frame(or image in jpg form) of video from this img tag in javascript. Is this possible?

you'll nedd some like this ( take a time for demo) https://stackoverflow.com/a/19176124/4921471 — Álvaro Touzón, Jul 17 '17 at 08:54
yes, but for your propuse you need to use video tag, to capture any frame — Álvaro Touzón, Jul 17 '17 at 09:27
@ÁlvaroTouzón if i use video tag, nothing get displayed on page — Obiii, Jul 17 '17 at 09:35

score 1 · Answer 1 · edited Jul 17 '17 at 11:38

I hope this will help you this is exactly what you want this is not the best way but it is as per your requirement:

var imgTags = document.getElementsByTagName('img');
for(i=0; i<imgTags.length; i++){
  var iframurl = imgTags[i].getAttribute("src");
  var iframe = document.createElement('iframe');
  iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(iframurl);
  document.body.appendChild(iframe);
}

<img width="600px" height ="400px" id='the_img_1' src='http://127.0.0.1:5000/video_feed'>

score 0 · Accepted Answer · edited Jul 17 '17 at 11:38

Use canvas. 1. Draw img tag contents on canvas 2. get DataUri from canvas (encoded base64 string)

var img = document.getElementById("the_img_1");
var canvas = document.getElementById('myCanvas') // reference to canvas element
var ctx = canvas.getContext('2d'); // get the canvas context;
ctx.drawImage(img, 0, 0, 640,480); //draw image into canvas;
encodedImg = canvas.toDataURL("image/png");

Get frame from Img tag with a url source in Javascript

2 Answers2