Web网页音视频通话之Webrtc相关操作（二）
效果图
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相关操作（二）的更多相关文章
- RabbitMQ原理与相关操作(二)
接着 上篇随笔 增加几个概念: RabbitMQ是一个在AMQP(高级消息队列协议)标准基础上完整的,可服用的企业消息系统. AMQP模型的功能组件图(上图摘自 Sophia_tj 的 第2章 AMQ ...
- Git相关操作二
1.查看HEAD提交: git show HEAD 在git中,目前提交被称为HEAD提交,输入上述命令可以查看当前提交所有文件的修改内容. 2.撤销更改: git checkout HEAD fil ...
- iOS下WebRTC音视频通话（一）
在iOS下做IM功能时,难免都会涉及到音频通话和视频通话.QQ中的QQ电话和视频通话效果就非常好,但是如果你没有非常深厚的技术,也没有那么大的团队,很难做到QQ那么快速和稳定的通话效果. 但是利用We ...
- iOS下WebRTC音视频通话（三）-音视频通话
前两篇文章记录了音视频通话的一些概念和一些流程,以及一个局域网内音视频通话的示例. 今天以一个伪真实网络间的音视频通话示例,来分析WebRTC音视频通话的过程. 上一篇因为是在相同路由内,所以不需要穿 ...
- iOS下WebRTC音视频通话（二）-局域网内音视频通话
这里是iOS 下WebRTC音视频通话开发的第二篇,在这一篇会利用一个局域网内音视频通话的例子介绍WebRTC中常用的API. 如果你下载并编译完成之后,会看到一个iOS 版的WebRTC Demo. ...
- 鹅厂优文|打通小程序音视频和webRTC
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯视频云终端技术总监常青, 2008 年毕业加入腾讯,一直从事客户端研发相关工作,先后参与过 PC QQ.手机QQ.QQ物联 等产品 ...
- 腾讯技术分享：微信小程序音视频与WebRTC互通的技术思路和实践
1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...
- WebRTC相关的基础知识点
这里主要用来记录自己整理的和webRTC相关的一些基本的知识点,后续整理的一些基础和零碎的知识点都会更新在这里.内容大部分来自于webRTC官网.w3c以及一些前辈们的博客中的文章和相关书籍等. 20 ...
- JS实现Web网页打印功能（IE）
问题描述: JS实现Web网页打印功能 问题解决: 这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍: WebBrows ...
- Android音视频通话过程中最小化成悬浮框的实现（类似Android8.0画中画效果）
关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方 ...
随机推荐
- 浅谈对属性描述符__get__、__set__、__delete__的理解
1.属性描述符的基础介绍 1.1 何为属性描述符? 属性描述符是一种Python语言中的特殊对象,用于定义和控制类属性的行为.属性描述符可以通过定义__get__.__set__.__delete__ ...
- CSS页面布局方式
css页面布局方式 1.标准流 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- python运维工程师-cmdb项目-day2
1.捕获异常信息 import tracebackdef disk(): int('saaa')def run(): try: disk() except Exception: ret=traceba ...
- 2023-03-29：如何高效计算三条线路选择方案？小A的旅行线路规划问题
2023-03-29:第一行有一个正整数n(3<=n<=100000),代表小A拟定的路线数量 第二行有n个正整数,第i个代表第i条路线的起始日期 第三行有n个正整数,第i个代表第i条路线 ...
- 2022-07-12：以下go语言代码输出什么？A：1 1；B：1.0 1.0；C：编译不通过；D：1.0 1。 package main import “fmt“ func main() {
2022-07-12:以下go语言代码输出什么?A:1 1:B:1.0 1.0:C:编译不通过:D:1.0 1. package main import "fmt" func ma ...
- 2022-03-14：一开始屏幕上什么也没有，粘贴板里什么也没有， 你只能在键盘上做如下4种操作中的1种： 输入：在屏幕上已经显示内容的后面加一个A， 全选：把屏幕上已经显示的全部内容选中， 复制：被
2022-03-14:一开始屏幕上什么也没有,粘贴板里什么也没有, 你只能在键盘上做如下4种操作中的1种: 输入:在屏幕上已经显示内容的后面加一个A, 全选:把屏幕上已经显示的全部内容选中, 复制:被 ...
- Django4全栈进阶之路3 apps.py 文件
在 Django 4 中,每个应用(app)都需要定义一个 apps.py 文件,用于配置应用的基本信息,如应用的名称.显示名称.图标.默认路径.启动时需要执行的操作等.apps.py 文件是一个 P ...
- 计蒜客蓝桥杯省赛模拟G
题目 一天蒜头君得到 n 个字符串 si,每个字符串的长度都不超过 1010. 蒜头君在想,在这 n 个字符串中,以 si 为后缀的字符串有多少个呢? 输入格式 第一行输入一个整数 n. 接下来 n ...
- AcWing900.整数划分（python）
题目详情 知识点 计数类DP 分析题目,k个数是默认排好序的,也就是说,对于划分我们的考虑是无序的:例如 4 = 1+1+2 4 = 1+2+1 4 = 2+1+1 以上三种方式是没有区别的,所以在求 ...
- 代码随想录算法训练营Day53 动态规划
代码随想录算法训练营 代码随想录算法训练营Day53 动态规划|● 1143.最长公共子序列 1035.不相交的线 53. 最大子序和 动态规划 1143.最长公共子序列 题目链接:1143.最长公 ...