效果图

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>屏幕共享</title>

</head>

<body>

<div id="container">

    <video id="video-local" autoplay playsinline></video>

    <button id="showVideo" onclick="startShard()">开始共享屏幕</button>

</div>

</body>

</html>

javaScript

   let videoEle = document.querySelector('video');

    /**

     * 开启屏幕共享

     * @returns {boolean}

     */

    function startShard() {

        if (window.stream != null) {

            alert('你已开启屏幕共享，请勿重复打开哦');

            return false;

        }

        const constraints = {

            audio: true,

            video: true

        };

        try {

            navigator.mediaDevices.getDisplayMedia(constraints).then(gotStream);

        } catch (err) {

            console.error(err)

        }

    }

    /**

     * 获取到流数据

     * @param stream

     */

    function gotStream(stream) {

        window.stream = stream;

        videoEle.srcObject = stream;

        //监听手动点击“停止分享”

        stream.getVideoTracks()[0].onended = () => {

            // 获取流中的所有轨道

            const tracks = stream.getTracks();

            tracks.forEach(function (track) {

                track.stop();

            });

            //监听以后的处理逻辑……

            alert('屏幕共享已关闭')

            videoEle.srcObject = null;

            window.stream = null;

        }

    }

Web网页音视频通话之Webrtc相关操作（二）的更多相关文章

  1. RabbitMQ原理与相关操作(二)

    接着 上篇随笔 增加几个概念: RabbitMQ是一个在AMQP(高级消息队列协议)标准基础上完整的,可服用的企业消息系统. AMQP模型的功能组件图(上图摘自 Sophia_tj 的 第2章 AMQ ...

  2. Git相关操作二

    1.查看HEAD提交: git show HEAD 在git中,目前提交被称为HEAD提交,输入上述命令可以查看当前提交所有文件的修改内容. 2.撤销更改: git checkout HEAD fil ...

  3. iOS下WebRTC音视频通话（一）

    在iOS下做IM功能时,难免都会涉及到音频通话和视频通话.QQ中的QQ电话和视频通话效果就非常好,但是如果你没有非常深厚的技术,也没有那么大的团队,很难做到QQ那么快速和稳定的通话效果. 但是利用We ...

  4. iOS下WebRTC音视频通话（三）-音视频通话

    前两篇文章记录了音视频通话的一些概念和一些流程,以及一个局域网内音视频通话的示例. 今天以一个伪真实网络间的音视频通话示例,来分析WebRTC音视频通话的过程. 上一篇因为是在相同路由内,所以不需要穿 ...

  5. iOS下WebRTC音视频通话（二）-局域网内音视频通话

    这里是iOS 下WebRTC音视频通话开发的第二篇,在这一篇会利用一个局域网内音视频通话的例子介绍WebRTC中常用的API. 如果你下载并编译完成之后,会看到一个iOS 版的WebRTC Demo. ...

  6. 鹅厂优文|打通小程序音视频和webRTC

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯视频云终端技术总监常青, 2008 年毕业加入腾讯,一直从事客户端研发相关工作,先后参与过 PC QQ.手机QQ.QQ物联 等产品 ...

  7. 腾讯技术分享：微信小程序音视频与WebRTC互通的技术思路和实践

    1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...

  8. WebRTC相关的基础知识点

    这里主要用来记录自己整理的和webRTC相关的一些基本的知识点,后续整理的一些基础和零碎的知识点都会更新在这里.内容大部分来自于webRTC官网.w3c以及一些前辈们的博客中的文章和相关书籍等. 20 ...

  9. JS实现Web网页打印功能（IE）

    问题描述:     JS实现Web网页打印功能 问题解决:     这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍:         WebBrows ...

  10. Android音视频通话过程中最小化成悬浮框的实现（类似Android8.0画中画效果）

    关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方 ...

随机推荐

  1. 一分钟使用Gitee，把本地项目放入gitee仓库中

    一.先创建一个Gitee账号 首先需要自己去别的地方看创建一个空仓库,然后复制仓库的地址 省略... 现有本地有项目代码,远程空仓库一个,如何把本地项目代码推到远程仓库? 1.在项目根目录初始化 Gi ...

  2. 天梯赛L1-027 出租

    一.问题描述 下面是新浪微博上曾经很火的一张图: 一时间网上一片求救声,急问这个怎么破.其实这段代码很简单,index数组就是arr数组的下标,index[0]=2 对应 arr[2]=1,index ...

  3. Qt 加载 libjpeg 库出现“长跳转已经运行”错误

    继上篇 Qt5.15.0 升级至 Qt5.15.9 遇到的一些错误 篇幅有点长,先说解决方法,在编译静态库时加上 -qt-libjpeg,编译出 libjpeg 库后,在项目中使用 #pragma c ...

  4. R的基本用法

    R变量的命名格式 必须以字母开头 只能包含字母.数字.下划线和.. 对大小写敏感 不能是保留关键字 数据类型(mode) numeric - (10.5, 55, 787) integer - (1L ...

  5. HDCTF_2023

    pwnner 附件 有后门函数,seed是一个固定值, //伪随机数 #include <stdio.h> #include <stdlib.h> int main() { i ...

  6. 【Azure Developer】Azure AD 注册应用的 OAuth 2.0 v2 终结点获取的 Token 解析出来依旧为v1.0， 这是什么情况！

    问题描述 使用 Azure AD 注册应用 Oauth2 v2.0的终结点(OAuth 2.0 token endpoint (v2):https://login.partner.microsofto ...

  7. 2023-01-07：hyper/docker-registry-web是registry的web界面工具之一。请问部署在k3s中，yaml如何写？

    2023-01-07:hyper/docker-registry-web是registry的web界面工具之一.请问部署在k3s中,yaml如何写? 答案2023-01-07: yaml如下: api ...

  8. ET框架6.0分析二、异步编程

    概述 ET框架很多地方都用到了异步,例如资源加载.AI.Actor模型等等.ET框架对C#的异步操作进行了一定程度的封装和改造,有一些特点: 显式的或者说强调了使用C#异步实现协程机制(其实C#的异步 ...

  9. SpringBoot 使用 Sa-Token 完成注解鉴权功能

    注解鉴权 -- 优雅的将鉴权与业务代码分离.本篇我们将介绍在 Sa-Token 中如何通过注解完成权限校验. Sa-Token 是一个轻量级 java 权限认证框架,主要解决登录认证.权限认证.单点登 ...

  10. 安装vue cli3以及配置环境 镜像下载

    安装vue cli3以及配置环境 镜像下载 1.下载安装Node.js 安装vue cli3之前需要先安装Node.js,方便对vue进行下载 node.js的下载与安装方法在隔壁哟 地址:https ...