Hướng dẫn javascript record screen and audio - javascript ghi lại màn hình và âm thanh

Nắm bắt nội dung màn hình

Nắm bắt nội dung màn hình dưới dạng trực tiếp

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

Bắt đầu chụp màn hình: ________ 17/________ 18 Phong cách

async function startCapture(displayMediaOptions) {
  let captureStream = null;

  try {
    captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  } catch (err) {
    console.error(`Error: ${err}`);
  }
  return captureStream;
}

Bạn có thể viết mã này bằng cách sử dụng hàm không đồng bộ và toán tử

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

const gdmOptions = {
  video: true,
  audio: true
}

Bắt đầu chụp màn hình: const gdmOptions = { video: true, audio: true } 0 Phong cách

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

Dù bằng cách nào, tác nhân người dùng phản hồi bằng cách trình bày giao diện người dùng nhắc người dùng chọn vùng màn hình để chia sẻ. Cả hai triển khai này của

const gdmOptions = {
  video: true,
  audio: true
}

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

Xem các tùy chọn và ràng buộc, bên dưới, để biết thêm về cả cách chỉ định loại bề mặt bạn muốn cũng như các cách khác để điều chỉnh luồng kết quả.

Ví dụ về cửa sổ cho phép người dùng chọn bề mặt hiển thị để chụp

Sau đó, bạn có thể sử dụng luồng bị bắt,

const gdmOptions = {
  video: true,
  audio: true
}

Có thể nhìn thấy so với bề mặt hiển thị logic

Đối với các mục đích của API chụp màn hình, bề mặt hiển thị là bất kỳ đối tượng nội dung nào có thể được API chọn cho mục đích chia sẻ. Chia sẻ bề mặt bao gồm nội dung của tab Trình duyệt, cửa sổ hoàn chỉnh, tất cả các cửa sổ của một ứng dụng được kết hợp thành một bề mặt và một màn hình (hoặc nhóm màn hình kết hợp với nhau thành một bề mặt).display surface is any content object that can be selected by the API for sharing purposes. Sharing surfaces include the contents of a browser tab, a complete window, all of the windows of an application combined into a single surface, and a monitor (or group of monitors combined together into one surface).

Có hai loại bề mặt hiển thị. Bề mặt hiển thị có thể nhìn thấy là một bề mặt hoàn toàn có thể nhìn thấy trên màn hình, chẳng hạn như cửa sổ phía trước hoặc tab hoặc toàn bộ màn hình.visible display surface is a surface which is entirely visible on the screen, such as the frontmost window or tab, or the entire screen.

Một bề mặt hiển thị logic là một bề mặt một phần hoặc bị che khuất hoàn toàn, bằng cách bị chồng chéo bởi một đối tượng khác ở một mức độ nào đó, hoặc bằng cách bị ẩn hoàn toàn hoặc ngoài màn hình. Cách chúng được xử lý bởi API chụp màn hình khác nhau. Nói chung, trình duyệt sẽ cung cấp một hình ảnh che khuất phần ẩn của bề mặt hiển thị logic theo một cách nào đó, chẳng hạn như bằng cách làm mờ hoặc thay thế bằng một màu hoặc hoa văn. Điều này được thực hiện vì lý do bảo mật, vì nội dung mà người dùng không thể nhìn thấy có thể chứa dữ liệu mà họ không muốn chia sẻ.logical display surface is one which is in part or completely obscured, either by being overlapped by another object to some extent, or by being entirely hidden or offscreen. How these are handled by the Screen Capture API varies. Generally, the browser will provide an image which obscures the hidden portion of the logical display surface in some way, such as by blurring or replacing with a color or pattern. This is done for security reasons, as the content that cannot be seen by the user may contain data which they do not want to share.

