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画中画效果）
关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方 ...
随机推荐
- 解决CKEditor中img标签自动添加style样式的问题-禁止自动设置width和height 帝国cms编辑器图片自动加宽高
在使用CKEditor的过程中发现,每次上传或添加图片的时候,总会自动给img标签添加width和height的style内联样式.由于网站本身对图片有进行自适应处理(添加了自适应的CSS),所以im ...
- FBV和CBV的区别(源码分析)
FBV和CBV源码分析 FBV直接调用user方法执行业务代码 CBV相当于在FBV上面封装了一层 from django.contrib import admin from django.urls ...
- 微服务为什么要用到 API 网关？
本文介绍了 API 网关日志的价值,并以知名网关 Apache APISIX 为例,展示如何集成 API 网关日志. 作者程小兰,API7.ai 技术工程师,Apache APISIX Contrib ...
- 设计模式之[构建者模式(Builder)]-C#
说明:构建一个大对象时,可以分解成一个部分一个部分的构建,比如一台电脑由CUP.内存.主板.屏幕等,这些配件本身就是一个复杂的制造过程,一个一个构建后然后才组装成一台新的电脑. 步骤 1.定义要构建的 ...
- 2023云数据库技术沙龙MySQL x ClickHouse专场成功举办
4月22日,2023首届云数据库技术沙龙 MySQL x ClickHouse 专场,在杭州市海智中心成功举办.本次沙龙由玖章算术.菜根发展.良仓太炎共创联合主办.围绕"技术进化,让数据更智 ...
- qiankun vue子应用升级webpack5问题记录
升级的方式是使用最新版本的 vue-cli 脚手架,重新创建一个新项目,然后复制 @vue/cli-xxx , vue 相关依赖最新版本到子应用项目 -> 核对babel, eslint相关配置 ...
- RTSP Server(LIVE555)源码分析(一)-重要关系类
live项目包括四个基本的库,程序入口类(在mediaServer中),各种测试代码(测试代码在testProgs里面). 四个基本的库分别是: UsageEnvironment&TaskSc ...
- 笔记：C++学习之旅---泛型算法
标准库并未给每个容器定义成员函数来实现这些操作,而是定义了一组泛型算法(generic algorithm):称他们为"算法",是因为他们实现了一些经典算法的公共接口 ...
- 用go设计开发一个自己的轻量级登录库/框架吧(项目维护篇)
用go设计开发一个自己的轻量级登录库/框架吧(项目维护篇) 本篇将开始讲讲开发库/框架的最开始阶段,也就是搭建一个项目 源码:weloe/token-go: a light login library ...
- 2020-10-25：go中channel的close流程是什么？
福哥答案2020-10-25: