ngCamRecorder

angular module for browser based audio video recording using webRTC

Added by: Sam Deering

GitHub

Repository

imalhasaranga/ngcamrecorder

Stats

Stars: 7

Watchers: 7

Forks: 3

Module Description

HTML5 Video + Audio Recording Angular Module

This project is using webRTC's getUserMedia() spec to record audio and video both in the client side and upload as chunks to the server, current project support latest versions of Opera and Chrome and hoping to provide support for Firefox in near future.

###Usage

linking script files

<script type="text/javascript" src="angularjs.min.js"></script>
<script type="text/javascript" src="js/modules/vaRecorder/ngCamRecorder.js"></script>
<script type="text/javascript" src="js/App.js"></script>

<script type="text/javascript" src="js/modules/vaRecorder/recorder.js"></script>
<script type="text/javascript" src="js/modules/vaRecorder/whammy.js"></script>
<script type="text/javascript" src="js/modules/vaRecorder/VIRecorder.js"></script>

Initializing


<html ng-app="testapp"> 
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="js/modules/vaRecorder/css/virecorder.css">
</head>
<body ng-controller="testcontroller">   
        
        <!-- here is how you use the module it -->
        <ngcamcecorder configuration="camconfiguration"></ngcamcecorder>
        

        <button ng-click = "camconfiguration.init()" >Recroding init</button>
        <img ng-src="{{camconfiguration.output.recordingthumb}}" />

        
        <script type="text/javascript" src="angularjs.min.js"></script>
        <script type="text/javascript" src="js/modules/vaRecorder/ngCamRecorder.js"></script>
        <script type="text/javascript" src="js/App.js"></script>

        <script type="text/javascript" src="js/modules/vaRecorder/recorder.js"></script>
        <script type="text/javascript" src="js/modules/vaRecorder/whammy.js"></script>
        <script type="text/javascript" src="js/modules/vaRecorder/VIRecorder.js"></script>
</body>
</html>

###Here is App.js

var mainapp = angular.module("testapp" , ['ngCamRecorder']);

mainapp.controller("testcontroller" , function ($scope) {

    var configuration  = {
            init : $scope.initiateRecord,
            recConf:{   
                recorvideodsize : 0.4, 
                webpquality     : 0.7, 
                framerate       : 15,  
                videoWidth      : 500,
                videoHeight     : 375,            
            },

            recfuncConf :{
                showbuton : 2000,
                url : "http://localhost/ngCam/js/modules/vaRecorder/php/fileupload.php",
                chunksize : 1048576,
                recordingtime : 17,
                requestparam : "filename",
                videoname : "video.webm",
                audioname : "audio.wav", 
            },

            output :{
                recordingthumb : null,
                recordinguploaded : function(){
                    alert("uploaded");
                }
            },

            recordingerror : function(){
                alert("browser not compatible");
            }      
    }
    $scope.camconfiguration = configuration;
});


Example

###Server Side Code I have used php but you can use any server side language

###More

Basic Component is [Html5_Video_Audio_Recorder](https://github.com/imalhasaranga/Html5_Video_Audio_Recorder

####This project is an experiment, and this will work Only for Chrome, Opera so all are invited to contribute....

Module stats last updated: 2015-06-08 00:33:07

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!