使用ext js6调用本机电脑摄像头实现拍照并且保存录像的例子

很遗憾，因为 ext js6 是一个纯前端的 JavaScript 框架，无法直接调用本地电脑的摄像头，所以无法实现拍照和保存录像的功能。要实现这样的功能，需要结合使用一些浏览器原生的 API，如获取本地摄像头的 MediaStream API，录制视频的 MediaRecorder API 等。同时，还需要使用一些后台技术，如 Node.js、PHP 等，来实现将视频文件保存到本地磁盘的功能。

相关问题

使用ext js6调用电脑摄像头实现拍照并且保存录像的例子

很遗憾，由于安全性和隐私问题，浏览器不允许JavaScript直接访问摄像头和麦克风，除非用户授予许可。因此，您需要使用WebRTC技术来访问摄像头。以下是一个使用WebRTC和ExtJS 6创建视频聊天的示例代码：

Ext.define('MyApp.view.video.VideoWindow', {
    extend: 'Ext.window.Window',
    requires: [
        'Ext.container.Container',
        'Ext.layout.container.VBox'
    ],

    width: 640,
    height: 480,
    layout: 'fit',
    maximizable: true,

    initComponent: function() {
        var me = this;

        me.items = {
            xtype: 'container',
            layout: 'fit',
            items: {
                xtype: 'video',
                autoEl: 'video',
                poster: 'resources/images/placeholder.png',
                controls: true,
                width: '100%',
                height: '100%'
            }
        };

        me.callParent(arguments);

        me.on('afterrender', me.initWebRTC, me);
    },

    initWebRTC: function() {
        var me = this,
            video = me.down('video');

        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(function(stream) {
                    video.setSrcObject(stream);
                })
                .catch(function(err) {
                    console.log('Unable to get stream', err);
                });
        } else {
            console.log('WebRTC not supported');
        }
    }

});

此代码将创建一个视频窗口，该窗口使用HTML5 `<video>`元素显示摄像头的视频流。initWebRTC方法使用navigator.mediaDevices.getUserMedia方法访问摄像机，如果该方法未定义或遇到错误，则将打印错误消息。使用该模块就能够访问摄像头进行视频聊天功能。

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

以下是一个使用ExtJS 6调用电脑摄像头实现拍照录像且保存照片，保存录像的例子。需要注意的是，实现这个例子需要一定的前端开发和后端上传等技术，因此涉及的功能较多，需要具备一定的相关技能方能实现。

前端代码：

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'app-main',
    layout: 'border',
    items: [{
        region: 'west',
        xtype: 'panel',
        title: 'Photos',
        width: 200,
        split: true,
        layout: 'fit',
        items: [{
            xtype: 'dataview',
            store: 'Photos',
            tpl: '<tpl for="."><div style="margin: 10px;text-align:center;"><img src="{url}" width="150" height="150"><br>{name}</div></tpl>',
            itemSelector: 'div.thumb-wrap',
            listeners: {
                itemclick: function(view, record) {
                    var img = Ext.getCmp('photo');
                    img.setSrc(record.get('url'));
                }
            }
        }]
    },{
        region: 'center',
        xtype: 'panel',
        title: 'Camera',
        layout: 'fit',
        items: [{
            xtype: 'image',
            id: 'photo',
            src: '/resources/images/nophoto.png',
            style: 'border: 5px solid silver',
            alt: 'Photo'
        }],
        tools: [{
            type: 'camera',
            handler: 'onCameraClick'
        },{
            type: 'videocam',
            handler: 'onVideoClick'
        }]
    }]
});

在这个页面中，我们定义了一个`dataview`用于展示已保存的照片，以及一个展示当前选中照片的`image`，另外还添加了两个工具按钮用于拍照和录像。

我们在控制器中实现这两个工具按钮的功能。在这个例子中，我们通过发送Ajax请求调用后端API实现拍照和录像，并将结果保存到服务器上。

控制器代码：

