Web 应用程序可以在 iOS 11 上使用屏幕相机 API 访问设备上的摄像头。这为开发人员提供了一个强大的工具，以便他们可以创建更加丰富的 Web 应用程序。
屏幕相机API简介
屏幕相机 API 在 Safari for iOS 11 中引入，它通过 navigator.mediaDevices.getDisplayMedia() 方法提供对当前浏览器窗口和系统的捕获。该方法返回一个 MediaStream 对象，其中包含与用户的屏幕共享相关的音频和视频流。
屏幕相机 API 可以用于创建以下类型的 Web 应用程序：
- 视频会议系统
- 屏幕捕捉工具
- 教育网站
- 游戏
如何使用屏幕相机 API
在开始使用屏幕相机 API 之前，您需要检查用户设备是否支持该功能。
if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
// 屏幕相机 API 可用
} else {
// 屏幕相机 API 不可用
}如果屏幕相机 API 可用，那么您可以调用 getDisplayMedia 方法并处理返回的 MediaStream 对象。
navigator.mediaDevices.getDisplayMedia({ video: true })
.then(function(stream) {
// 处理视频流
})
.catch(function(error) {
console.error(error);
});上面的代码将启动一个屏幕共享流，并将其捕获到 stream 变量中。现在您可以使用这个流来显示视频或进行其他操作。
const video = document.createElement('video');
video.srcObject = stream;
video.play();示例代码
下面是一个完整的示例，它演示了如何使用屏幕相机 API 创建一个简单的屏幕共享应用程序。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------ -
------ -----
------- -----
------- --- ----- ------
-
--------
-------
------
------ -------------------
--------
----- ----- - ---------------------------------
-- ----------------------- -- --------------------------------------- -
---------------------------------------- ------ ---- --
---------------------- -
--------------- - -------
-------------
--
---------------------- -
---------------------
---
- ---- -
------------------- --- ------
-
---------
-------
-------结论
屏幕相机 API 为 Web 应用程序提供了更多的功能，使得开发人员能够创建更加丰富和有用的应用程序。在本文中，我们介绍了如何使用屏幕相机 API，并提供了一个简单的示例代码。如果您是一位前端开发人员，并且正在寻找一种新的方式来创造有趣和令人兴奋的 Web 应用程序，那么屏幕相机 API 可能是您需要的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12561