webcam directive

其他类别 2025-07-28

使用HTML5的网络摄像头操作

一个操纵网络摄像头的AngularJS指令。

您可以轻松地将其作为模块添加到自己的应用程序中。

可以在http://jonashartmann.*gi*t*hub.io/webcam-directive(GH-pages)上找到一个完整示例

下载

使用NPM

npm install webcam

使用Bower

bower install webcam-directive

每个版本都有一个标签,在DIST目录中具有构建的JavaScript文件

 Ex.: dist/webcam.min.js

安装

使用脚本标签

 < script type =" text/javascript " src =" webcam.min.js " >  script > 

用法

将模块“网络摄像头”作为依赖关系

 angular . module ( 'myapp' , [ 'webcam' ] ) ; 

然后在html中添加新元素

 < webcam >  webcam > 

高级用法

设置自定义占位符图像在加载流时要显示

">
 < webcam placeholder =" 'img/ajax-loader.gif' " > 

回调

 function MyController ( $scope ) {
  $scope . onError = function ( err ) { ... } ;
  $scope . onStream = function ( stream ) { ... } ;
  $scope . onSuccess = function ( ) { ... } ;
} 
 < webcam
  on-stream =" onStream(stream) "
  on-streaming =" onSuccess() "
  on-error =" onError(err) " >
 webcam > 

设置一个通道绑定数据

 function MyController ( $scope ) {
  $scope . myChannel = {
    // the fields below are all optional
    videoHeight : 800 ,
    videoWidth : 600 ,
    video : null // Will reference the video element on success
  } ;
} 
 < webcam
  channel =" myChannel " >
 webcam >

查看更多示例Wiki

贡献

  1. 叉子和克隆这个存储库

  2. 安装依赖项

    NPM安装

  3. 用咕unt构建/测试

    咕unt测试

  4. 提出拉动请求(仅在通过Travis build时才合并)

或者只是通过创建问题来帮助。

该项目使用的技术

  • Angularjs
  • 约曼
  • getusermedia
  • 帆布
  • 视频

该代码是根据MIT许可证获得许可的。 @See许可证文件

下载源码

通过命令行克隆项目:

git clone https://github.com/jonashartmann/webcam-directive.git