Một tác nhân người dùng có thể cho phép chụp toàn bộ nội dung của một cửa sổ bị che khuất sau khi nhận được sự cho phép của người dùng để làm như vậy. Trong trường hợp này, tác nhân người dùng có thể bao gồm nội dung bị che khuất, bằng cách lấy nội dung hiện tại của phần ẩn của cửa sổ hoặc bằng cách trình bày các nội dung có thể xem xét rõ ràng nhất nếu không có nội dung hiện tại.

Tùy chọn và ràng buộc

Đối tượng ràng buộc được truyền vào

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

Lưu ý: Không giống như hầu hết các cách sử dụng các ràng buộc trong API phương tiện, ở đây nó chỉ được sử dụng để xác định cấu hình luồng và không lọc các lựa chọn có sẵn. Unlike most uses of constraints in media APIs, here it's solely used to define the stream configuration, and not to filter the available choices.

Xem các thuộc tính của các bản nhạc được chia sẻ để biết chi tiết về các ràng buộc bổ sung để định cấu hình luồng ghi màn hình được thêm vào

const gdmOptions = {
  video: true,
  audio: true
}

const gdmOptions = {
  video: true,
  audio: true
}

const gdmOptions = {
  video: true,
  audio: true
}

Không có ràng buộc nào được áp dụng theo bất kỳ cách nào cho đến khi sau khi nội dung nắm bắt đã được chọn. Các ràng buộc thay đổi những gì bạn thấy trong luồng kết quả.

Ví dụ: nếu bạn chỉ định ràng buộc

const gdmOptions = {
  video: true,
  audio: true
}

Lưu ý: Các ràng buộc không bao giờ gây ra các thay đổi trong danh sách các nguồn có sẵn để chụp bởi API chia sẻ màn hình. Điều này đảm bảo rằng các ứng dụng web không thể buộc người dùng chia sẻ nội dung cụ thể bằng cách hạn chế danh sách nguồn cho đến khi chỉ còn một mục. Constraints never cause changes to the list of sources available for capture by the Screen Sharing API. This ensures that web applications can't force the user to share specific content by restricting the source list until only one item is left.

Mặc dù chụp hiển thị có hiệu lực, máy chia sẻ nội dung màn hình sẽ hiển thị một số dạng chỉ báo để người dùng biết rằng việc chia sẻ đang diễn ra.

Lưu ý: Vì lý do bảo mật và bảo mật, các nguồn chia sẻ màn hình không phải là người sử dụng

const gdmOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

const gdmOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

const gdmOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

const gdmOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

Chụp âm thanh chia sẻ

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

Trước khi bắt đầu một dự án yêu cầu chia sẻ âm thanh, hãy chắc chắn kiểm tra khả năng tương thích của trình duyệt trong

const gdmOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

Để yêu cầu màn hình được chia sẻ với âm thanh bao gồm, các tùy chọn được chuyển vào

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

const gdmOptions = {
  video: true,
  audio: true
}

Điều này cho phép người dùng hoàn toàn tự do chọn bất cứ điều gì họ muốn, trong giới hạn của những gì tác nhân người dùng hỗ trợ. Điều này có thể được tinh chỉnh thêm bằng cách chỉ định thông tin bổ sung cho mỗi

const gdmOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

const gdmOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

const gdmOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

Trong ví dụ này, con trỏ sẽ luôn có thể nhìn thấy trong việc chụp và bản nhạc âm thanh lý tưởng sẽ có các tính năng hủy tiếng ồn và hủy tiếng vang, cũng như tốc độ mẫu âm thanh lý tưởng là 44,1kHz.

Việc chụp âm thanh luôn là tùy chọn và ngay cả khi nội dung web yêu cầu một luồng với cả âm thanh và video,

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

Lưu ý: Một số thuộc tính không được thực hiện rộng rãi và có thể không được sử dụng bởi động cơ.

const gdmOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

const gdmOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

Sử dụng luồng bị bắt

const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");

// Options for getDisplayMedia()

const displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: false
};

// Set event listeners for the start and stop buttons
startElem.addEventListener("click", (evt) => {
  startCapture();
}, false);

stopElem.addEventListener("click", (evt) => {
  stopCapture();
}, false);

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

