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画中画效果）
关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方 ...
随机推荐
- Springboot集成MyBatis进行开发
引入相关的依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</artifact ...
- yiiADU
<span style="font-size:14px;">一. //1.该方法是根据一个条件查询一个集合 $admin=Admin::model()->find ...
- 【Zookeeper】（一）概述与内部原理
Zookeeper概述 1 概述 Zookeeper是一个开源的.分布式的,为分布式应用提供协调服务的Apache项目. Zookeeper从设计模式的角度来看,是一个基于观察者模式设计的分布式服务管 ...
- 绝对强大的三大linux指令:ar, nm, objdump
前言 如果普通编程不需要了解这些东西,如果想精确控制你的对象文件的格式或者你想查看一下文件对象里的内容以便作出某种判断,刚你可以看一下下面的工具:objdump, nm, ar.当然,本文不可能非常详 ...
- MySQL概述与安装
MySQL数据库 概要: 一.MySQL数据库的概述 二.MySQL数据库的搭建 三.MySQL数据库软件的使用 四.MySQL数据类型 五.MySQL数据库数据的操作 一.初始MySQL数据库 1. ...
- windows11 下使用 阿里云 modelscope docker 环境 运行参考
昨天看视频 我们做了个能对话的AI派蒙,免费给大家玩! 发现阿里有一个语音转文字的模型(paraformer),之前处理这种需求一直都是直接调用服务商提交好的API接口 突然想尝试一下本地搭建,虽然和 ...
- Vue3项目的打包运行
一.项目打包(vite创建的项目) 执行以下这条命令对项目进行打包 npm run build 生成dist文件夹,进入dist文件夹下的index.html文件,然后右键选择Open with Li ...
- 2023-03-27：avio_list_dir.c 是 FFmpeg 库自带的一个示例程序，它提供了列出目录中所有文件和子目录的功能，请用go语言改写。
2023-03-27:avio_list_dir.c 是 FFmpeg 库自带的一个示例程序,它提供了列出目录中所有文件和子目录的功能,请用go语言改写. 答案2023-03-27: 这段代码实现了通 ...
- Django-Virtualenv虚拟环境安装、新建，激活和手动指定Python解释器、虚拟环境安装Django、创建Django项目、运行Django项目
一.安装虚拟环境: 命令:pip3 install virtualenv 二.安装管理工具: 命令:pip3 install virtualenvwrapper 三.新建: 命令:python -m ...
- 解决：Invalid HTTP_HOST header: '192.168.56.1:8001'. You may need to add '192.168.56.1' to ALLOWED_HOSTS.
在setting.py下的ALLOWED_HOSTS=['*']添加'*'就可以解决显示不出来的问题.