如何拍摄 <img> 视频流的照片？ HTML5 Javascript答案

【问题标题】：How to take a photo of an <img> video stream? HTML5 Javascript如何拍摄 <img> 视频流的照片？ HTML5 Javascript
【发布时间】：2017-02-14 19:42:29
【问题描述】：

使用<video id="videoID"> </video> (HTML) 时，

你可以在脚本中使用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>

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

【问题讨论】：

将<img> 元素引用作为第一个参数传递给.drawImage()。为什么不使用<video> 元素？
"http://ip_address:port" 资源是否与 Access-Control-Allow-Origin 标头一起提供？
当我使用<video src="http//:ip_address:port"></video> 时出现错误。我正在通过网络摄像头进行直播，所以格式是<img> 对吗？所以你说我应该有context.drawImage(img_ID, 0, 0, width, height);
<video> 元素有什么错误？是的，将<img> 元素引用，而不是img 元素的id 传递给.drawImage()。虽然如果 CORS 标头没有与资源 .drawImage() 一起提供，也会抛出错误。
@Kaiido 不知道为什么您认为这个问题是链接问题的副本？ OP 没有尝试流式传输到canvas。 OP 正在尝试从流中捕获静止图像，或 <img> 元素的当前 src，然后在 click 事件中从该捕获中创建静止图像。 fwiw，能够使用 Answer 中的方法从链接处的mpeg 流中以data URI 捕获静态图像，没有任何问题。

标签： javascript html image video

【解决方案1】：

设置.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>

【讨论】：

哇，好极了！我会调查一下。你的代码就像我想要的那样工作。
所以我有：var ctx = canvas.getContext('2d'); ctx.drawImage(videoID, 0, 0, width, height); var data = canvas.toDataURL('image/jpeg', 1.0); photo.setAttribute('src', data); 在网络浏览器上，没有错误，但它不显示照片，只是每秒更新时间的流 - 除非这是自 @987654333 以来发生的@ 当前没有连接到网络摄像头？我以为会捕捉到带有时间的灰屏。
不确定您的意思？ videoID 是什么？你在使用<video> 元素吗？如果不是从捕获中流式传输图像，预期结果是什么？
videoID 我的意思是img_ID，对不起。它来自 HTML 部分：<div id="container"> <img id="img_ID" src="/stream"> </div> 所以我没有使用<video> 元素。
哦，时间变化 - 我的意思是，流当前显示灰色屏幕，当前时间在底部，每秒更新一次。我想象当我进行图像捕获时，我应该只看到静止图像（时间不变）。但也许，由于没有连接网络摄像头，所以没有捕获图像，所以根本没有显示？因此，我仍然看到视频流。