Rủi ro tiềm ẩn

Các vấn đề về quyền riêng tư và bảo mật xung quanh việc chia sẻ màn hình thường không quá nghiêm trọng, nhưng chúng tồn tại. Vấn đề tiềm năng lớn nhất là người dùng vô tình chia sẻ nội dung mà họ không muốn chia sẻ.

Ví dụ: vi phạm quyền riêng tư và/hoặc bảo mật có thể dễ dàng xảy ra nếu người dùng chia sẻ màn hình của họ và cửa sổ nền có thể nhìn thấy có chứa thông tin cá nhân hoặc nếu trình quản lý mật khẩu của họ có thể nhìn thấy trong luồng chung. Hiệu ứng này có thể được khuếch đại khi chụp các bề mặt hiển thị logic, có thể chứa nội dung mà người dùng không biết gì cả, chứ đừng nói đến việc xem.

Các tác nhân người dùng coi trọng quyền riêng tư nên làm xáo trộn nội dung không thực sự hiển thị trên màn hình, trừ khi được ủy quyền được trao để chia sẻ nội dung đó một cách cụ thể.

Trước khi phát trực tuyến nội dung màn hình đã chụp có thể bắt đầu, tác nhân người dùng sẽ yêu cầu người dùng xác nhận yêu cầu chia sẻ và để chọn nội dung để chia sẻ.

Ví dụ

Chụp màn hình đơn giản

Trong ví dụ này, nội dung của khu vực màn hình đã chụp được truyền thành một phần tử

const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");

// Options for getDisplayMedia()

const displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: false
};

// Set event listeners for the start and stop buttons
startElem.addEventListener("click", (evt) => {
  startCapture();
}, false);

stopElem.addEventListener("click", (evt) => {
  stopCapture();
}, false);

JavaScript

Không có nhiều mã cần thiết để thực hiện công việc này và nếu bạn quen thuộc với việc sử dụng

const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");

// Options for getDisplayMedia()

const displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: false
};

// Set event listeners for the start and stop buttons
startElem.addEventListener("click", (evt) => {
  startCapture();
}, false);

stopElem.addEventListener("click", (evt) => {
  stopCapture();
}, false);

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

Thành lập

Đầu tiên, một số hằng số được thiết lập để tham chiếu các phần tử trên trang mà chúng ta sẽ cần truy cập:

const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");

// Options for getDisplayMedia()

const displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: false
};

// Set event listeners for the start and stop buttons
startElem.addEventListener("click", (evt) => {
  startCapture();
}, false);

stopElem.addEventListener("click", (evt) => {
  stopCapture();
}, false);

Đối tượng

const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");

// Options for getDisplayMedia()

const displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: false
};

// Set event listeners for the start and stop buttons
startElem.addEventListener("click", (evt) => {
  startCapture();
}, false);

stopElem.addEventListener("click", (evt) => {
  stopCapture();
}, false);

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

const gdmOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

console.log = (msg) => logElem.innerHTML += `${msg}<br>`;
console.error = (msg) => logElem.innerHTML += `<span class="error">${msg}</span><br>`;
console.warn = (msg) => logElem.innerHTML += `<span class="warn">${msg}<span><br>`;
console.info = (msg) => logElem.innerHTML += `<span class="info">${msg}</span><br>`;

Lưu ý: Một số thuộc tính không được thực hiện rộng rãi và có thể không được sử dụng bởi động cơ.

const gdmOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

const gdmOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

Sử dụng luồng bị bắt

const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");

// Options for getDisplayMedia()

const displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: false
};

// Set event listeners for the start and stop buttons
startElem.addEventListener("click", (evt) => {
  startCapture();
}, false);

stopElem.addEventListener("click", (evt) => {
  stopCapture();
}, false);

const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");

// Options for getDisplayMedia()

const displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: false
};

// Set event listeners for the start and stop buttons
startElem.addEventListener("click", (evt) => {
  startCapture();
}, false);

