使用Canvas操作像素的方法

// start drawing the frames
drawFrame(video);
});

当有足够的数据可以播放媒体时，至少在几帧内播放事件播放。

我们无法看到画布上显示的任何视频，因为我们只显示第一帧。我们必须每n毫秒执行一次drawFrame以跟上视频帧速率。

在drawFrame内部，我们每10ms再次调用drawFrame。

function drawFrame(video) {
context.drawImage(video, 0, 0);
 setTimeout(function () {
drawFrame(video);
}, 10);
}

在执行drawFrame之后，我们创建一个循环，每10ms执行一次drawFrame – 足够的时间让视频在画布中保持同步。

将效果添加到视频

我们可以使用我们之前创建的相同函数来反转颜色：

function invertColors(data) {
for (var i = 0; i < data.length; i+= 4) {
data[i] = data[i] ^ 255; // Invert Red
data[i+1] = data[i+1] ^ 255; // Invert Green
data[i+2] = data[i+2] ^ 255; // Invert Blue
}
}

并将其添加到drawFrame函数中：

function drawFrame(video) {
context.drawImage(video, 0, 0);
 var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
invertColors(imageData.data);
context.putImageData(imageData, 0, 0);
 setTimeout(function () {
drawFrame(video);
}, 10);
}

我们可以添加一个按钮并切换效果：

function drawFrame(video) {
context.drawImage(video, 0, 0);
 if (applyEffect) {
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
invertColors(imageData.data);
context.putImageData(imageData, 0, 0);
}
 setTimeout(function () {
drawFrame(video);
}, 10);
}

使用 camera

我们将保留我们用于视频的相同代码，唯一不同的是我们将使用MediaDevices.getUserMedia将视频流从文件更改为相机流。

MediaDevices.getUserMedia是弃用先前API MediaDevices.getUserMedia（）的新API。浏览器仍旧支持旧版本，并且某些浏览器不支持新版本，我们必须求助于polyfill以确保浏览器支持其中一种。

首先，从视频元素中删除src属性：

<video><code></pre>
<pre><code>// Set the source of the video to the camera stream
function initCamera(stream) {
video.src = window.URL.createObjectURL(stream);
}
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true, audio: false})								 
 4/6   首页 上一页 2 3 4 5 6 下一页 尾页