Ext.define('MyApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    onCameraClick: function() {
        Ext.Ajax.request({
            url: '/take_photo',
            params: {
                format: 'jpeg',
                width: 800,
                height: 600
            },
            success: function(response) {
                var data = Ext.decode(response.responseText);
                if (data.success) {
                    Ext.getStore('Photos').add({
                        name: data.filename,
                        url: data.url
                    });
                    var img = Ext.getCmp('photo');
                    img.setSrc(data.url);
                } else {
                    Ext.Msg.alert('Error', data.message);
                }
            },
            failure: function(response) {
                Ext.Msg.alert('Error', response.statusText);
            }
        });
    },

    onVideoClick: function() {
        this.startRecording();
    },

    startRecording: function() {
        var _this = this;

        navigator.mediaDevices.getUserMedia({video: true, audio: true})
            .then(function(stream) {
                var video = _this.getView().down('video');

                if (Ext.isChrome) {
                    video.srcObject = stream;
                } else {
                    video.dom.src = URL.createObjectURL(stream);
                }

                _this.mediaRecorder = new MediaRecorder(stream);

                _this.mediaRecorder.start();

                _this.mediaRecorder.ondataavailable = function(e) {
                    var url = URL.createObjectURL(e.data);
                    var filename = 'recording_' + (new Date()).getTime() + '.webm';

                    _this.saveRecording(url, filename);
                };
            })
            .catch(function(err) {
                console.log('Error: ', err.message);
            });
    },

    saveRecording: function(url, filename) {
        var _this = this;

        var file = new File([url], filename, {
            type: 'video/webm'
        });

        var reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onloadend = function() {
            var base64data = reader.result;
            Ext.Ajax.request({
                url: '/save_recording',
                params: {
                    data: base64data,
                    filename: filename
                },
                success: function(response) {
                    var data = Ext.decode(response.responseText);
                    if (data.success) {
                        var img = Ext.getCmp('photo');
                        img.setSrc(data.url);
                    } else {
                        Ext.Msg.alert('Error', data.message);
                    }
                },
                failure: function(response) {
                    Ext.Msg.alert('Error', response.statusText);
                }
            });
        };
    }
});

在这个控制器中，我们定义了两个点击事件，分别用于拍照和录像。在拍照事件中，我们调用后端API`/take_photo`来获取照片，并将结果保存到服务器上。如果API调用成功，则将照片添加到数据视图中并显示在照片预览区域中。

在录像事件中，我们通过`getUserMedia`方法请求用户允许访问电脑的摄像头和麦克风，并开始录像。我们使用`MediaRecorder`对象来录制视频并将其保存到浏览器中。在录制完成后，我们调用后端API`/save_recording`来保存录像，并将结果显示在照片预览区域中。

后端代码：

在后端代码中，我们需要实现两个API：`/take_photo`用于拍摄照片，`/save_recording`用于保存录像。这些API的实现因服务器不同具体实现方式也不同。以下代码仅仅给出了示例代码：

import java.io.File;
import java.io.FileOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

@RequestMapping("/")
@ResponseBody
public class MainController {

    @RequestMapping(value = "/take_photo", method = RequestMethod.GET)
    public Object takePhoto(HttpServletRequest request, HttpServletResponse response) {
        String format = request.getParameter("format");
        int width = Integer.parseInt(request.getParameter("width"));
        int height = Integer.parseInt(request.getParameter("height"));

        try {
            String filename = "photo_" + (new Date()).getTime() + "." + format;

            BufferedImage image = new Robot().createScreenCapture(new Rectangle(Toolkit.getDefaultToolkit().getScreenSize()));

            BufferedImage scaled = Scalr.resize(image, width, height);

            File file = new File("/path/to/photo", filename);
            ImageIO.write(scaled, format, file);

            Map<String, Object> data = new HashMap<>();
            data.put("success", true);
            data.put("filename", filename);
            data.put("url", "/path/to/photo/" + filename);

            return data;
        } catch (Exception e) {
            Map<String, Object> data = new HashMap<>();
            data.put("success", false);
            data.put("message", e.getMessage());

            return data;
        }
    }

    @RequestMapping(value = "/save_recording", method = RequestMethod.POST)
    public Object saveRecording(HttpServletRequest request, HttpServletResponse response, MultipartFile file) {
        String data = request.getParameter("data");
        String filename = request.getParameter("filename");

        try {
            File outputFile = new File("/path/to/recording", filename);

            FileOutputStream output = new FileOutputStream(outputFile);
            byte[] bytes = Base64.getDecoder().decode(data.replaceAll(".*?base64,", ""));
            output.write(bytes);
            output.flush();
            output.close();

            Map<String, Object> data = new HashMap<>();
            data.put("success", true);
            data.put("url", "/path/to/recording/" + filename);

            return data;
        } catch (Exception e) {
            Map<String, Object> data = new HashMap<>();
            data.put("success", false);
            data.put("message", e.getMessage());

            return data;
        }
    }
}

在这里，我们假设拍照API通过`Robot`类截屏并将结果保存为`BufferedImage`类型的图片，然后使用`Scalr`类将图片缩放到指定大小，最后将图片保存到服务器的`/path/to/photo`目录中。保存录像API将基于Base64编码的视频数据解码并写入到文件中，同时将文件保存到服务器的`/path/to/recording`目录中。

需要注意的是，这些示例代码并没有导入所需的依赖库，也没有进行安全验证等重要细节处理，使用时需要根据具体情况进行相应的扩展和修改。

通过该程序，您可以使用Ext JS 6调用电脑摄像头实现拍照录像且保存照片，保存录像。借助于前端和后端技术，您可以实现更为丰富的功能和交互体验，例如添加照片编辑、分享等功能，扩展应用场景和提升用户体验。