Máy tính là những công cụ thiết yếu trong các nhiệm vụ kinh doanh hàng ngày của chúng tôi. Đôi khi, chúng tôi có thể thấy hữu ích khi ghi lại các cuộc họp zoom trực tuyến, tạo video trình bày từ các slide hoặc hỗ trợ khách hàng với một hướng dẫn video về cách hoàn thành các tác vụ.
Để đạt được các hành động như vậy, cần có phần mềm tiện ích với khả năng chụp màn hình. Một ứng dụng ghi màn hình có thể tạo nội dung video kỹ thuật số bằng cách ghi lại các hoạt động của các cảnh quay trên máy tính hoặc màn hình di động trong thời gian thực.
Bài viết này hướng dẫn chúng tôi thực hiện chức năng này trong trình duyệt web bằng React và Node.js.
Điều kiện tiên quyết
- Kiến thức về ngôn ngữ lập trình JavaScript.
- Khái niệm cơ bản của Thư viện React. Tìm hiểu thêm về tài liệu chính thức ở đây.
- Trình chỉnh sửa mã như mã VS hoặc IDE.
- Có một phiên bản LTS Node.js hoặc sau này trên môi trường phát triển của bạn. Bạn có thể tải xuống ở đây.
Bắt đầu
Ứng dụng ghi màn hình của chúng tôi sẽ sử dụng JavaScript đầy đủ. Các thư viện chính ở phía máy khách bao gồm:
- ________ 17- Một thư viện JavaScript phía trước cho các ứng dụng động.
8 để tương tác với máy chủ web.cd screen-recorder-app npx create-react-app client
Đối với phụ trợ, chúng tôi sẽ sử dụng:
9 - Khung Node.js cho máy chủ.cd screen-recorder-app npx create-react-app client
0-Thư viện Node.js để phát triển các ứng dụng hai chiều thời gian thực bằng cách sử dụng ổ cắm web.npm install socket.io-client react-loader-spinner
1 - Một công cụ nguồn mở để làm việc với các luồng đa phương tiện như âm thanh và video.npm install socket.io-client react-loader-spinner
Thiết lập ứng dụng
Cấu trúc ứng dụng của chúng tôi bao gồm thư mục phụ trợ [____ 22] và thư mục React
npm install socket.io-client react-loader-spinner
3.Đầu tiên, chúng tôi sẽ tạo thư mục ứng dụng của chúng tôi và đặt tên cho nó
npm install socket.io-client react-loader-spinner
4. Sau đó, chúng tôi sẽ có hai thư mục bên trong thư mục; Thư mục npm install socket.io-client react-loader-spinner
2 cho thư mục và thư mục npm install socket.io-client react-loader-spinner
3 cho ứng dụng React.Trên thiết bị đầu cuối bash của bạn, hãy tạo thư mục dự án
npm install socket.io-client react-loader-spinner
4:mkdir screen-recorder-app
Điều hướng thư mục để tạo ứng dụng khách phản ứng bằng tiện ích
npm install socket.io-client react-loader-spinner
8. Thực hiện các lệnh sau:cd screen-recorder-app
npx create-react-app client
Công cụ dòng lệnh
npm install socket.io-client react-loader-spinner
8 tạo mã Boilerplate cho ứng dụng của chúng tôi. Tuy nhiên, toàn bộ mã của chúng tôi sẽ nằm trong tệp import { useEffect, useRef, useState, Fragment } from 'react';
import { io } from 'socket.io-client';
// adding a simple loading spinner component
import Loader from 'react-loader-spinner';
0.Ứng dụng của chúng tôi cần giao diện ổ cắm web để đạt được phần phụ trợ. Đối với chức năng này, chúng ta hãy thêm mô -đun
cd screen-recorder-app
npx create-react-app client
8 và import { useEffect, useRef, useState, Fragment } from 'react';
import { io } from 'socket.io-client';
// adding a simple loading spinner component
import Loader from 'react-loader-spinner';
2:npm install socket.io-client react-loader-spinner
Cuối cùng, mở thư mục trên IDE của bạn. Đối với mã VS, hãy chạy lệnh:
Để thiết lập thành phần của chúng tôi, hãy truy cập vào tệp
import { useEffect, useRef, useState, Fragment } from 'react';
import { io } from 'socket.io-client';
// adding a simple loading spinner component
import Loader from 'react-loader-spinner';
0 của bạn và nhập các móc import { useEffect, useRef, useState, Fragment } from 'react';
import { io } from 'socket.io-client';
// adding a simple loading spinner component
import Loader from 'react-loader-spinner';
4, import { useEffect, useRef, useState, Fragment } from 'react';
import { io } from 'socket.io-client';
// adding a simple loading spinner component
import Loader from 'react-loader-spinner';
5 và import { useEffect, useRef, useState, Fragment } from 'react';
import { io } from 'socket.io-client';
// adding a simple loading spinner component
import Loader from 'react-loader-spinner';
6. Tiếp theo, từ mô -đun cd screen-recorder-app
npx create-react-app client
8 của chúng tôi, nhập đối tượng import { useEffect, useRef, useState, Fragment } from 'react';
import { io } from 'socket.io-client';
// adding a simple loading spinner component
import Loader from 'react-loader-spinner';
8 để khởi tạo máy khách của chúng tôi.import { useEffect, useRef, useState, Fragment } from 'react';
import { io } from 'socket.io-client';
// adding a simple loading spinner component
import Loader from 'react-loader-spinner';
Ngoài tệp
import { useEffect, useRef, useState, Fragment } from 'react';
import { io } from 'socket.io-client';
// adding a simple loading spinner component
import Loader from 'react-loader-spinner';
9 chính của chúng tôi, khai báo các biến ứng dụng bao gồm:- Địa chỉ máy chủ cục bộ phụ trợ là
0.// server address const LOCAL_SERVER = '//localhost:5000'; let data_chunks = []; // MediaRecorder instance let media_recorder = null;
- Data_chunks của dữ liệu được ghi lại và giao diện phiên bản
1 sẽ cung cấp API để ghi// server address const LOCAL_SERVER = '//localhost:5000'; let data_chunks = []; // MediaRecorder instance let media_recorder = null;
2.// server address const LOCAL_SERVER = '//localhost:5000'; let data_chunks = []; // MediaRecorder instance let media_recorder = null;
// server address
const LOCAL_SERVER = '//localhost:5000';
let data_chunks = [];
// MediaRecorder instance
let media_recorder = null;
Chúng tôi sẽ viết mọi thứ trong tệp
import { useEffect, useRef, useState, Fragment } from 'react';
import { io } from 'socket.io-client';
// adding a simple loading spinner component
import Loader from 'react-loader-spinner';
9 cho phản ứng phía máy khách của chúng tôi. Hãy để thêm một thành phần chức năng được hiển thị từ JSX với thẻ // server address
const LOCAL_SERVER = '//localhost:5000';
let data_chunks = [];
// MediaRecorder instance
let media_recorder = null;
4 của ứng dụng ghi âm.function App[] {
// return a JSX of h2
return [
Recorder App
]
}
Nếu chúng ta khởi động máy chủ của mình bằng lệnh CLI của
// server address
const LOCAL_SERVER = '//localhost:5000';
let data_chunks = [];
// MediaRecorder instance
let media_recorder = null;
5, thì hãy truy cập vào trình duyệt của chúng ta, chúng ta sẽ thấy một cái gì đó như:Thành phần ứng dụng
Trong thành phần
import { useEffect, useRef, useState, Fragment } from 'react';
import { io } from 'socket.io-client';
// adding a simple loading spinner component
import Loader from 'react-loader-spinner';
9 của bạn, hãy thêm mã sau trên câu lệnh trả về của bạn.function App[] {
// a random username
const username = useRef[`User_${Date.now[].toString[].slice[-4]}`]
const socketRef = useRef[io[LOCAL_SERVER]]
const linkRef = useRef[]
const videoRef = useRef[]
// hold state for audio stream from device microphone
const [voiceStream, setVoiceStream] = useState[]
// A stream of a video captured from the screen
const [screenStream, setScreenStream] = useState[]
// loading status indicator
const [loading, setLoading] = useState[true]
// recording status indicator
const [recording, setRecording] = useState[false]
return [
Recorder App
]
}
Vì ứng dụng của chúng tôi không xác thực bất kỳ người dùng nào, chúng tôi cần tạo tên người dùng ngẫu nhiên từ dấu thời gian hiện tại bằng cách sử dụng móc
import { useEffect, useRef, useState, Fragment } from 'react';
import { io } from 'socket.io-client';
// adding a simple loading spinner component
import Loader from 'react-loader-spinner';
5 để tạo tham chiếu đến phần tử DOM.Socketref sẽ bắt đầu cuộc gọi đến kết nối ổ cắm web phụ trợ của chúng tôi bằng URL máy chủ. Điều này tạo ra một giao diện để bắt đầu luồng dữ liệu gửi và nhận. Móc
// server address
const LOCAL_SERVER = '//localhost:5000';
let data_chunks = [];
// MediaRecorder instance
let media_recorder = null;
8 ánh xạ vào DOM để cho phép người dùng tải xuống màn hình chụp ở định dạng video.Mục tiêu của API WebSockets là tạo kênh truyền thông toàn diện hoàn toàn qua một kết nối TCP duy nhất. Để kích hoạt một sự kiện, phương thức
// server address
const LOCAL_SERVER = '//localhost:5000';
let data_chunks = [];
// MediaRecorder instance
let media_recorder = null;
9 sẽ chấp nhận loại sự kiện cũng như dữ liệu được gửi.Vào cuối kết nối máy khách, chúng tôi xử lý các sự kiện bằng cách nghe WebSockets bằng phương pháp
function App[] {
// return a JSX of h2
return [
Recorder App
]
}
0. Phương thức này chấp nhận loại sự kiện làm đối số và chức năng gọi lại để thực thi khi sự kiện được phát ra.Tiếp theo, chúng ta cần chụp màn hình:
/**
* First, the client needs to notify the server
* when a new user has connected from the random username
*/
useEffect[[] => {
;[async [] => {
if [navigator.mediaDevices.getDisplayMedia] {
try {
// grant screen
const screenStream = await navigator.mediaDevices.getDisplayMedia[{
video: true
}]
// get the video stream
setScreenStream[screenStream]
}
// exception handling
catch [err] {
setLoading[false]
console.log['getDisplayMedia', err]
}
} else {
setLoading[false]
console.log['getDisplayMedia is not supported...']
}
}][]
}, []]
Điều hướng là một đối tượng cửa sổ trình duyệt. Theo đối tượng
function App[] {
// return a JSX of h2
return [
Recorder App
]
}
1, chúng tôi có quyền truy cập vào tất cả các đầu vào phương tiện được kết nối bao gồm micrô, camera và chia sẻ màn hình.Trong trường hợp này, chúng tôi đang ghi lại việc ghi dữ liệu màn hình dưới dạng luồng trực tiếp của
function App[] {
// return a JSX of h2
return [
Recorder App
]
}
2.Trong Chrome và Microsoft Edge, phương pháp
3 có thể thu được nội dung âm thanh.function App[] { // return a JSX of h2 return [ Recorder App ] }
Để bắt đầu nhận luồng phương tiện từ thiết bị của người dùng, hãy tạo chức năng
function App[] {
// return a JSX of h2
return [
Recorder App
]
}
4 với mã sau: function startRecording[] {
if [screenStream && voiceStream && !mediaRecorder] {
// set recording state to true
setRecording[true]
videoRef.current.removeAttribute['src']
linkRef.current.removeAttribute['href']
linkRef.current.removeAttribute['download']
let mediaStream
if [voiceStream === 'unavailable'] {
mediaStream = screenStream
}
// update media streams [... spread operator]
else {
mediaStream = new MediaStream[[
...screenStream.getVideoTracks[],
...voiceStream.getAudioTracks[]
]]
}
// mediaRecorder instance
mediaRecorder = new MediaRecorder[mediaStream]
mediaRecorder.ondataavailable = [{ data }] => {
dataChunks.push[data]
socketRef.current.emit['screenData:start', {
username: username.current,
data
}]
}
mediaRecorder.onstop = stopRecording;
// ..
mediaRecorder.start[250];
}
}
Chúng tôi đã sẵn sàng để viết màn hình mà không có âm thanh, vì vậy nếu xảy ra bất kỳ lỗi nào liên quan đến việc nhận luồng âm thanh [bao gồm cả người dùng từ chối cấp phép sử dụng micrô], chúng tôi đặt luồng thoại không khả dụng.
Hãy cùng xem đánh dấu:
function stopRecording[] {
setRecording[false]
socketRef.current.emit['screenData:end', username.current]
const videoBlob = new Blob[dataChunks, {
type: 'video/webm' //... blob type of video web media
}]
const videoSrc = URL.createObjectURL[videoBlob] //
//...Refs and video source
videoRef.current.src = videoSrc
linkRef.current.href = videoSrc
linkRef.current.download = `${Date.now[]}-${username.current}.webm`
//...
mediaRecorder = null
dataChunks = []
}
// bind the onClick method to a DOM button
// to start or stop recording
const onClick = [] => {
if [!recording] {
startRecording[]
} else {
if [mediaRecorder] {
mediaRecorder.stop[]
}
}
}
// loading spinner: we show the user a loading spinner till all needed permissions are granted.
if [loading] return
JSX trong câu lệnh trả về bao gồm:
5 Mục để xem mụcfunction App[] { // return a JSX of h2 return [ Recorder App ] }
- Một liên kết để tải xuống bản ghi video
- Một nút để bắt đầu hoặc dừng ghi
cd screen-recorder-app
npx create-react-app client
0Làm việc trên phần phụ trợ
Chúng tôi sẽ sử dụng thư mục
npm install socket.io-client react-loader-spinner
2 bên trong thư mục dự án function App[] {
// return a JSX of h2
return [
Recorder App
]
}
7 cho phần phụ trợ. Khởi tạo một dự án Node.js mới bằng lệnh:Vì LTS và phiên bản cao hơn của Node.js hỗ trợ cú pháp mô -đun nhập ES6, chúng tôi cần thêm loại
function App[] {
// return a JSX of h2
return [
Recorder App
]
}
8 trên tệp function App[] {
// return a JSX of h2
return [
Recorder App
]
}
9 của chúng tôi để bật nó lên phụ trợ của chúng tôi.Để tự động theo dõi và chạy lại máy chủ của chúng tôi khi thay đổi, chúng ta hãy thêm mô-đun
function App[] {
// a random username
const username = useRef[`User_${Date.now[].toString[].slice[-4]}`]
const socketRef = useRef[io[LOCAL_SERVER]]
const linkRef = useRef[]
const videoRef = useRef[]
// hold state for audio stream from device microphone
const [voiceStream, setVoiceStream] = useState[]
// A stream of a video captured from the screen
const [screenStream, setScreenStream] = useState[]
// loading status indicator
const [loading, setLoading] = useState[true]
// recording status indicator
const [recording, setRecording] = useState[false]
return [
Recorder App
]
}
0:Kịch bản kích hoạt sự kiện này là:
cd screen-recorder-app
npx create-react-app client
1Tiếp theo, trên tệp gốc
function App[] {
// a random username
const username = useRef[`User_${Date.now[].toString[].slice[-4]}`]
const socketRef = useRef[io[LOCAL_SERVER]]
const linkRef = useRef[]
const videoRef = useRef[]
// hold state for audio stream from device microphone
const [voiceStream, setVoiceStream] = useState[]
// A stream of a video captured from the screen
const [screenStream, setScreenStream] = useState[]
// loading status indicator
const [loading, setLoading] = useState[true]
// recording status indicator
const [recording, setRecording] = useState[false]
return [
Recorder App
]
}
1 của bạn, nhập các đối tượng function App[] {
// a random username
const username = useRef[`User_${Date.now[].toString[].slice[-4]}`]
const socketRef = useRef[io[LOCAL_SERVER]]
const linkRef = useRef[]
const videoRef = useRef[]
// hold state for audio stream from device microphone
const [voiceStream, setVoiceStream] = useState[]
// A stream of a video captured from the screen
const [screenStream, setScreenStream] = useState[]
// loading status indicator
const [loading, setLoading] = useState[true]
// recording status indicator
const [recording, setRecording] = useState[false]
return [
Recorder App
]
}
2 và function App[] {
// a random username
const username = useRef[`User_${Date.now[].toString[].slice[-4]}`]
const socketRef = useRef[io[LOCAL_SERVER]]
const linkRef = useRef[]
const videoRef = useRef[]
// hold state for audio stream from device microphone
const [voiceStream, setVoiceStream] = useState[]
// A stream of a video captured from the screen
const [screenStream, setScreenStream] = useState[]
// loading status indicator
const [loading, setLoading] = useState[true]
// recording status indicator
const [recording, setRecording] = useState[false]
return [
Recorder App
]
}
3 từ function App[] {
// a random username
const username = useRef[`User_${Date.now[].toString[].slice[-4]}`]
const socketRef = useRef[io[LOCAL_SERVER]]
const linkRef = useRef[]
const videoRef = useRef[]
// hold state for audio stream from device microphone
const [voiceStream, setVoiceStream] = useState[]
// A stream of a video captured from the screen
const [screenStream, setScreenStream] = useState[]
// loading status indicator
const [loading, setLoading] = useState[true]
// recording status indicator
const [recording, setRecording] = useState[false]
return [
Recorder App
]
}
4. Sau đó, chức năng function App[] {
// a random username
const username = useRef[`User_${Date.now[].toString[].slice[-4]}`]
const socketRef = useRef[io[LOCAL_SERVER]]
const linkRef = useRef[]
const videoRef = useRef[]
// hold state for audio stream from device microphone
const [voiceStream, setVoiceStream] = useState[]
// A stream of a video captured from the screen
const [screenStream, setScreenStream] = useState[]
// loading status indicator
const [loading, setLoading] = useState[true]
// recording status indicator
const [recording, setRecording] = useState[false]
return [
Recorder App
]
}
5 sẽ xử lý kết nối ổ cắm web của chúng tôi.cd screen-recorder-app
npx create-react-app client
2Bên dưới việc nhập trong tệp
function App[] {
// a random username
const username = useRef[`User_${Date.now[].toString[].slice[-4]}`]
const socketRef = useRef[io[LOCAL_SERVER]]
const linkRef = useRef[]
const videoRef = useRef[]
// hold state for audio stream from device microphone
const [voiceStream, setVoiceStream] = useState[]
// A stream of a video captured from the screen
const [screenStream, setScreenStream] = useState[]
// loading status indicator
const [loading, setLoading] = useState[true]
// recording status indicator
const [recording, setRecording] = useState[false]
return [
Recorder App
]
}
1, kết nối ổ cắm khởi tạo và Express.cd screen-recorder-app
npx create-react-app client
3cd screen-recorder-app
npx create-react-app client
4Tiếp theo, tạo một thư mục
function App[] {
// a random username
const username = useRef[`User_${Date.now[].toString[].slice[-4]}`]
const socketRef = useRef[io[LOCAL_SERVER]]
const linkRef = useRef[]
const videoRef = useRef[]
// hold state for audio stream from device microphone
const [voiceStream, setVoiceStream] = useState[]
// A stream of a video captured from the screen
const [screenStream, setScreenStream] = useState[]
// loading status indicator
const [loading, setLoading] = useState[true]
// recording status indicator
const [recording, setRecording] = useState[false]
return [
Recorder App
]
}
7. Bên trong thư mục, thêm tệp function App[] {
// a random username
const username = useRef[`User_${Date.now[].toString[].slice[-4]}`]
const socketRef = useRef[io[LOCAL_SERVER]]
const linkRef = useRef[]
const videoRef = useRef[]
// hold state for audio stream from device microphone
const [voiceStream, setVoiceStream] = useState[]
// A stream of a video captured from the screen
const [screenStream, setScreenStream] = useState[]
// loading status indicator
const [loading, setLoading] = useState[true]
// recording status indicator
const [recording, setRecording] = useState[false]
return [
Recorder App
]
}
8 có chức năng để lưu bản ghi ứng dụng của chúng tôi. Dán mã sau:cd screen-recorder-app
npx create-react-app client
5Cuối cùng, hãy khởi động máy chủ trên cổng 5000 với chức năng gọi lại ghi lại khi sự kiện được bắn.
cd screen-recorder-app
npx create-react-app client
6Một bản demo đang chạy
Kiểm tra mã nguồn trên GitHub.
Sự kết luận
Với sự trợ giúp của các ứng dụng ghi màn hình, chúng tôi có thể lưu, sao chép và tái sử dụng video hữu ích cho các doanh nghiệp hoặc khách hàng trong một loạt các nhiệm vụ doanh nghiệp.
Trong bài viết này, chúng tôi đã tìm hiểu về phần mềm ghi màn hình, nó là gì, làm thế nào để xây dựng một cách sử dụng React và Node.js và một số lợi ích của nó. Cảm ơn vì đã đọc!
Đóng góp đánh giá ngang hàng của: Mercy Meave