使用ext js6调用本机电脑摄像头实现拍照并且保存录像的例子
时间: 2023-05-28 09:01:46 浏览: 247
很遗憾,因为 ext js6 是一个纯前端的 JavaScript 框架,无法直接调用本地电脑的摄像头,所以无法实现拍照和保存录像的功能。要实现这样的功能,需要结合使用一些浏览器原生的 API,如获取本地摄像头的 MediaStream API,录制视频的 MediaRecorder API 等。同时,还需要使用一些后台技术,如 Node.js、PHP 等,来实现将视频文件保存到本地磁盘的功能。
相关问题
使用ext js6调用电脑摄像头实现拍照并且保存录像的例子
很遗憾,由于安全性和隐私问题,浏览器不允许JavaScript直接访问摄像头和麦克风,除非用户授予许可。因此,您需要使用WebRTC技术来访问摄像头。以下是一个使用WebRTC和ExtJS 6创建视频聊天的示例代码:
```javascript
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调用电脑摄像头实现拍照录像且保存照片,保存录像。借助于前端和后端技术,您可以实现更为丰富的功能和交互体验,例如添加照片编辑、分享等功能,扩展应用场景和提升用户体验。
阅读全文