为什么将 drawImage 与 MediaRecorder 一起使用时来自 canvas.captureStream 的视频为空
Why is video from canvas.captureStream empty when using drawImage with MediaRecorder
我在 canvas 元素中有一个完美的演示动画，我可以使用 MediaRecorder 和 captureStream() 从 <canvas> 元素录制为 webm 视频文件。
来自 2d 上下文 api 的动画在生成的视频中表现得很好，但是当我尝试使用 drawImage() 以便将图像添加到 canvas 我似乎无法使其正常工作。在后一种情况下，MediaRecorder.ondataavailable 处理程序没有收到有效数据，生成的视频文件是一个 0 字节文件。
我什至实现了一个演示，我可以在其中切换是否执行 drawImage() 调用。在下面的代码中，如果 drawImage = false 视频生成没有问题，但如果 drawImage 切换为 true，它将生成一个 0 字节的文件。
为了演示，我整理了这个jsfiddle https://jsfiddle.net/keyboardsamurai/3tkm0dp6/16/
我 运行 在 MacOS "Chrome Version 75.0.3770.100 (Official Build) (64-Bit)" 上使用此代码 - 甚至不确定它是否应该 运行 在 Firefox 等上，因为 MediaRecorder API 抛出FF 上看似无关的错误。
另请参阅此处的完整代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="drawing_canvas" width="1280" height="720"></canvas>
<script>
const image = new Image();
image.src = 'https://66.media.tumblr.com/84d332cafeb1052c477c979281e5713b/tumblr_owe3l0tkCj1wxdq3zo1_1280.jpg';
window.requestAnimationFrame(animation);
const drawImage = false; // toggle to 'true' to make this example fail
const canvas = document.getElementById('drawing_canvas');
const allChunks = [];
const recorder = initMediaRecorder(canvas);
recorder.start();
setTimeout(function (e) {
console.log("Video ended");
recorder.stop();
}, 5000);
function initMediaRecorder(canvasElement) {
const stream = canvasElement.captureStream(60);
const recorder = new MediaRecorder(stream, {mimeType: 'video/webm'});
recorder.ondataavailable = function (e) {
console.log("data handler called");
if (e.data) {
console.log("data available: " + e.data.size)
if (e.data.size > 0) {
console.log("data added");
allChunks.push(e.data);
}
} else {
console.error("Data handler received no data in event: " + JSON.stringify(e))
}
};
recorder.onstop = function (e) {
const fullBlob = new Blob(allChunks);
const link = document.createElement('a');
link.style.display = 'none';
link.href = window.URL.createObjectURL(fullBlob);
link.download = 'media.webm';
document.body.appendChild(link);
link.click();
link.remove();
};
return recorder;
}
function animation() {
const now = new Date();
const ctx = document.getElementById('drawing_canvas').getContext('2d');
if (drawImage) {
ctx.drawImage(image, 0, 0);
}
ctx.clearRect(0, 0, 150, 150);
ctx.strokeStyle = 'white';
ctx.fillStyle = 'white';
ctx.rect(0, 0, 1280, 720);
ctx.stroke();
ctx.save();
ctx.translate(75, 75);
ctx.scale(0.4, 0.4);
ctx.rotate(-Math.PI / 2);
ctx.strokeStyle = 'black';
ctx.fillStyle = 'white';
ctx.lineWidth = 8;
ctx.lineCap = 'round';
// Hour marks
ctx.save();
for (var i = 0; i < 12; i++) {
ctx.beginPath();
ctx.rotate(Math.PI / 6);
ctx.moveTo(100, 0);
ctx.lineTo(120, 0);
ctx.stroke();
}
ctx.restore();
// Minute marks
ctx.save();
ctx.lineWidth = 5;
for (i = 0; i < 60; i++) {
if (i % 5 != 0) {
ctx.beginPath();
ctx.moveTo(117, 0);
ctx.lineTo(120, 0);
ctx.stroke();
}
ctx.rotate(Math.PI / 30);
}
ctx.restore();
const sec = now.getSeconds();
const min = now.getMinutes();
let hr = now.getHours();
hr = hr >= 12 ? hr - 12 : hr;
ctx.fillStyle = 'black';
// write Hours
ctx.save();
ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec);
ctx.lineWidth = 14;
ctx.beginPath();
ctx.moveTo(-20, 0);
ctx.lineTo(80, 0);
ctx.stroke();
ctx.restore();
// write Minutes
ctx.save();
ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(-28, 0);
ctx.lineTo(112, 0);
ctx.stroke();
ctx.restore();
// Write seconds
ctx.save();
ctx.rotate(sec * Math.PI / 30);
ctx.strokeStyle = '#D40000';
ctx.fillStyle = '#D40000';
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(-30, 0);
ctx.lineTo(83, 0);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
ctx.stroke();
ctx.fillStyle = 'rgba(0, 0, 0, 0)';
ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 14;
ctx.strokeStyle = '#325FA2';
ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
ctx.stroke();
ctx.restore();
window.requestAnimationFrame(animation);
}
</script>
</body>
</html>
更新：以上行为确认可复制至少在这些 Chrom(e/ium) 版本上：
MacOS Mojave 10.14.5 上的版本 75.0.3770.100（官方构建）（64 位）
MacOS Mojave 10.14.5 上的版本 77.0.3849.0（官方构建）canary（64 位）
Ubuntu19.04 Disco Dingo
版本 77.0.3770.100（官方构建）快照（64 位）
发生这种情况是因为您的图像来自 cross-domain 资源并且污染了您的 canvas。
污染从中捕获 MediaStream 的 canvas 将阻止所述 MediaStream 捕获任何新图像。
此外，尝试从此类受污染的 canvas 中捕获 MediaStream 将引发 SecurityError。
const ctx = canvas.getContext('2d');
const stream = canvas.captureStream();
vid.srcObject = stream;
const img = new Image();
img.onload = e => {
console.log('will taint the canvas')
ctx.drawImage(img, 0, 0);
// and if we try now to capture a new stream, we have a clear error
const stream2 = canvas.captureStream();
}
img.src = "https://66.media.tumblr.com/84d332cafeb1052c477c979281e5713b/tumblr_owe3l0tkCj1wxdq3zo1_1280.jpg";
ctx.fillRect(0,0,20,20);
<canvas id="canvas"></canvas>
<video id="vid" controls autoplay muted></video>
要绕过它，您需要服务器以 [=35=] 兼容的方式发送图像，方法是正确设置 Access-control-origin headers 以接受您自己的域，然后请求此具有 crossorigin 属性的图像。您从中加载此特定图像的服务器确实允许任何人以这种 cross-origin 兼容的方式访问他们的数据，因此我们可以演示 front-end 部分：
const ctx = canvas.getContext('2d');
const stream = canvas.captureStream();
vid.srcObject = stream;
const img = new Image();
img.crossOrigin = 'anonymous'; // add this to request the image as cross-origin allowed
img.onload = e => {
console.log('will not taint the canvas anymore')
ctx.drawImage(img, 0, 0);
// and if we try now to capture a new stream, we have a clear error
const stream2 = canvas.captureStream();
}
img.src = "https://66.media.tumblr.com/84d332cafeb1052c477c979281e5713b/tumblr_owe3l0tkCj1wxdq3zo1_1280.jpg";
ctx.fillRect(0,0,20,20);
<canvas id="canvas"></canvas>
<video id="vid" controls autoplay muted></video>
我在 canvas 元素中有一个完美的演示动画，我可以使用 MediaRecorder 和 captureStream() 从 <canvas> 元素录制为 webm 视频文件。
来自 2d 上下文 api 的动画在生成的视频中表现得很好，但是当我尝试使用 drawImage() 以便将图像添加到 canvas 我似乎无法使其正常工作。在后一种情况下，MediaRecorder.ondataavailable 处理程序没有收到有效数据，生成的视频文件是一个 0 字节文件。
我什至实现了一个演示，我可以在其中切换是否执行 drawImage() 调用。在下面的代码中，如果 drawImage = false 视频生成没有问题，但如果 drawImage 切换为 true，它将生成一个 0 字节的文件。
为了演示，我整理了这个jsfiddle https://jsfiddle.net/keyboardsamurai/3tkm0dp6/16/
我 运行 在 MacOS "Chrome Version 75.0.3770.100 (Official Build) (64-Bit)" 上使用此代码 - 甚至不确定它是否应该 运行 在 Firefox 等上，因为 MediaRecorder API 抛出FF 上看似无关的错误。
另请参阅此处的完整代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="drawing_canvas" width="1280" height="720"></canvas>
<script>
const image = new Image();
image.src = 'https://66.media.tumblr.com/84d332cafeb1052c477c979281e5713b/tumblr_owe3l0tkCj1wxdq3zo1_1280.jpg';
window.requestAnimationFrame(animation);
const drawImage = false; // toggle to 'true' to make this example fail
const canvas = document.getElementById('drawing_canvas');
const allChunks = [];
const recorder = initMediaRecorder(canvas);
recorder.start();
setTimeout(function (e) {
console.log("Video ended");
recorder.stop();
}, 5000);
function initMediaRecorder(canvasElement) {
const stream = canvasElement.captureStream(60);
const recorder = new MediaRecorder(stream, {mimeType: 'video/webm'});
recorder.ondataavailable = function (e) {
console.log("data handler called");
if (e.data) {
console.log("data available: " + e.data.size)
if (e.data.size > 0) {
console.log("data added");
allChunks.push(e.data);
}
} else {
console.error("Data handler received no data in event: " + JSON.stringify(e))
}
};
recorder.onstop = function (e) {
const fullBlob = new Blob(allChunks);
const link = document.createElement('a');
link.style.display = 'none';
link.href = window.URL.createObjectURL(fullBlob);
link.download = 'media.webm';
document.body.appendChild(link);
link.click();
link.remove();
};
return recorder;
}
function animation() {
const now = new Date();
const ctx = document.getElementById('drawing_canvas').getContext('2d');
if (drawImage) {
ctx.drawImage(image, 0, 0);
}
ctx.clearRect(0, 0, 150, 150);
ctx.strokeStyle = 'white';
ctx.fillStyle = 'white';
ctx.rect(0, 0, 1280, 720);
ctx.stroke();
ctx.save();
ctx.translate(75, 75);
ctx.scale(0.4, 0.4);
ctx.rotate(-Math.PI / 2);
ctx.strokeStyle = 'black';
ctx.fillStyle = 'white';
ctx.lineWidth = 8;
ctx.lineCap = 'round';
// Hour marks
ctx.save();
for (var i = 0; i < 12; i++) {
ctx.beginPath();
ctx.rotate(Math.PI / 6);
ctx.moveTo(100, 0);
ctx.lineTo(120, 0);
ctx.stroke();
}
ctx.restore();
// Minute marks
ctx.save();
ctx.lineWidth = 5;
for (i = 0; i < 60; i++) {
if (i % 5 != 0) {
ctx.beginPath();
ctx.moveTo(117, 0);
ctx.lineTo(120, 0);
ctx.stroke();
}
ctx.rotate(Math.PI / 30);
}
ctx.restore();
const sec = now.getSeconds();
const min = now.getMinutes();
let hr = now.getHours();
hr = hr >= 12 ? hr - 12 : hr;
ctx.fillStyle = 'black';
// write Hours
ctx.save();
ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec);
ctx.lineWidth = 14;
ctx.beginPath();
ctx.moveTo(-20, 0);
ctx.lineTo(80, 0);
ctx.stroke();
ctx.restore();
// write Minutes
ctx.save();
ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(-28, 0);
ctx.lineTo(112, 0);
ctx.stroke();
ctx.restore();
// Write seconds
ctx.save();
ctx.rotate(sec * Math.PI / 30);
ctx.strokeStyle = '#D40000';
ctx.fillStyle = '#D40000';
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(-30, 0);
ctx.lineTo(83, 0);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
ctx.stroke();
ctx.fillStyle = 'rgba(0, 0, 0, 0)';
ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 14;
ctx.strokeStyle = '#325FA2';
ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
ctx.stroke();
ctx.restore();
window.requestAnimationFrame(animation);
}
</script>
</body>
</html>
更新：以上行为确认可复制至少在这些 Chrom(e/ium) 版本上：
MacOS Mojave 10.14.5 上的版本 75.0.3770.100（官方构建）（64 位）
MacOS Mojave 10.14.5 上的版本 77.0.3849.0（官方构建）canary（64 位）
Ubuntu19.04 Disco Dingo
版本 77.0.3770.100（官方构建）快照（64 位）发生这种情况是因为您的图像来自 cross-domain 资源并且污染了您的 canvas。
污染从中捕获 MediaStream 的 canvas 将阻止所述 MediaStream 捕获任何新图像。
此外，尝试从此类受污染的 canvas 中捕获 MediaStream 将引发 SecurityError。
const ctx = canvas.getContext('2d');
const stream = canvas.captureStream();
vid.srcObject = stream;
const img = new Image();
img.onload = e => {
console.log('will taint the canvas')
ctx.drawImage(img, 0, 0);
// and if we try now to capture a new stream, we have a clear error
const stream2 = canvas.captureStream();
}
img.src = "https://66.media.tumblr.com/84d332cafeb1052c477c979281e5713b/tumblr_owe3l0tkCj1wxdq3zo1_1280.jpg";
ctx.fillRect(0,0,20,20);
<canvas id="canvas"></canvas>
<video id="vid" controls autoplay muted></video>
要绕过它，您需要服务器以 [=35=] 兼容的方式发送图像，方法是正确设置 Access-control-origin headers 以接受您自己的域，然后请求此具有 crossorigin 属性的图像。您从中加载此特定图像的服务器确实允许任何人以这种 cross-origin 兼容的方式访问他们的数据，因此我们可以演示 front-end 部分：
const ctx = canvas.getContext('2d');
const stream = canvas.captureStream();
vid.srcObject = stream;
const img = new Image();
img.crossOrigin = 'anonymous'; // add this to request the image as cross-origin allowed
img.onload = e => {
console.log('will not taint the canvas anymore')
ctx.drawImage(img, 0, 0);
// and if we try now to capture a new stream, we have a clear error
const stream2 = canvas.captureStream();
}
img.src = "https://66.media.tumblr.com/84d332cafeb1052c477c979281e5713b/tumblr_owe3l0tkCj1wxdq3zo1_1280.jpg";
ctx.fillRect(0,0,20,20);
<canvas id="canvas"></canvas>
<video id="vid" controls autoplay muted></video>