Hướng dẫn javascript screen recording library - thư viện ghi màn hình javascript

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.

• cd screen-recorder-app
  
  npx create-react-app client
  

  8 để tương tác với máy chủ web.

Đối với phụ trợ, chúng tôi sẽ sử dụng:

• cd screen-recorder-app
  
  npx create-react-app client
  

  9 - Khung Node.js cho máy chủ.

• npm install socket.io-client react-loader-spinner
  

  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.

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à

  // server address
  const LOCAL_SERVER = 'http://localhost:5000';
  let data_chunks = [];
  
  // MediaRecorder instance
  let media_recorder = null;
  

  0.
• Data_chunks của dữ liệu được ghi lại và giao diện phiên bản

  // server address
  const LOCAL_SERVER = 'http://localhost:5000';
  let data_chunks = [];
  
  // MediaRecorder instance
  let media_recorder = null;
  

  1 sẽ cung cấp API để ghi

  // server address
  const LOCAL_SERVER = 'http://localhost:5000';
  let data_chunks = [];
  
  // MediaRecorder instance
  let media_recorder = null;
  

  2.

// server address
const LOCAL_SERVER = 'http://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 = 'http://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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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 = 'http://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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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 = 'http://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 = 'http://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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

2.

Trong Chrome và Microsoft Edge, phương pháp

function App() {

// return a JSX of h2
  return (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

3 có thể thu được nội dung âm thanh.

Để 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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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 <Loader type='Oval' width='50' color='#027' />

JSX trong câu lệnh trả về bao gồm:

• function App() {
  
  // return a JSX of h2
    return (
      <Fragment>
        <h2>Recorder App</h2>
      </Fragment>
    )
  }
  

  5 Mục để xem mục
• 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

0

Là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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

8 trên tệp

function App() {

// return a JSX of h2
  return (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

0:

Kịch bản kích hoạt sự kiện này là:

cd screen-recorder-app

npx create-react-app client

1

Tiế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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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

2

Bê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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

1, kết nối ổ cắm khởi tạo và Express.

cd screen-recorder-app

npx create-react-app client

3

cd screen-recorder-app

npx create-react-app client

4

Tiế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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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 (
    <Fragment>
      <h2>Recorder App</h2>
    </Fragment>
  )
}

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

5

Cuố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

6

Mộ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