0

我正在 Web 应用程序中开发一项功能，该功能使用户能够使用连接到设备的任何相机拍照。这主要用于带有 Google Chrome v28+ 的 Android v4.0+ 手机。

在台式机和手机中，我都可以设置一个视频标签，以使用getUserMedia和正确显示来自设备相机的视频createObjectURL。我的问题是，当我尝试从视频元素中绘制快照时，没有任何内容被复制到画布上：

var oVideo = jQuery('#myVideo');
var oCanvas = jQuery('#myCanvas');
var oContexto = oCanvas[0].getContext("2d");
var nAncho = oVideo.width();
var nAlto = oVideo.height();

//resizes the canvas: css
oCanvas.width(nAncho);
oCanvas.height(nAlto);
//resizes the canvas: image resolution
oCanvas[0].width = nAncho;
oCanvas[0].height = nAlto;

oContexto.fillRect(20, 20, 40, 40);
oContexto.drawImage(oVideo[0], 0, 0, nAncho, nAlto);
oContexto.fillRect(80, 80, 40, 40);

我添加了这两个fillRect只是为了确保代码正在执行。结果是正在绘制两个黑色矩形，但未绘制快照。

该问题仅在适用于 Android 的 Google Chrome v28 中出现，但在适用于 Windows 的 Google Chrome 28（和 Firefox 22）中正常工作。

它是谷歌浏览器的错误吗（我在http://code.google.com/p/chromium/中找不到它）？有解决办法吗？或者我只是做错了什么？

我将不胜感激任何见解，以帮助我了解正在发生的事情。

4

1 回答 1

1

在以下问题中提到了无法将视频帧绘制到画布的问题：

https://code.google.com/p/chromium/issues/detail?id=174642 https://code.google.com/p/chromium/issues/detail?id=181037

两者都表明问题已经解决，但由于我不熟悉开发过程，我不知道这是否意味着它很快就会在我们的手机上运行。

编辑：我刚刚在 Chrome Beta 中尝试过，效果很好。

于 2013-08-07T00:33:42.493 回答