使用React的网络摄像头,画布和可观察对象

网络摄像头是前端环境中的独特资源。 在这篇简短的文章中,我将向您展示如何将网络摄像头和画布与可观察的体系结构完美地集成在一起。 在现代版本的Web开发中,功能已经变得越来越正确。 但是,像网络摄像头这样的资源却是一个挑战,因为它们很单一,这意味着使用非常程序性的方法。 上面的代码段中有一个ref,一旦安装了组件,它就会更新videoElement变量。 这将引发对我们将覆盖的资源进行适当的功能,事件驱动的管理的担忧。 画布元素也存在。 它充当视频实际显示的位置。 将画布作为视频的放置位置,使我们可以更好地控制视频。 我们可以控制帧速率,捕获图像等 当然,网络摄像头需要启动,并且需要用户的许可才能正常工作。 navigator.getUserMedia有助于实现这一目标。 Promise封装了getUserMedia功能,以便使我们能够控制异步行为。 最后, from函数允许我们通过转换将诺言视为可观察的诺言。 上述功能的真正价值在于,它可以将资源的不纯净特性清晰地包裹在一个位置。 如果一切顺利,暴露出一个简单的可观察性,并且网络摄像头又回到了纯功能领域。 既然我们可以安全地创建网络摄像头,获取许可并将流程封装在一个可观察的范围内,那么我们需要能够在画布上绘制生成的图像。…