partkeepr

fork of partkeepr
git clone https://git.e1e0.net/partkeepr.git
Log | Files | Refs | Submodules | README | LICENSE

WebcamPanel.js (3413B)

      1 /**
      2  * Creates a panel with a webcam widget. The webcam widget is
      3  * a flash (jpegcam).
      4  */
      5 Ext.define('PartKeepr.WebcamPanel', {
      6     extend: 'Ext.panel.Panel',
      7     alias: 'widget.WebcamPanel',
      8 
      9     layout: 'fit',
     10     width: 320,
     11     height: 286,
     12     items: [{
     13         xtype: 'component',
     14         itemId: 'video',
     15         autoEl: {
     16             tag: 'video',
     17             autoplay: 'true'
     18         }
     19     },{
     20         xtype: 'component',
     21         itemId: 'canvas',
     22         autoEl: {
     23             tag: 'canvas'
     24         }
     25     }],
     26     video: null,
     27     stream: null,
     28 
     29     initComponent: function ()
     30     {
     31         this.takePhotoButton = Ext.create("Ext.button.Button", {
     32             text: i18n("Take picture and upload"),
     33             iconCls: 'fugue-icon webcam',
     34             handler: this.takePhoto,
     35             scope: this
     36         });
     37 
     38         // Create a toolbar with the "take photo" button
     39         this.bbar = Ext.create("Ext.toolbar.Toolbar", {
     40             enableOverflow: true,
     41             items: [this.takePhotoButton]
     42         });
     43 
     44 
     45         this.callParent();
     46 
     47         this.on("afterrender", this._onAfterRender, this);
     48         this.on("beforedestroy", this._onBeforeDestroy, this);
     49     },
     50     handleVideo: function (stream) {
     51         this.stream = stream;
     52         try {
     53             this.video.srcObject = stream;
     54         } catch (error) {
     55             this.video.src = window.URL.createObjectURL(stream);
     56         }
     57     },
     58     videoError: function () {
     59         // @todo: Implement video error handler
     60     },
     61     _onAfterRender: function () {
     62         this.video = this.down("#video").getEl().dom;
     63         this.canvas = this.down("#canvas").getEl().dom;
     64 
     65         navigator.getUserMedia = navigator.getUserMedia ||
     66             navigator.webkitGetUserMedia ||
     67             navigator.mozGetUserMedia ||
     68             navigator.msGetUserMedia;
     69 
     70         if (navigator.getUserMedia) {
     71             navigator.getUserMedia({video: true}, Ext.bind(this.handleVideo, this), Ext.bind(this.videoError, this));
     72         }
     73     },
     74     /**
     75      * Takes a photo using the webcam.
     76      */
     77     takePhoto: function ()
     78     {
     79         this.canvas.width = this.video.videoWidth;
     80         this.canvas.height = this.video.videoHeight;
     81 
     82         var ctx = this.canvas.getContext('2d');
     83         ctx.drawImage(this.video, 0, 0, this.video.videoWidth, this.video.videoHeight);
     84 
     85         Ext.Ajax.request({
     86             // Might need to adjust the path, depending on if we are uploading a file or image
     87             url: PartKeepr.getBasePath() + "/api/temp_uploaded_files/webcamUpload",
     88             params: this.canvas.toDataURL(),
     89             success: function (response) {
     90                 var responseObject = Ext.decode(response.responseText);
     91                 this.fireEvent("fileUploaded", responseObject);
     92             },
     93             //@todo implement failure handler
     94             scope: this
     95         });
     96 
     97         this.takePhotoButton.disable();
     98         this.takePhotoButton.setText(i18n("Uploading..."));
     99     },
    100     _onBeforeDestroy: function () {
    101         // stream.stop is deprecated for newer chrome versions,
    102         // use getTracks instead
    103         if (this.stream.getTracks) {
    104             var tracks= this.stream.getTracks();
    105 
    106             for (var i=0;i<tracks.length;i++) {
    107                 tracks[i].stop();
    108             }
    109         } else {
    110             this.stream.stop();
    111         }
    112 
    113         this.video.pause();
    114         this.video.src=null;
    115     }
    116 
    117 });