Ember-webcam-input 是一个基于 WebcamJS 的 Ember 插件，允许你在你的 Ember 应用中使用笔记本电脑、桌面摄像头或移动设备的摄像头功能。你可以使用这个插件在你的 Ember 应用中实现拍照或录像功能。
安装
首先，你需要安装 Ember-cli 和 bower 作为开发工具。在命令行中执行以下语句：
npm install -g ember-cli npm install -g bower
接下来，在你的 Ember 应用目录下执行以下命令：
ember install:addon ember-webcam-input
你也可以使用 bower 安装插件，命令如下：
bower install ember-webcam-input
使用
在模板中使用 ember-webcam-input 的组件：
{{ember-webcam-input
width=320
height=240
quality=85
allow-upload=false
on-photo-add=(action 'photoAdded')
}}同时，你也需要在控制器中定义事件函数，用来处理在组件中拍照的动作：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
-------- -
----------- --------------- -
-- ------ ----- -----------
-- -- ------------ --
----------------------- ----
-
-
---参数说明：
width：设置摄像头的宽度。默认值为 320。height：设置摄像头的高度。默认值为 240。quality：设置拍照图片的质量。默认值为 85。allow-upload：设置是否允许上传图片至服务器。默认为 false。on-photo-add：设置拍摄图片后的回调函数。
示例代码
下面是一个使用 Ember-webcam-input 实现拍照并上传至服务器（使用 Ember.js）的示例代码。这个示例演示了如何在你的 Ember 应用中使用 Ember-webcam-input 实现拍照和上传图片的功能。
图片上传
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ----------
----- ------ - ------------------------
----- ------------ - ----
----- ------------- - ----
----- -------------- - ---
----- ----------- - -----
------ ------- -------------------------
--------------- --------------------------------
------------ -----
-------- -
----------- ----- --------------- -
-- --------
--- ----------- - ----- ---------------------------------------
--- ------- - --------------
--- ---- - ----------------------------
--- --- - ----------------------
------
------- -------
---- ----
-------- -
-------------- ------- ---------------
--
----- -
------ ----
-
------------------ -- -
-- -----------
---------------- -- -
-- ---------
---
-
--
-------------- ----------------- -
--- ---------- - ----------------------------
--- ---------- - --------------------------------------------------
--- -- - --- -------------------------------
--- -- - --- ---------------
--- ---- - - -- - - ------------------ ---- -
----- - -------------------------
-
------ --- ---------- - ----- ---------- ---
-
---拍照窗口
-- -------------------- ---- ------- -------------------- ---------------- ------------------ -------------------- ---------------------- ------------------------ -------------------- ------------- -------------------- -------------- -- ---- --------------------- ---- ---------------------- ---------------------- ------
总结
Ember-webcam-input 是一个非常方便的 Ember 插件，可以轻松地让你的 Ember 应用拥有拍照和录像功能。本文我们讲解了如何安装和使用这个插件，并提供了一个使用 Ember.js 实现拍照和上传图片的完整示例代码。希望这篇文章对你有所帮助，对你未来的前端开发工作有所启发！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ca563576b7b1ecc98