Как сделать снимок видеопотока <img>? HTML5 Javascript

При использовании <video id="videoID"> </video> (HTML),Как сделать снимок видеопотока <img>? HTML5 Javascript

вы можете использовать canvas = document.getElementById('canvas') в сценарии (JavaScript)

и videoID.play() или videoID.pause().

Если мое видео в потоковом режиме из URL (как веб-камеры) в качестве <img src="http://ip_address/stream"> тега, я не могу использовать .play() или .pause() функции. Могу ли я использовать:

canvas = document.getElementById('canvas'); 

    var context = acontainer.getContext('2d'); 
    context.drawImage(acontainer, 0, 0, width, height); 
    var data = acontainer.toDataURL('image/jpeg'); 
    photo.setAttribute('src', data);

Цель состоит в том, чтобы получить представление о видеопотоке, когда я нажимаю - поэтому у меня есть событие щелчка мыши, что делает выше.

Как это сделать?

Дополнительная информация: На этой странице есть URL http://ip_address, а у видеопотока есть URL http://ip_address/stream. Видеопоток равен <img> - количество потоков jpeg, передаваемых по потоку, в контейнер <div>, например. код выглядит, как-

<!DOCTYPE html> 
    <html> 
    <head> 
    ... 
    <style> 
    ... 
    </style> 
    </head> 
    <body> 
     <div id="container"> 
      <img src=...> 
     </div> 
    <script> 
     container.addEventListener("click", function(element){}, false); 
    ... 
    </script> 
    </body> 
    </html>

EDIT: Этот вопрос не является дубликатом, как я не спрашиваю, как поток в HTML холсте. Скорее, у меня уже есть поток, отображаемый в контейнере, и я хочу сделать снимок и показать его на холсте - так что поток и фотография появляются на одной странице.

источник

2017-02-14 FullMetalScientist

Pass '' элемент опорного в качестве первого параметра '.drawImage()'. Почему вы не используете элемент '

Является ли '' http: // ip_address: port "" ресурс, обслуживаемый заголовком 'Access-Control-Allow-Origin'? – guest271314

Когда я использую '' Я получаю сообщение об ошибке. Я транслирую с веб-камеры, поэтому формат '' прав? Итак, вы говорите, что я должен иметь 'context.drawImage (img_ID, 0, 0, width, height);' – FullMetalScientist

Набор .getContext("2d") следует называть canvas элемент, не acontainer; передать img ссылку в качестве первого параметра на .drawImage() вместо acontainer; .toDataURL() следует называть canvas элемент, а не acontainer.

var blue = "data:image/png;charset=binary;base64,iVBORw0KGgoAAAANSUhEUgAAASoAAADCCAYAAAD+Wo90AAAABHNCSVQICAgIfAhkiAAAApVJREFUeJzt1DEBACAMwLCBf88ggZMeiYJeXTPnDEDY/h0A8GJUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkHcBRH8DgsmlTc8AAAAASUVORK5CYII="; 
 

 
var red = "data:image/png;charset=binary;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADACAYAAABGbKXPAAAABHNCSVQICAgIfAhkiAAAAo5JREFUeJzt1DEBACAMwLCBf89ggJ8eiYJeXWfmDEDM/h0A8GJOQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSRfjxQN+R4GWHgAAAABJRU5ErkJggg=="; 
 

 
var green = "data:image/png;charset=binary;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII="; 
 

 
var arr = [red, blue, green]; 
 

 
var img = document.querySelector("img"); 
 

 
var button = document.querySelector("button"); 
 

 
var containerImg = document.querySelector("div > img"); 
 

 
var canvas = document.createElement("canvas"); 
 

 
canvas.width = canvas.height = 100; 
 

 
var ctx = canvas.getContext("2d"); 
 

 
var i = 0; 
 

 
button.addEventListener("click", function() { 
 
    ctx.drawImage(img, 0, 0) 
 
    containerImg.src = canvas.toDataURL(); 
 
}); 
 

 
setInterval(function() { 
 
    img.src = arr[i]; 
 
    i = ++i % arr.length; 
 
}, 100);

<button>capture image</button><br><br> 
 
<img width="100" height="100" alt="stream"/> 
 
<br><br> 
 
<div> 
 
    <img width="100" height="100" alt="capture"/> 
 
</div>

источник

2017-02-14 20:54:10 guest271314

О, ничего себе, хорошо! Я рассмотрю это. Ваш код работает так, как я хочу. – FullMetalScientist

У меня есть: 'var ctx = canvas.getContext ('2d'); ctx.drawImage (videoID, 0, 0, ширина, высота); var data = canvas.toDataURL ('image/jpeg', 1.0); photo.setAttribute ('src', data); 'В веб-браузере нет ошибок, но он не отображает фотографию, а только поток с обновлением времени каждую секунду - если это не должно произойти, поскольку' motion' не является в настоящее время подключен к веб-камере? Я подумал, что серый экран со временем будет захвачен. – FullMetalScientist

Не знаете, что вы имеете в виду? Что такое 'videoID'? Вы используете '

Как сделать снимок видеопотока <img>? HTML5 Javascript

ответ

Смежные вопросы