有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

前端屏幕分享怎么弄(WebRTC 实现屏幕共享)实现方式

javascript 炮渣日记 7天前 14次浏览 已收录 0个评论 扫描二维码

前言

屏幕共享在工作中是非常实用的功能,比如开会时分享ppt,数据图表等,老师也可以分享自己的屏幕,实现线上教学,那么屏幕共享是如何实现的呢,今天就跟随笔者一起研究一下吧!

获取button元素

“`javascript

const startButton = document.getElementById(‘startButton’);

“`

检测浏览器是否支持

  • mediaDevices 是 Navigator 只读属性,返回一个 MediaDevices 对象,该对象可提供对相机和麦克风等媒体输入设备的连接访问,也包括屏幕共享。

“`javascript

if ((navigator.mediaDevices && ‘getDisplayMedia’ in navigator.mediaDevices)) {

startButton.disabled = false;

} else {

errorMsg(‘不支持getDisplayMedia’);

}

“`

实现屏幕共享

  • getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容(如一个窗口)在一个 MediaStream 里. 然后,这个媒体流可以通过使用 MediaStream Recording 被记录或者作为 WebRTC 会话的一部分被传输。

[参数] constraints 可选

  • 一个可选的MediaStreamConstraints对象,它指定了返回的MediaStream的要求。 因为getDisplayMedia()需要视频轨道,所以即使constraints对象没有明确请求视频轨道,返回的流也会有一个。

[返回值]

  • 一个被解析为 MediaStream 的 Promise,其中包含一个视频轨道。视频轨道的内容来自用户选择的屏幕区域以及一个可选的音频轨道。

“`javascript

startButton.addEventListener(‘click’, () => {

navigator.mediaDevices.getDisplayMedia({video: true})

.then(handleSuccess, handleError);

});

function handleSuccess(stream) {

startButton.disabled = true;

const video = document.querySelector(‘video’);

video.srcObject = stream;

// 检测用户已停止共享屏幕

// 通过浏览器UI共享屏幕。

stream.getVideoTracks()[0].addEventListener(‘ended’, () => {

errorMsg(‘用户已结束共享屏幕’);

startButton.disabled = false;

});

}

function handleError(error) {

errorMsg(`getDisplayMedia error: ${error.name}`, error);

}

function errorMsg(msg, error) {

const errorElement = document.querySelector(‘#errorMsg’);

errorElement.innerHTML += `<p>${msg}</p>`;

if (typeof error !== ‘undefined’) {

console.error(error);

}

}

“`

HTML

  • HTML 部分结构比较简单,只需要一个 video 标签和一个 button 按钮
  • 引入index.js 和 index.css

“`javascript

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>getDisplayMedia</title>

<link rel=”stylesheet” href=”./index.css”>

</head>

<body>

<div>

<video id=”gum-local” autoplay playsinline muted></video>

<button id=”startButton” disabled>Start</button>

<div id=”errorMsg”></div>

</div>

<script src=”./index.js”></script>

</body>

</html>

“`

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址