web 技术分享| WebRTC 实现屏幕共享

关注

发布于: 16 小时前

前言

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

获取 button 元素

const startButton = document.getElementById('startButton');

复制代码

检测浏览器是否支持

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

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，其中包含一个视频轨道。视频轨道的内容来自用户选择的屏幕区域以及一个可选的音频轨道。

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

<!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>

复制代码

效果截图

发布于: 16 小时前阅读数: 8

原文链接:【http://xie.infoq.cn/article/8f16fde4e43302dc47b6fe6db】。文章转载请联系作者。

anyRTC开发者

关注

实时交互，万物互联! 2020.08.10 加入

实时交互，万物互联，全球实时互动云服务商领跑者！

发布

暂无评论

创作场景

web 技术分享| WebRTC 实现屏幕共享

前言

获取 button 元素

检测浏览器是否支持

实现屏幕共享

[参数] `constraints` 可选

[返回值]

HTML

效果截图

anyRTC开发者

评论

创作场景

web 技术分享| WebRTC 实现屏幕共享

前言

获取 button 元素

检测浏览器是否支持

实现屏幕共享

[参数] constraints 可选

[返回值]

HTML

效果截图

anyRTC开发者

评论

[参数] `constraints` 可选