网络摄像头是前端环境中的独特资源。 在这篇简短的文章中，我将向您展示如何将网络摄像头和画布与可观察的体系结构完美地集成在一起。
在现代版本的Web开发中，功能已经变得越来越正确。 但是，像网络摄像头这样的资源却是一个挑战，因为它们很单一，这意味着使用非常程序性的方法。
上面的代码段中有一个ref，一旦安装了组件，它就会更新videoElement变量。 这将引发对我们将覆盖的资源进行适当的功能，事件驱动的管理的担忧。 画布元素也存在。 它充当视频实际显示的位置。 将画布作为视频的放置位置，使我们可以更好地控制视频。 我们可以控制帧速率，捕获图像等
当然，网络摄像头需要启动，并且需要用户的许可才能正常工作。 navigator.getUserMedia有助于实现这一目标。 Promise封装了getUserMedia功能，以便使我们能够控制异步行为。 最后， from函数允许我们通过转换将诺言视为可观察的诺言。
上述功能的真正价值在于，它可以将资源的不纯净特性清晰地包裹在一个位置。 如果一切顺利，暴露出一个简单的可观察性，并且网络摄像头又回到了纯功能领域。
既然我们可以安全地创建网络摄像头，获取许可并将流程封装在一个可观察的范围内，那么我们需要能够在画布上绘制生成的图像。 由于createWebcam函数只是返回一个可观察的对象，因此我们可以使用通过可管道运算符处理的数据。
我喜欢这种实现有两个方面。 即使资源是通过引用传递的问题，它们也将以声明性和功能性方式进行计算。 画布上的绘画清晰地以正确注册的视频元素为基础，即使您不知道可观察的内容如何，视觉上也清晰可见。
为了制作运动图像，我们每隔一段时间在画布上绘制一次。 在这种情况下，我们以40毫秒的间隔绘制。 可观察到的计时器可以控制每个图像的发射。 在每次发射时，我们只需使用上面使用的drawImageOnCanvas函数在画布上绘制图像，下面将详细介绍。
这样做的rxjs是，它可以很好地适合使用rxjs进行异步控制和处理的现有前端体系结构。 这是一个示例，用于在Epic中每秒拍摄5次网络摄像头的图片。 Epics是Redux-observable库中可观察对象的容器。
处理启动网络摄像头动作后，我们将初始化网络摄像头并仅使用正常的可观察行为将画布上的图像数据更改为jpeg。 然后，该图像以redux全局状态存储。
我希望这对您阅读和我发现一样有趣。
请花点时间喜欢和分享。 人们需要知道……。 你懂？
