效果图

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. Springboot集成MongoDB存储文件、读取文件

    一.前言和开发环境及配置 可以转载,但请注明出处. 之前自己写的SpringBoot整合MongoDB的聚合查询操作,感兴趣的可以点击查阅. https://www.cnblogs.com/zaoyu ...

  2. 如何在 vue3 中使用 jsx/tsx?

    我们都知道,通常情况下我们使用 vue 大多都是用的 SFC(Signle File Component)单文件组件模式,即一个组件就是一个文件,但其实 Vue 也是支持使用 JSX 来编写组件的.这 ...

  3. Java关键字以及标识符

    Java中有许多关键字,关键字是什么意思呢? 我用自己的分析来表达一下吧. Java就是源自于生活的,我们都有自己的名字.所以它也会有许多的名字,每个名字都有各自不同的特性(作用),都是系统定义好的. ...

  4. 组织树查询-Jvava实现（递归）

    1.首先查询出组织机构 就是一个简单的查询 List<Dept> deptList = mapper.getDeptList(); Map<Long, OrgNode> nod ...

  5. Django笔记二十六之数据库函数之数学公式函数

    本文首发于公众号:Hunter后端 原文链接:Django笔记二十六之数据库函数之数学公式函数 这一篇来介绍一下公式函数,主要是数学公式. 其中 sin,cos 这种大多数情况下用不上的就不介绍了,主 ...

  6. 注解：@RequiredArgsConstructor、 @Validated、 @Valid、 @Lazy

    1. lombok注解:@RequiredArgsConstructor Spring 依赖注入方式 1.通过 @Autowire.@Resource 等注解注入, 2.通过构造器的方式进行依赖注入. ...

  7. [OpenCV-Python] 6 OpenCV 中的绘图函数

    文章目录 OpenCV-Python: II OpenCV 中的 Gui 特性 6 OpenCV 中的绘图函数 6.1 画线 6.2 画矩形 6.3 画圆 6.4 画椭圆 6.5 画多边形 6.6 在 ...

  8. 【Qt6】嵌套 QWindow

    在上个世纪的文章中,老周简单介绍了 QWindow 类的基本使用--包括从 QWindow 类派生和从 QRasterWindow 类派生. 其实,QWindow 类并不是只能充当主窗口用,它也可以嵌 ...

  9. python Unitest和pytest 介绍和安装

    前言 目前有两种纯测试的测试框架,pytest和unittest,这系列文章主要介绍pytest为主 UnitTest测试框架理论 python 自带的单元测试框架,常用在单元测试 在自动化测试中提供 ...

  10. 解决v-html渲染HTML标签展示信息有误问题

    后端返回的数据内容为: // html反转义 HTMLDecode(text) { var reg = /<[^>]+>/g; if (reg.test(text)) { retur ...