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画中画效果）
关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方 ...
随机推荐
- Spring中Bean的实例化详细流程
还是举个例子,我有一个朋友小汪他远赴南方某城市打工.然后安定下来后他的朋友很想来家里玩,但是呢我这个朋友家里搞的很乱,所以他不好意思请朋友来家里玩.这时我的另一个朋友说那请一个保姆把家里好好整理一下就 ...
- MySQL（十）表空间结构：区、段与碎片区
表空间结构:区.段与碎片区 为什么要有区? B+树中的每一层的页都会形成一个双向链表,双向链表之间的物理位置可能会离得非常远,当遇到范围查询的适用场景的时候,就会定位到最左边和最右边的记录,然后沿 ...
- 如何获取苹果设备的UDID（iPhone/iPad UDID查询方法）
方法一.通过电脑连接苹果手机后查询 1.在电脑上下载并安装爱思助手,安装完成后将电脑和苹果手机使用苹果数据线连接起来: 编辑切换为居中 添加图片注释,不超过 140 字(可选) 然后启动爱思助 ...
- vue路由的两种方式（路由传参）
query和params区别 query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在 params类似 po ...
- Mastering Regular Expressions(精通正则表达式) 阅读笔记：第一章，概念
Real Scenario(现实场景) Here's the scenario: you're given the job of checking the pages on a web server ...
- LeetCode 周赛 344（2023/05/07）手写递归函数的固定套路
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,我是小彭. 今天下午有力扣杯战队赛,不知道官方是不是故意调低早上周赛难度给选手们练练手. 往期周赛回 ...
- 【HTML-CSS】div中加入icon后input标签占用不满问题
做登录表单时遇到了一个宽度控制不好的问题,放入图标后,input框总是无法正确的填满剩余空间(尺寸过大/过小) 原因是input元素和父元素div宽度都写死的问题 把父元素的高度删除,宽度改成max- ...
- 我自己写了一个波场（Tron）本地网页版钱包
最近由于项目需要,需要给每个用户分配一个充币地址,考虑到钱包安全性和方便管理,于是自己动手写了一个本地网页版的钱包,附上源代码跟大家交流下. Github 源代码地址 钱包和项目是分离的,项目通过鉴权 ...
- 2022-10-16：以下go语言代码输出什么？A：timed out；B：panic；C：没有任何输出。 package main import ( “context“ “fmt“
2022-10-16:以下go语言代码输出什么?A:timed out:B:panic:C:没有任何输出. package main import ( "context" &quo ...
- action装饰器
视图集中附加action的声明 from rest_framework.decorators import action # 追加action:返回书记的倒叙地0个书籍的信息 @action(meth ...