你是否曾想过创建自己的屏幕共享应用程序是难还是易？
在本文中，我将向你展示如何使用 JavaScript 通过 Screen Capture API 及其 getDisplayMedia() 技术来创建屏幕共享应用程序。这将使我们能够捕获屏幕的一半或全部，并在整个 WebRTC 会议会话期间与其他用户共享。
初始步骤：
1. 在你最喜欢的 IDE 中创建一个新项目。
2. 设置 HTML 样板代码
3. 添加 JavaScript 代码
4. 部署 Live 服务器
本教程将使用 VScode，你也可以使用自己喜欢的编辑器。让我们继续设置 HTML 代码。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Screen Sharing</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="width:80%;background: grey;margin: auto;">
<video id="video" autoplay playsinline muted></video>
</div>
<div style="width:80%;margin: auto;padding-top:10px ;">
<button class="btn btn-primary" id="start"> Start Screen Sharing</button>
<button class="btn btn-secondary" id="stop"> Stop</button>
</div>
</body>
</html>启动实时服务器并在浏览器中打开 index.html 文件。应该可以看到如下所示的页面：
JavaScript：
接下来，我们需要将一些 JavaScript 代码添加到我们的 index.html 文件中。添加以下代码：
const videoElem = document.getElementById("video");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");
// Options for getDisplayMedia()
var displayMediaOptions = {
video: {
cursor: "always",
height: 1000,
width: 1200
},
audio: false
};
// Set event listeners for the start and stop buttons
startElem.addEventListener("click", function (evt) {
startCapture();
}, false);
// Stop the screen capture
stopElem.addEventListener("click", function (evt) {
stopCapture();
}, false);
// Start the screen capture
async function startCapture() {
try {
videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
dumpOptionsInfo();
} catch (err) {
// Handle error
console.error("Error: " + err);
}
}
// Stop the stream
function stopCapture(evt) {
let tracks = videoElem.srcObject.getTracks();
tracks.forEach(track => track.stop());
videoElem.srcObject = null;
}
// Dump the available media track capabilities to the console
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));
}测试应用程序
现在我们可以继续测试我们的应用程序。在浏览器中打开index.html 文件，然后单击开始按钮以初始化屏幕捕获。
点击屏幕后，将看到所点击屏幕的视频流。还可以点击停止按钮来停止屏幕截图。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Screen Sharing</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="width:80%;background: grey;margin: auto;">
<video id="video" autoplay playsinline muted></video>
</div>
<div style="width:80%;margin: auto;padding-top:10px ;">
<button class="btn btn-primary" id="start"> Start Screen Sharing</button>
<button class="btn btn-secondary" id="stop"> Stop</button>
</div>
<script type="text/javascript">
const videoElem = document.getElementById("video");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");
// Options for getDisplayMedia()
var displayMediaOptions = {
video: {
cursor: "always",
height: 1000,
width: 1200
},
audio: false
};
// Set event listeners for the start and stop buttons
startElem.addEventListener("click", function (evt) {
startCapture();
}, false);
stopElem.addEventListener("click", function (evt) {
stopCapture();
}, false);
async function startCapture() {
try {
videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
dumpOptionsInfo();
} catch (err) {
console.error("Error: " + err);
}
}
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));
}
</script>
</body>
</html>版权声明：本文内容转自互联网，本文观点仅代表作者本人。本站仅提供信息存储空间服务，所有权归原作者所有。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至1393616908@qq.com 举报，一经查实，本站将立刻删除。
