查看完整代码回购试一试演示自1999年以来，WebRTC一直是网页内实时音频和视频通信的开源免费解决方案，无需使用插件、本地应用程序或其他第三方软件。当Google和其他浏览器供应商开始支持WebRTC时，我第一次意识到WebRTC。许多产品，包括亚马逊编钟（Amazon Chime）和Slack（Slack）等，都纷纷加入了这一潮流。一个值得注意的WebRTC功能是，它的API使您能够在呈现网页的设备上使用相机拍照。作为Cloudinary的开发人员指导设计师，我最近开发了一款名为Vue Camera的教学应用程序，它集成了我们的上传和交付服务，可以拍摄照片上传到我的Cloudinary帐户。本文介绍了相关组件和流程。网络研讨会Vue Camera的ComponentsVue Camera包含两条路径：主路径名为Camera，有一个可以拍照的组件。画廊路线显示图片。在指定云名称和未签名的上载预置之前，此路由和上载功能将被禁用。Vue摄像头响应迅速，在桌面或移动设备上运行良好。尽管它可以拍摄面朝远离设备的照片，但它的能力取决于运行它的设备。例如，我只能在我的MacBookPro上自拍，但可以在我的谷歌像素上同时拍摄自拍和外景照片。在其主页上，WebRTC声明它不支持所有浏览器App framework名称Vue Camera提示您在JavaScript框架中构建应用程序：Vue.js版. 此外，我还使用了许多API：用于从设备摄像头流式传输图像数据的WebRTC将格式化图像表示为数据的Canvas-toDataURLVue.js版插件：用于响应CSS的Vue引导Vuex，通量容器体系结构的一个实现用于HTML5本地存储的Vue ls用于创建可路由视图的Vue路由器Cloudinary的上载API，用于将图像上载到Cloudinary帐户Cloudinary的产品库JavaScript函数，用于在Cloudinary帐户中呈现图像的响应显示有关详细信息，请参见上的完整代码Github。那个APIsLet扮演的角色从高层来看api如何在中协同工作Vue.js版创建Vue摄影机。与许多类似应用程序一样，Vue Camera执行以下任务：收集数据。将数据传输到数据库或静态存储器。以其他格式向用户显示数据。WebRTC：捕获数据WebRTC api是异步的、基于promise的浏览器调用，可以发现数据的来源，然后从运行的设备上捕获数据。这些api封装在Vue中的组件中云彩照相机uploadapi:savedatacloudinary提供了一个可以被许多HTTP客户机请求的上载端点，包括Axios、XMLHttpRequest（XHR）、jQuery和Angular的HttpClient。根据HTTP客户机的不同，代码处理回调或承诺。Axios将数据发布到摄像头中的Cloudinary组件。云数据库产品库：显示数据Cloudinary中的JavaScript函数呈现一组响应的图像。尽管大多数框架都使用插件或npm库，但这段代码包装了一个JavaScript函数调用，该函数调用在框架生命周期内绑定到文档对象模型（DOM）元素。这样，您就可以利用那些在其他情况下不容易被框架。你可以用相同的技术在React和angle框架中构建应用程序。当你在应用程序框架之间移动时Vue.js版、Angular和React，您可以根据需要组织、配置和交付捕获的数据并呈现HTML。这些框架与外部世界有着相似的集成，遵循基于组件的模块化开发结构，并确保组件绑定到DOM。其思想是，作为开发人员，您正在使用组件创建HTML标记，这就是为什么您可以像这样在其他框架中集成API功能Vue.js版应用程序设置在CloudinaryNow上，让我们看看Vue相机是如何工作的。要从演示站点运行应用程序，请注册一个免费的Cloudinary帐户，然后创建一个未签名的上载预置，将您的图片上载到Cloudinary并在图库中查看它们。点击信息图标（见下面的屏幕截图）详细信息。这里步骤是：单击Cloudinary控制台顶部的齿轮图标以获取设置。单击顶部导航下方的上载。在"上载预设"下，单击"启用未签名上载"，然后单击"添加上载预设"。在"上载预设名称"下，键入预设的名称，例如"我的未签名预设"。在"签名模式"下，从下拉菜单中选择"未签名"。单击顶部的"保存"。Cloudinary然后在下一个屏幕中显示您刚刚在Upload presets下创建的预置。现在打开Vue Camera并注册您的云名称和预置。单击Cloudinary Upload Info表单的gear图标，用您的云名称和预置名称填写两个文本字段。点击好的。之后，Cloudinary在启用库链接的情况下显示上载按钮。重要提示：首次在设备上运行Vue摄像头时，必须授予应用程序使用的权限相机。你现在可以单击快照拍摄照片并上传到您的云数据库账户。什么你的云名称和预置是否在幕后？Cloudinary将它们加载到Vuex存储区，使它们可供所有组件使用。Cloudinary还将它们存储在HTML5本地存储中一个小时，这样您就不必在离开浏览器返回时重新注册它们时间。在本质上，云名称和预置在Vue摄像机中充当凭证，提供云计算上传API发布数据所需的信息。请注意，使用Vue摄像头将图像下载到本地驱动器不需要凭据。但是，要将它们保存到云，必须注册您的云名称并预设。实现在WebRTC上，WebRTC代码驻留在包含媒体、设备和约束的模型中的摄影机组件中。媒体以数据流的形式存在。这些设备被检测出来，然后在有限制的情况下打开，从而实现了媒体的流动。请参阅片段下面。收到到剪贴板getDevices:异步函数（）{如果（！navigator.mediaDevices|| !navigator.mediaDevices.enumerateDevices) {返回false；}试试看{let allDevices=等待navigator.mediaDevices.enumerateDevices();for（让mediaDevice属于所有设备）{如果(媒体设备.kind==="视频输入"）{让选项={}；选项文本= 媒体设备.label;期权价值= mediaDevice.deviceId;this.options.推送（可选）；这个。设备。推（媒体设备）；}}返回true；}接住（错误）{抛出错误；}}},HTML代码加载一个HTML5视频标记和一个隐藏的画布标记。WebRTC将视频流定向到video标记，以便当用户单击Snapshot时，WebRTC将视频帧作为JPEG数据URI读取，准备好移交给Cloudinary Upload API。请参阅片段下面。收到到剪贴板快照：函数（）{this.canvas.width= this.video.videoWidth;this.canvas.高度= 这个视频高度;这个.canvas.getContext（"2d"）.图纸图像(这个。视频，0，0，this.canvas.width, 画布高度);this.fileData= this.canvas.toDataURL（"图像/jpeg"）；这个.isPhoto=真；我是摄影师=假；//删除所有用于下载的隐藏链接让hiddenLinks=document.querySelectorAll（".hidden_links"）；for（让hiddenLinks的hiddenLink）{document.querySelector.denlink（denlink）；}}Cloudinary Upload apiUploadToCloudBinary函数将注册的云名称打包，并使用在上述快照中获得的文件数据作为FormData对象进行预置。我使用Axios库将数据发布到Cloudinary，这样云名称就成为上载端点的一部分。您可以用多种方式在Cloudinary上组织媒体。其中之一是通过标记，它和元数据一样，可以帮助您识别资产。为了利用这一功能，我添加了一个名为browser_upload的标记，Gallery组件只提取Vue Camera拍摄的照片。请参阅片段下面。收到到剪贴板异步函数uploadToCloudBinary（cloudName，preset，fileData）{试试看{设fd=new FormData（）；让url=`https://api.cloudinary.com/v1_1/${cloudName}/image/upload`；fd.追加（"上传预设"，预设）；fd.追加（"标签"，"浏览器上传"）；fd.追加（"文件"，文件数据）；让res=等待axios({方法："post"，url:url，资料图：fd});返回等待资源数据;}接住（错误）{抛出错误；}}如果上传成功，调用uploadToCloudDinary的函数会用"toast"消息通知用户。下面的代码显示了这样一条5秒长的消息。复制到剪贴板这个$烤面包片(`上传到Cloudinary失败：使用设置提供cloudname和预置`，{title:"云计算上传"，自动隐藏：5000，appendToast:错误})如果您输入了一个不存在的云名称或预置，则失败错误消息为显示.GalleryNow接下来是展示图片的步骤。输入Cloudinary的productgallery小部件，它是一个JavaScript函数，可以将输出绑定到DOM元素，就像在jQuery或Vanilla JavaScript中一样。那么，如何在一个框架中包含这个功能呢？Gallery组件代码显示了如何使用Vue.js版生命周期挂钩。首先，当组件元素添加到虚拟DOM中时，Vue.js版调用挂载函数，获取产品库小部件的实例，并将产品库输出呈现给DOM。最后，为了防止内存泄漏，beforeDestroy生命周期钩子调用的函数在退出组件视图时销毁gallery元素。请参阅片段下面。收到到剪贴板已安装（）{//从本地存储获取cloudname和preset如果（这个$得到了吗（"cloudname"））{