stopElem.addEventListener("click", (evt) => {
  stopCapture();
}, false);

0 được trả về bởi

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

3 giải quyết thành một

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

5 chứa ít nhất một luồng video chứa màn hình hoặc khu vực màn hình và được điều chỉnh hoặc lọc dựa trên các ràng buộc được chỉ định khi

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

3 được gọi.

Rủi ro tiềm ẩn

console.log = (msg) => logElem.innerHTML += `${msg}<br>`;
console.error = (msg) => logElem.innerHTML += `<span class="error">${msg}</span><br>`;
console.warn = (msg) => logElem.innerHTML += `<span class="warn">${msg}<span><br>`;
console.info = (msg) => logElem.innerHTML += `<span class="info">${msg}</span><br>`;

Các vấn đề về quyền riêng tư và bảo mật xung quanh việc chia sẻ màn hình thường không quá nghiêm trọng, nhưng chúng tồn tại. Vấn đề tiềm năng lớn nhất là người dùng vô tình chia sẻ nội dung mà họ không muốn chia sẻ.

Ví dụ: vi phạm quyền riêng tư và/hoặc bảo mật có thể dễ dàng xảy ra nếu người dùng chia sẻ màn hình của họ và cửa sổ nền có thể nhìn thấy có chứa thông tin cá nhân hoặc nếu trình quản lý mật khẩu của họ có thể nhìn thấy trong luồng chung. Hiệu ứng này có thể được khuếch đại khi chụp các bề mặt hiển thị logic, có thể chứa nội dung mà người dùng không biết gì cả, chứ đừng nói đến việc xem.

Các tác nhân người dùng coi trọng quyền riêng tư nên làm xáo trộn nội dung không thực sự hiển thị trên màn hình, trừ khi được ủy quyền được trao để chia sẻ nội dung đó một cách cụ thể.

async function startCapture() {
  logElem.innerHTML = "";

  try {
    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    dumpOptionsInfo();
  } catch (err) {
    console.error(`Error: ${err}`);
  }
}

Trước khi phát trực tuyến nội dung màn hình đã chụp có thể bắt đầu, tác nhân người dùng sẽ yêu cầu người dùng xác nhận yêu cầu chia sẻ và để chọn nội dung để chia sẻ.

Luồng được kết nối với phần tử

const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");

// Options for getDisplayMedia()

const displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: false
};

// Set event listeners for the start and stop buttons
startElem.addEventListener("click", (evt) => {
  startCapture();
}, false);

stopElem.addEventListener("click", (evt) => {
  stopCapture();
}, false);

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

Hàm

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach((track) => track.stop());
  videoElem.srcObject = null;
}

Nếu bất kỳ điều đó thất bại, mệnh đề

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach((track) => track.stop());
  videoElem.srcObject = null;
}

Dừng hiển thị chụp

Phương thức

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach((track) => track.stop());
  videoElem.srcObject = null;
}

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach((track) => track.stop());
  videoElem.srcObject = null;
}

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach((track) => track.stop());
  videoElem.srcObject = null;
}

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach((track) => track.stop());
  videoElem.srcObject = null;
}

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach((track) => track.stop());
  videoElem.srcObject = null;
}

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach((track) => track.stop());
  videoElem.srcObject = null;
}

Thông tin cấu hình bán phá giá

Đối với các mục đích thông tin, phương thức

const gdmOptions = {
  video: true,
  audio: true
}

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach((track) => track.stop());
  videoElem.srcObject = null;
}

function dumpOptionsInfo() {
  const videoTrack = videoElem.srcObject.getVideoTracks()[0];

  console.info("Track settings:");
  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
  console.info("Track constraints:");
  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}

Danh sách theo dõi có được bằng cách gọi

