技术标签: webRTC
关注微信公众号(瓠悠笑软件部落),一起学习,一起摸鱼
本文是Google开源大会对WebRTC的讲解。自己看视频做的笔记。英文好的同学,建议直接看视频。原视频地址
如果访问不了,可以访问我的公众号。里面有视频:视频带文字版
喜欢的话,别忘了点击好看。谢谢你的支持。
aka getUserMedia
var constraints = {video: true};
function successCallback(stream) {
var video = document.querySelector("video");
video.src = window.URL.createObjectURL(stream);
}
function errorCallback(error) {
console.log("navigator.getUserMedia error:", error);
}
navigator.getUserMedia(constraints, successCallback, errorCallback);
video: {
mandatory: {
minWidth: 640,
minHeigh: 360
},
optional [{
minWidth: 1280,
minHeigth: 720
}]
}
// success callback when requesting audio input stream
function gotStream(stream) {
var audioContext = new webkitAudioContext();
// create an AudioNode from the stream
var mediaStreamSource = audioContext.createMediaStreamSource(stream);
// connect it to the destination or any other node for processing!
mediaStreamSource.connect(audioContext.destination);
}
确保打开了Chrome 浏览器里面 about:flags 里面的 Web Audio Input
var constraints = {
video: {
mandatory: {
chromeMediaSource: 'screen'
}
}
}
navigator.webkitGetUserMedia(constraints, gotStream);
audio 和 video 点到点之间的链接通信
pc = new RTCPeerConnection(null);
pc.onaddstream = gotRemoteStream;
pc.addStream(localStream);
pc.createOffer(gotOffer);
function gotOffer(desc) {
pc.setLocalDescription(desc);
sendOffer(desc);
}
function getAnswer(desc) {
pc.setRemoteDescription(desc);
}
function getRemoteStream(e) {
attachMediaStream(remoteVideo, e.stream);
}
端到端之间的任意数据的双向通信
var pc = new webkitRTCPeerConnection(servers, {optional: [{RtpDataChannels: true}]};
pc.ondatachannel = function(event) {
receiveChannel = event.channel;
receiveChannel.onmessage = function(event) {
document.querySelector("div#receive").innerHTML = event.data;
};
};
sendChannel = pc.createDataChannel("sendDataChannel", {reliable: false});
document.querySelector("button#send").onclick = function() {
var data = document.querySelector("textarea#send").value;
sendChannel.send(data);
};
Peer to Peer - 但是我们需要服务器.
P2P in the age of firewalls and NATs
端到端之间 session 完整的路径。
在很早以前,这不是问题。人们知道对方的公网IP地址就可以直接连接进行通信。
但后来有了NAT, NAT分发所谓的私有IP地址.而私有IP地址不能用于建立链接通信。我们就无法建立真正的端到端通信。除非我们有公共地址。所以引入了STUN技术。
现在,一方面,我们有STUN,它超级便宜,但面对复杂的网络环境,会不可用。我们有TURN。他通常都可用。但会占用服务器的带宽。这两种方案,如何选择最好的方案呢?
先尝试使用STUN Server 建立链接,如果不行,我们无法穿透NATs. s所以,我们回过头来,接着我们唯一能用的是TURN,把 media 数据从我们的发起 peer, 经过NAT, 再经过 TURN server 发送给另一端的 peer. 这些都是通过 ICE 技术实现的。
在WebRTC开始的时候,就考虑了安全问题
如果有多个call,比如一个多方会议,我应该如何构建我的应用程序?
Mesh 表示每一个peer 都会连接到另外所有的其他peer。
这样也很简单,因为他们之间的链接不涉及服务器服务器和其他东东,比如信令。但有缺点: 假设有N个Peer参与通信,每一个Peer要发送的数据,必须将数据复制N-1分,分别发送给其他N-1个Peer. 这将有对应的CPU和带宽消耗。所以这取决于你要发送的media类型。对于Audio,开销要大一些。对应Video,开销要小一些。拓扑图中参与通话的Peers数量因此会收到限制. 如果某一个Peer是手机设备。CPU和带宽吃紧。限制更明显。
为了解决这个问题,引入另外一种架构。
从所有peer里面找到一个性能最强的。由它从当会话的中心角色。我们称之为 the focus for the call. foucs 实际负责接收数据,复制并转发给所有其他Peers 或者 endpoints. 但是我们要处理多方的高清视频流(HD video streams). focus 的任务就有点吃不消了。所以对于大型的多方会话,需要使用MCU。
MCU 是一个为传递大量音频和视频而定制的服务器。它可以做各种事情. 它可以选择 stream 并转发. 它实际上可以混合音频或视频数据。它还能录制。如果一个Peer 掉线了,MCU不会中断整个会议,因为MCU要负责所有的Peer的会话,而不单单是某一个Peer。
chrome://webrtc-internals
在这里可以看到webRTC API 调用的日志,你可以debug.
让你在所有版本的浏览器里面使用同样的代码
很方便的 peer-to-peer 视频和语音
var webrtc = new WebRTC ({
localVideoEl: 'localVideo',
remoteVideosEl: 'remoteVideos',
autoRequestMedia: true
});
webrtc.on('readyToCall', function (){
webrtc.joinRoom('My room name');
});
方便的 peer-to-peer data
var peer = new Peer('someid', {key: 'apikey'});
peer.on('connection', function(conn) {
conn.on('data', function(data) {
// will print 'hi!'
console.log(data);
});
});
// connecting peer
var peer = new Peer('anotherid', {key: 'apikey'});
var conn = peer.connect('someid');
conn.on('open', function() {
conn.send('hi!');
});
javascript 并不用关心产品方面的服务特性,比如 信令,STUN 和 TURN 服务。幸运的是,OpenTok 和 vLine 为我们提供了这些服务。你只需要注册这些服务,获取API key, 就可以使用他们的产品功能发起 call. 触达世界的每个角落。他们还制作了可以轻松放入WebRTC应用程序的UI小部件.所以你能快速的开发和运行 WebRTC app.
最新版chrome 已经支持 HD video quality 和 full-band audio quality.
文章浏览阅读52次。CSS代码示例-背景附着属性(background-attachment)-[背景图固定不动,不跟随滚动条滚动]:<html><head><title>背景附着属性 background-attachment</title><style type="text/css">body {background-image:url(../image..._背景附着方式的属性值
文章浏览阅读863次,点赞24次,收藏18次。Python字面量
文章浏览阅读1k次。(最近在自己学习《算法导论》一本书,之前本来喜欢手写笔记,但是随即发现自己总是把笔记弄丢,所以打算做一个电子版的笔记)(另外书中用的都是伪代码,笔记中如果需要尝试的地方都是python代码)2.1 插入排序 基本思想:将待排序的数列看成两个部分(以从小到大为例),前一半是排序完成的,后一半是乱序的,对于乱序的第一个,开始和前一半里最大的数字、第二大的数字……依次比较,等到合适的位置就将它放进去。然后比对过的数字向后移动一位,相应的排序完成的长度加一,没有排序的减一。如:5 |..._61,55,97,30,38,58两轮选择递增排序法
文章浏览阅读674次,点赞21次,收藏21次。可以看出,笔者的工作学习模式便是由以下。
文章浏览阅读1.1k次。实现树形表格_vue树形表格组件
文章浏览阅读237次。Linux平台下很实用的44个Linux命令大家好,今天再继续和大家说下基础的命令,实在是不知道基础的东西还有什么是应该和大家讲的了,要是再开基础的东西,我觉得就得和大家说交换机和路由器什么的了。今天和大家说一下linux运维其实一般来说,能精通100+的命令,就是一个合格的运维人员了,意思就是你的基础已经差不多了。但是在实际运维工作中需要经常运用到的一些命令,今天就和大家简单的说一下,因
文章浏览阅读1.2w次,点赞16次,收藏149次。2023年华为OD真题目前华为社招大多数是OD招聘,17级以下都为OD模式,OD模式也是华为提出的一种新的用工形式,定级是13-17级,属于华为储备人才,每年都会从OD项目挑优秀员工转为正编。D1-D5对应薪资10K-35K左右,年终奖2-4个月,周六加班双倍工资,下个月发。入职OD会有一定薪资上涨,之后每年一次加薪,OD转华为一次加薪。等不到转正机会,相对于内部员工来说,容易被裁,不稳定,可能接触不到核心项目,功能。具体转条件:连续N个季度绩效为A,部门有转正名额,排队。_华为od机试题
文章浏览阅读2.7k次,点赞3次,收藏10次。在我们使用python+selenium来驱动chrome浏览器时,需要有chromedriver的支持,但是chrome浏览器更新比较频繁,而chrome浏览器和chromedriver则需要保持版本一致(版本一般相差1以内),此时我们就需要手动下载chromedriver来匹配此时的浏览器,但是生产环境操作比较麻烦。此时,我们就想是不是有一个程序来代替我们完成这个工作呢?思路比较当前的chrome浏览器版本号与chromedriver浏览号如果不匹配,则下载一个新的chromedriver替换掉_chrome版本122.0.6261.112和chromdriver 107.0.5304.62兼容吗
文章浏览阅读2.7k次,点赞2次,收藏11次。负责开发项目的技术方法。我的一位同事曾经很认真地问过我一个问题,他说他现在从事软件测试工作已经4年了,但是他不知道现在的工作和自己在工作3年时有什么不同,他想旁观者清,也许我能回答他的问题。随着互联网的飞快发展,IT行业出现了日新月异的变化,新的技术会不断出现,你熟练掌握的软件测试技术很快就过时了。至于第三点说的实践和思考就是你对自己学到的东西的一个掌握的程度的检验了,只有实践了你才能知道,这个知识点你到底学会了没有,会了之后有没有什么其他的理解,这个就是需要自己去思考了 ,这种东西都是别人教不了你的!_测开个人成长计划
文章浏览阅读734次,点赞21次,收藏13次。主要内容:代码主要做的是考虑多微网电能互补共享的微网双层优化模型,同时优化配电网运营商的动态电价以及微网用户的能量管理策略,在上层,目标函数为配电网运营商的收益最大化,决策变量为配电网运营商的交易电价;主要内容:代码主要做的是考虑多微网电能互补共享的微网双层优化模型,同时优化配电网运营商的动态电价以及微网用户的能量管理策略,在上层,目标函数为配电网运营商的收益最大化,决策变量为配电网运营商的交易电价;最后,我们输出最终的结果,包括最优的用电费用、配网运营商的收益以及每个微网的用电费用分配情况。_配电网和微电网的matlab模型
文章浏览阅读378次,点赞3次,收藏3次。首先介绍了逆变电路的基本原理和应用领域,然后详细分析了双极性SPWM调制方式的工作原理和优势。本文通过对三相电压型桥式逆变电路和双极性SPWM调制方式的技术分析,深入探讨了其在电力系统中的应用和性能评估。双极性SPWM调制方式是SPWM调制方式的一种改进形式,它能够更好地抑制谐波,提高逆变电路的输出质量。面对电力系统的不断发展和需求的变化,逆变电路和SPWM调制方式也在不断演进。为了评估三相电压型桥式逆变电路和双极性SPWM调制方式的性能,本节将详细分析其输出波形的失真程度、功率损耗和效率等关键指标。
文章浏览阅读4.5k次。第一步、下载源代码 http://sourceforge.net/projects/clucene/ 第二步、下载cmakehttp://www.cmake.org/cmake/resources/software.html 编译第一步,打开在应用程序中的cmake GUI程序,设置好源代码路径,和输出路径,如图: 第二步,点击Configure,在_clucene-config.h