ext js6连接电脑摄像头录像例子
时间: 2023-06-02 09:03:07 浏览: 69
由于Ext JS是一个前端框架,而连接电脑摄像头需要使用浏览器的Web API,因此需要借助一些第三方库来实现。以下是一个使用WebRTC和RecordRTC库连接电脑摄像头并录像的例子:
1. 引入RecordRTC和Ext JS库:
```html
<!-- 引入 RecordRTC.js -->
<script src="//cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<!-- 引入 Ext JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
```
2. 创建一个Ext JS窗口来显示视频流并添加“开始录制”和“停止录制”按钮:
```javascript
Ext.define('MyApp.view.Main', {
extend: 'Ext.window.Window',
title: '摄像头录像',
width: 800,
height: 600,
layout: 'fit',
items: [{
xtype: 'component',
itemId: 'videoComp',
autoEl: {
tag: 'video',
autoplay: true,
muted: true,
controls: true
}
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: '开始录制',
handler: 'onStartRecord'
}, {
text: '停止录制',
handler: 'onStopRecord',
disabled: true
}]
}]
});
```
3. 在窗口渲染后,使用WebRTC API获取视频流并将其显示在窗口中:
```javascript
Ext.define('MyApp.view.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onAfterRender: function(win) {
var videoComp = win.down('#videoComp').el.dom;
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(function(stream) {
videoComp.srcObject = stream;
videoComp.play();
})
.catch(function(err) {
console.error('获取视频流失败:', err);
});
}
});
```
4. 实现“开始录制”和“停止录制”按钮的点击处理程序:
```javascript
Ext.define('MyApp.view.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onStartRecord: function() {
var videoComp = this.getView().down('#videoComp').el.dom;
var recordRTC = RecordRTC(videoComp.srcObject, {
type: 'video'
});
this.recordRTC = recordRTC;
recordRTC.startRecording();
this.getView().down('button[text=停止录制]').setDisabled(false);
this.getView().down('button[text=开始录制]').setDisabled(true);
},
onStopRecord: function() {
var recordRTC = this.recordRTC;
recordRTC.stopRecording(function() {
var blob = recordRTC.getBlob();
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'record.webm';
a.click();
});
this.getView().down('button[text=停止录制]').setDisabled(true);
this.getView().down('button[text=开始录制]').setDisabled(false);
}
});
```
以上代码实现了一个连接电脑摄像头并录像的例子,需要注意的是,由于使用了浏览器的Web API,因此该例子只能在支持WebRTC的浏览器中运行。