function dumpOptionsInfo() {
  const videoTrack = videoElem.srcObject.getVideoTracks()[0];

  console.info("Track settings:");
  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
  console.info("Track constraints:");
  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

function dumpOptionsInfo() {
  const videoTrack = videoElem.srcObject.getVideoTracks()[0];

  console.info("Track settings:");
  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
  console.info("Track constraints:");
  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}

function dumpOptionsInfo() {
  const videoTrack = videoElem.srcObject.getVideoTracks()[0];

  console.info("Track settings:");
  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
  console.info("Track constraints:");
  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}

HTML

HTML bắt đầu với một đoạn giới thiệu đơn giản, sau đó vào phần thịt của mọi thứ.

<p>
  This example shows you the contents of the selected part of your display.
  Click the Start Capture button to begin.
</p>

<p>
  <button id="start">Start Capture</button>&nbsp;<button id="stop">
    Stop Capture
  </button>
</p>

<video id="video" autoplay></video>
<br />

<strong>Log:</strong>
<br />
<pre id="log"></pre>

Các phần chính của HTML là:

1. A
2. Một nút thứ hai, "Dừng bắt", khi được nhấp vào cuộc gọi

   function stopCapture(evt) {
     let tracks = videoElem.srcObject.getTracks();
   
     tracks.forEach((track) => track.stop());
     videoElem.srcObject = null;
   }
   

   3 để chấm dứt chụp nội dung màn hình.
3. Một

   const videoElem = document.getElementById("video");
   const logElem = document.getElementById("log");
   const startElem = document.getElementById("start");
   const stopElem = document.getElementById("stop");
   
   // Options for getDisplayMedia()
   
   const displayMediaOptions = {
     video: {
       cursor: "always"
     },
     audio: false
   };
   
   // Set event listeners for the start and stop buttons
   startElem.addEventListener("click", (evt) => {
     startCapture();
   }, false);
   
   stopElem.addEventListener("click", (evt) => {
     stopCapture();
   }, false);
   

   4 trong đó nội dung màn hình bị bắt được phát trực tuyến.
4. Một khối

   console.log = (msg) => logElem.innerHTML += `${msg}<br>`;
   console.error = (msg) => logElem.innerHTML += `<span class="error">${msg}</span><br>`;
   console.warn = (msg) => logElem.innerHTML += `<span class="warn">${msg}<span><br>`;
   console.info = (msg) => logElem.innerHTML += `<span class="info">${msg}</span><br>`;
   

   4 trong đó văn bản đã đăng nhập được đặt bằng phương thức

   console.log = (msg) => logElem.innerHTML += `${msg}<br>`;
   console.error = (msg) => logElem.innerHTML += `<span class="error">${msg}</span><br>`;
   console.warn = (msg) => logElem.innerHTML += `<span class="warn">${msg}<span><br>`;
   console.info = (msg) => logElem.innerHTML += `<span class="info">${msg}</span><br>`;
   

   3 bị chặn.

CSS

CSS hoàn toàn là mỹ phẩm trong ví dụ này. Video được cung cấp một đường viền và chiều rộng của nó được đặt để chiếm gần như toàn bộ không gian ngang có sẵn (

<p>
  This example shows you the contents of the selected part of your display.
  Click the Start Capture button to begin.
</p>

<p>
  <button id="start">Start Capture</button>&nbsp;<button id="stop">
    Stop Capture
  </button>
</p>

<video id="video" autoplay></video>
<br />

<strong>Log:</strong>
<br />
<pre id="log"></pre>

<p>
  This example shows you the contents of the selected part of your display.
  Click the Start Capture button to begin.
</p>

<p>
  <button id="start">Start Capture</button>&nbsp;<button id="stop">
    Stop Capture
  </button>
</p>

<video id="video" autoplay></video>
<br />

<strong>Log:</strong>
<br />
<pre id="log"></pre>

<p>
  This example shows you the contents of the selected part of your display.
  Click the Start Capture button to begin.
</p>

<p>
  <button id="start">Start Capture</button>&nbsp;<button id="stop">
    Stop Capture
  </button>
</p>

<video id="video" autoplay></video>
<br />

<strong>Log:</strong>
<br />
<pre id="log"></pre>

Các lớp

<p>
  This example shows you the contents of the selected part of your display.
  Click the Start Capture button to begin.
</p>

<p>
  <button id="start">Start Capture</button>&nbsp;<button id="stop">
    Stop Capture
  </button>
</p>

<video id="video" autoplay></video>
<br />

<strong>Log:</strong>
<br />
<pre id="log"></pre>

<p>
  This example shows you the contents of the selected part of your display.
  Click the Start Capture button to begin.
</p>

<p>
  <button id="start">Start Capture</button>&nbsp;<button id="stop">
    Stop Capture
  </button>
</p>

<video id="video" autoplay></video>
<br />

<strong>Log:</strong>
<br />
<pre id="log"></pre>

<p>
  This example shows you the contents of the selected part of your display.
  Click the Start Capture button to begin.
</p>

<p>
  <button id="start">Start Capture</button>&nbsp;<button id="stop">
    Stop Capture
  </button>
</p>

<video id="video" autoplay></video>
<br />

<strong>Log:</strong>
<br />
<pre id="log"></pre>

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

Kết quả

Sản phẩm cuối cùng trông như thế này. Nếu trình duyệt của bạn hỗ trợ API chụp màn hình, nhấp vào "Bắt đầu bắt" sẽ trình bày giao diện của tác nhân người dùng để chọn màn hình, cửa sổ hoặc tab để chia sẻ.

Bảo vệ

Để hoạt động khi chính sách tính năng được bật, bạn sẽ cần sự cho phép

<p>
  This example shows you the contents of the selected part of your display.
  Click the Start Capture button to begin.
</p>

<p>
  <button id="start">Start Capture</button>&nbsp;<button id="stop">
    Stop Capture
  </button>
</p>

<video id="video" autoplay></video>
<br />

<strong>Log:</strong>
<br />
<pre id="log"></pre>

<p>
  This example shows you the contents of the selected part of your display.
  Click the Start Capture button to begin.
</p>

<p>
  <button id="start">Start Capture</button>&nbsp;<button id="stop">
    Stop Capture
  </button>
</p>

<video id="video" autoplay></video>
<br />

<strong>Log:</strong>
<br />
<pre id="log"></pre>

<p>
  This example shows you the contents of the selected part of your display.
  Click the Start Capture button to begin.
</p>

<p>
  <button id="start">Start Capture</button>&nbsp;<button id="stop">
    Stop Capture
  </button>
</p>

<video id="video" autoplay></video>
<br />

<strong>Log:</strong>
<br />
<pre id="log"></pre>

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

<p>
  This example shows you the contents of the selected part of your display.
  Click the Start Capture button to begin.
</p>

<p>
  <button id="start">Start Capture</button>&nbsp;<button id="stop">
    Stop Capture
  </button>
</p>

<video id="video" autoplay></video>
<br />

<strong>Log:</strong>
<br />
<pre id="log"></pre>

Ví dụ: dòng này trong các tiêu đề HTTP sẽ bật API chụp màn hình cho tài liệu và bất kỳ phần tử

<p>
  This example shows you the contents of the selected part of your display.
  Click the Start Capture button to begin.
</p>

<p>
  <button id="start">Start Capture</button>&nbsp;<button id="stop">
    Stop Capture
  </button>
</p>

<video id="video" autoplay></video>
<br />

<strong>Log:</strong>
<br />
<pre id="log"></pre>

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

Nếu bạn đang thực hiện chụp màn hình trong

<p>
  This example shows you the contents of the selected part of your display.
  Click the Start Capture button to begin.
</p>

<p>
  <button id="start">Start Capture</button>&nbsp;<button id="stop">
    Stop Capture
  </button>
</p>

<video id="video" autoplay></video>
<br />

<strong>Log:</strong>
<br />
<pre id="log"></pre>

function startCapture(displayMediaOptions) {
 return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
    .catch((err) => { console.error(`Error:${err}`); return null; });
}

Xem thêm