效果图

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. 去掉Bom头的方法和为什么要清除Bom头

    什么是bom头? 在utf-8编码文件中BOM在文件头部,占用三个字节,用来标示该文件属于utf-8编码,现在已经有很多软件识别bom头,但是还有些不能识别bom头,比如PHP就不能识别bom头,这也 ...

  2. 帝国cms7.5和7.2 搜素模板支持 php和灵动标签以及不起作用

    帝国CMS搜索模板不支持动态标签调用,从7.0到7.2再到刚发布的7.5,帝国官方团队始终没解决这个问题,这很不方便,但是帝国的强大可以让我们忽略这个问题,今天老威就把这个bug的解决方法说一下. 第 ...

  3. Docker Go语言程序的编译与打包

    使用Docker打包Go程序的镜像 Golang镜像 首先使用docker pull获取golang镜像 $ sudo docker pull golang:1.18.3 查看镜像: $ sudo d ...

  4. Go语言基础: goroutine和通道

    并发编程表现为程序由若干个自主的活动单元组成. goroutine 在Go语言里,每一个并发执行的活动称为goroutine.当一个程序启动时,只有一个goroutine来调用main函数,称之为主g ...

  5. vue侦听器(引入vue.js写法)

    首先在html中引入vue.js,具体怎么下载可以参考https://blog.csdn.net/lvoelife/article/details/129254906,下载后在html中引入: 侦听d ...

  6. 【LeetCode动态规划#07】01背包问题一维写法（状态压缩）实战，其二（目标和、零一和）

    目标和(放满背包的方法有几种) 力扣题目链接(opens new window) 难度:中等 给定一个非负整数数组,a1, a2, ..., an, 和一个目标数,S.现在你有两个符号 + 和 -.对 ...

  7. 第138篇:了解HTTP协议(TCP/IP协议，DNS域名解析，浏览器缓存)

    好家伙,发现自己的网络知识十分匮乏,赶紧补一下   这里先举个我生活中的例子 欸,作业不会写了,上网搜一下 用edge浏览器上bing必应搜一下(百度广告太多了,真不想用百度举例子)   假设这是我们 ...

  8. 用Aspose-Java免费实现 PDF、Word、Excel、Word互相转换并将转换过得文件上传OSS，返回转换后的文件路径

    嘿嘿嘿.嘿嘿,俺又回来了! github代码地址 https://github.com/Tom-shushu/work-study 接口文档有道云 https://note.youdao.com/s/ ...

  9. 如何实现一个sync.Once

    sync.Once 是 golang里用来实现单例的同步原语.Once 常常用来初始化单例资源, 或者并发访问只需初始化一次的共享资源,或者在测试的时候初始化一次测试资源. 单例,就是某个资源或者对象 ...

  10. 【Python基础】字典的基本使用

    字典是由一系列键值对组成的无序集合.每个键值对包含一个键和一个对应的值.键必须是不可变的,如字符串.数字或元组.值可以是任意类型的对象.字典可以使用花括号({})或者内置函数dict()来创建. di ...