ext js6调用电脑摄像头拍照保存录像的例子

以下是一个使用Ext JS 6调用电脑摄像头拍照和保存录像的示例。

首先，需要使用HTML5中的`getUserMedia()`方法来访问摄像头并捕获视频流。然后，我们可以使用`canvas`元素来对捕获的视频流进行截图和保存。

以下是代码示例：

Ext.application({
   name: 'MyApp',
   launch: function() {

      var videoEl;

      // Create video element to capture camera stream
      videoEl = document.createElement('video');
      videoEl.setAttribute('autoplay', '');
      videoEl.setAttribute('muted', '');
      videoEl.setAttribute('playsinline', '');

      // Get access to camera stream
      navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
         // Attach camera stream to video element
         videoEl.srcObject = stream;
      }).catch(function(err) {
         alert('Error accessing camera stream: ' + err);
      });

      Ext.create('Ext.window.Window', {
         title: 'Camera',
         width: 400,
         height: 400,
         layout: 'fit',
         items: [{
            xtype: 'panel',
            id: 'cameraPanel',
            html: '<canvas id="cameraCanvas"></canvas>',
            listeners: {
               afterrender: function() {
                  // Create canvas element to capture video frames
                  var canvasEl = document.getElementById('cameraCanvas');
                  var ctx = canvasEl.getContext('2d');

                  // Capture video frames at specified interval
                  var intervalId = setInterval(function() {
                     ctx.drawImage(videoEl, 0, 0, canvasEl.width, canvasEl.height);
                  }, 100);

                  // Add toolbar with camera controls
                  Ext.getCmp('cameraPanel').addDocked({
                     xtype: 'toolbar',
                     dock: 'bottom',
                     items: [{
                        text: 'Take Picture',
                        handler: function() {
                           // Take snapshot of current video frame
                           var dataUrl = canvasEl.toDataURL('image/png');
                           window.open(dataUrl);
                        }
                     },{
                        text: 'Record Video',
                        handler: function() {
                           // Start recording video
                           var chunks = [];
                           var mediaRecorder = new MediaRecorder(stream, {mimeType: 'video/webm'});

                           mediaRecorder.ondataavailable = function(e) {
                              if ( e.data.size > 0 ) {
                                 chunks.push(e.data);
                              }
                           };

                           mediaRecorder.onstop = function() {
                              // Merge captured video chunks into a single Blob
                              var videoBlob = new Blob(chunks, { type: 'video/webm' });
                              var videoUrl = URL.createObjectURL(videoBlob);
                              window.open(videoUrl);
                           };

                           mediaRecorder.start();

                           setTimeout(function() {
                              // Stop recording video after specified duration
                              mediaRecorder.stop();
                           }, 5000); // 5 seconds
                        }
                     }]
                  });
               }
            }
         }]
      }).show();
   }
});

这段代码中，我们创建了一个`canvas`元素来捕获视频流。然后，我们向该`canvas`上绘制摄像头捕获的视频帧。我们还添加了一个工具栏，其中包括“拍照”和“录像”按钮来保存捕获的内容。

拍照按钮将当前视频帧保存为PNG图像，并在新的窗口中打开该图像。录像按钮将在5秒钟的时间内记录捕获的视频流，并在停止录制后将录制的视频合并为单个WebM文件。然后，我们将该文件的URL传递给新窗口以播放录制的视频。

请注意，该示例仅在支持`getUserMedia`方法的现代浏览器上运行。