如何拍摄< img>照片视频流？ HTML5 Javascript [英] How to take a photo of an <img> video stream? HTML5 Javascript

问题描述

当使用< video id =videoID> < / video> （HTML），

您可以使用 canvas = document.getElementById（'canvas'） 在脚本中（Javascript）

和 videoID.play（）或 videoID.pause（）。

如果我的视频是以流的形式从网址（如网络摄像头那样）以
< 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）; 
  

目标是点击时获取视频流的图片 - 所以我有一个鼠标点击事件，做到了上述。

我该怎么做？

更多info：此页面的URL http：// ip_address ，视频流的URL为 http：// ip_address / stream 。视频流是< div> < div> 容器中的一部分流式传输的jpeg图像，例如
代码看起来像 -

 <！DOCTYPE html> 
< html> 
< head> 
 ... 
< style> 
 ... 
< / style> 
< / head> 
< body> 
< div id =container> 
< img src = ...> 
< / div> 
< script> 
 container.addEventListener（click，function（element）{}，false）; 
 ... 
< / script> 
< / body> 
< / html> 
  

编辑：这个问题不是重复的，因为我不问如何流到html canvas 。相反，我已经有一个流在一个容器中显示，我想拍一张照片并将其显示在画布上 - 所以流和照片出现在同一页上。

canvas 上调用Set .getContext（2d）>解决方案 $ c>元素，而不是 acontainer ;将 img 引用作为第一个参数传递给 .drawImage（）而不是 acontainer ; .toDataURL（）应该在 canvas 元素上调用，而不是 acontainer false>

var blue =data：image / png; charset =二进制; BASE64，iVBORw0KGgoAAAANSUhEUgAAASoAAADCCAYAAAD + Wo90AAAABHNCSVQICAgIfAhkiAAAApVJREFUeJzt1DEBACAMwLCBf88ggZMeiYJeXTPnDEDY / h的lGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkHcBRH8DgsmlTc8AAAAASUVORK5CYII = ; VAR红色= 数据：图像/ PNG;字符集=二进制; BASE64，iVBORw0KGgoAAAANSUhEUgAAAScAAADACAYAAABGbKXPAAAABHNCSVQICAgIfAhkiAAAAo5JREFUeJzt1DEBACAMwLCBf89ggJ8eiYJeXWfmDEDM / h0A8GJOQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQk mROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSRfjxQN + R4GWHgAAAABJRU5ErkJggg == ; VAR绿色= 数据：图像/ PNG;字符集=二进制; BASE64，iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAk cwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII = ; VAR ARR = [红，蓝，绿]; VAR IMG = document.querySelector（ IMG ）; VAR键= document.querySelector（ 链接 ）; VAR containerImg = document.querySelector（ DIV> ）; 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 。<; c $ c>< button> .length;}，100）;

 <捕捉图片< / button>< br>< br>< img width =100height =100alt =stream/>< br>< img 

b $ b

When using <video id="videoID"> </video> (HTML),

you can use canvas = document.getElementById('canvas') in the script (Javascript)

and videoID.play() or videoID.pause().

If my video is streaming from a URL (as webcams do) as an <img src="http://ip_address/stream"> tag, I can't use the .play() or .pause() functions. Can I still use:

    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);

The goal is to get a picture of the video stream when I click - so I have a mouse click event that does the above.

How can I do this?

More info: This page has URL http://ip_address and video stream has URL http://ip_address/stream. The video stream is <img> -lots of jpeg images being streamed- within a <div> container, e.g. Code looks like-

    <!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: This question is not a duplicate as I'm not asking how to stream to a html canvas. Rather, I already have a stream displaying in a container and I want to take a photo of it and have it appear in a canvas - so the stream and photo appear on the same page.

解决方案

Set .getContext("2d") should be called on canvas element, not acontainer; pass img reference as first parameter to .drawImage() instead of acontainer; .toDataURL() should be called on canvas element, not 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>

这篇关于如何拍摄&lt; img&gt;照片视频流？ HTML5 Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！