如何在EXTJS中使用网络摄像头拍摄快照

Question

大家，你能帮帮我吗？如何在EXTJS中使用网络摄像头拍摄快照 那可能吗？

感谢

Answer 1

我做了一个在firefox浏览器中运行的示例，您可以查看这些demo

                    Ext.onReady(function(){
                    var localMediaStream;
                    Ext.create('Ext.window.Window', {
                        title: 'Take SnapShot',
                        height: 400,
                        width: 800,
                        layout: 'hbox',
                        items:[
                               {
                                width:400,
                                title:"Preview",
                                height:400,
                                id:'preview',
                                html:'<video  id="video" width="350" height="250" autoplay></video>',
                                tbar:[{
                                           text:"Start Video",
                                           handler:function(){
                                                      navigator.getUserMedia  = navigator.getUserMedia ||
                                                                               navigator.webkitGetUserMedia ||
                                                                               navigator.mozGetUserMedia ||
                                                                               navigator.msGetUserMedia;
                                                        var video = document.getElementById("video");
                                                       var canvas = document.getElementById("canvas");
                                                      var context = canvas.getContext("2d");
                                                       navigator.getUserMedia (
                                                                              {
                                                                                 video: true
                                                                              },
                                                                              function(stream) {
                                                                                if (video.mozSrcObject !== undefined) {
                                                                                               localMediaStream = stream;
                                                                                               video.mozSrcObject = stream;
                                                                                    } 
                                                                              },function(err) {
                                                                                 console.log("The following error occured: " + err);
                                                                              }
                                                                          );

                                               }
                                     },
                                     {
                                       text:"Snapshot",
                                       handler:function(){
                                       var video = document.getElementById("video");
                                       var canvas = document.getElementById("canvas");
                                       context = canvas.getContext("2d");
                                       context.drawImage(video, 20, 20, 400, 220);

                                      }
                                     }
                                     ]


                               },
                               {
                                width:400,
                                title:"Snapshot",
                                height:400,
                                 html:'<canvas id="canvas" width="320" height="240"></canvas>'
                               }
                              ]
                    }).show();

                    });