# MediaDevices

MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

顾名思义，MediaDevices允许您捕获屏幕内容，从而使构建录屏的过程变得 轻而易举。

您需要一个视频元素来显示捕获的屏幕。开始按钮将开始录屏。

<video id="preview" autoplay>
  Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>

const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");

async function startRecording() {
  previewElem.srcObject =
    await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
}


startBtn.addEventListener("click", startRecording);

参考文档及兼容性见MDN

Navigator.share

Navigator.share() 方法通过调用本机的共享机制作为 Web Share API 的一部分。如果不支持 Web Share API，则此方法为 undefined。

async function shareHandler() {
  navigator.share({
    title: "Tapajyoti Bose | Portfolio",
    text: "Check out my website",
    url: "https://tapajyoti-bose.vercel.app/",
  });
}

分享文件之前，先使用 navigator.canShare() 判断这个文件能否被分享。
参考文档及兼容性见MDN

Clipboard

Clipboard 接口实现了 Clipboard API，如果用户授予了相应的权限，其就能提供系统剪贴板的读写访问能力。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。

async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}

WakeLock

WakeLock 接口允许一个文件获取屏幕唤醒锁定。

有没有想过视频网站是如何防止锁屏的，就是用Screen Wake Lock API实现的。

let wakeLock = null;

async function lockHandler() {
  wakeLock = await navigator.wakeLock.request("screen");
}

async function releaseHandler() {
  await wakeLock.release();
  wakeLock = null;
}

仅当页面已在屏幕上可见时，您才能使用屏幕唤醒锁定 API 。 否则，它会抛出错误。

Screen

Screen 接口表示一个屏幕窗口，往往指的是当前正在被渲染的 window 对象，可以使用 window.screen 获取它。

请注意：由浏览器决定提供屏幕对象，此对象一般通过当前浏览器窗口活动状态动态检测来得到。

Screen可以获取屏幕的像素信息，改变屏幕方向、锁定屏幕等。

async function lockHandler() {
  await screen.orientation.lock("portrait");
}



function releaseHandler() {
  screen.orientation.unlock();
}



function getOrientation() {
  return screen.orientation.type;
}

全屏

Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

调用此 API 并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，返回的Promise会 resolve，并且该元素会收到一个fullscreenchange事件，通知它已经进入全屏模式。如果全屏请求被拒绝，返回的 promise 会变成 rejected 并且该元素会收到一个fullscreenerror事件。如果该元素已经从原来的文档中分离，那么该文档将会收到这些事件。

async function enterFullscreen() {
  await document.documentElement.requestFullscreen();
}



async function exitFullscreen() {
  await document.exitFullscreen();
}

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END