Electron - Thu âm thanh và video
Ghi âm và quay video là những đặc điểm quan trọng nếu bạn đang tạo ứng dụng để chia sẻ màn hình, ghi nhớ thoại, v.v. Chúng cũng hữu ích nếu bạn yêu cầu một ứng dụng để chụp ảnh hồ sơ.
Chúng tôi sẽ sử dụng API getUserMedia HTML5 để thu các luồng âm thanh và video bằng Electron. Đầu tiên chúng ta hãy thiết lập quy trình chính của mình trongmain.js tập tin như sau -
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
let win
// Set the path where recordings will be saved
app.setPath("userData", __dirname + "/saved_recordings")
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow)Bây giờ chúng ta đã thiết lập quy trình chính của mình, hãy tạo tệp HTML sẽ ghi lại nội dung này. Tạo một tệp có tênindex.html với nội dung sau -
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Audio and Video</title>
</head>
<body>
<video autoplay></video>
<script type = "text/javascript">
function errorCallback(e) {
console.log('Error', e)
}
navigator.getUserMedia({video: true, audio: true}, (localMediaStream) => {
var video = document.querySelector('video')
video.src = window.URL.createObjectURL(localMediaStream)
video.onloadedmetadata = (e) => {
// Ready to go. Do some stuff.
};
}, errorCallback)
</script>
</body>
</html>Chương trình trên sẽ tạo ra kết quả sau:
Bây giờ bạn có luồng từ cả webcam và micrô của mình. Bạn có thể gửi luồng này qua mạng hoặc lưu luồng này ở định dạng bạn thích.
Hãy xem Tài liệu MDN về chụp ảnh để lấy ảnh từ webcam của bạn và lưu trữ chúng. Điều này được thực hiện bằng cách sử dụng API getUserMedia HTML5 . Bạn cũng có thể chụp màn hình người dùng bằng mô-đun DesktopCapturer đi kèm với Electron. Bây giờ chúng ta hãy xem một ví dụ về cách lấy luồng màn hình.
Sử dụng cùng một tệp main.js như trên và chỉnh sửa tệp index.html để có nội dung sau:
desktopCapturer.getSources({types: ['window', 'screen']}, (error, sources) => {
if (error) throw error
for (let i = 0; i < sources.length; ++i) {
if (sources[i].name === 'Your Window Name here!') {
navigator.webkitGetUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: sources[i].id,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720
}
}
}, handleStream, handleError)
return
}
}
})
function handleStream (stream) {
document.querySelector('video').src = URL.createObjectURL(stream)
}
function handleError (e) {
console.log(e)
}Chúng tôi đã sử dụng mô-đun DesktopCapturer để lấy thông tin về mỗi cửa sổ đang mở. Giờ đây, bạn có thể chụp các sự kiện của một ứng dụng cụ thể hoặc của toàn bộ màn hình tùy thuộc vào tên bạn chuyển cho phần trênif statement. Điều này sẽ chỉ truyền trực tuyến những gì đang diễn ra trên màn hình đó tới ứng dụng của bạn.
Bạn có thể tham khảo câu hỏi StackOverflow này để hiểu chi tiết cách sử dụng.