简单的WebRTC例子
webrtc网上封装的很多，demo很多都是一个页面里实现的，今天实现了个完整的 ， A 发视频给 B。
A offer.html作为offer
<!DOCTYPE html>
<html id="home" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style> p { padding: 1em; } li {
border-bottom: 1px solid rgb(, , );
border-left: 1px solid rgb(, , );
padding: .5em;
} </style>
</head> <body> <script>
var mediaConstraints = {
optional: [],
mandatory: {
OfferToReceiveAudio: false,
OfferToReceiveVideo: true
}
};
</script>
<script>
var offerer
,answererWin window.RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
window.RTCSessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
window.RTCIceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate; navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
window.URL = window.webkitURL || window.URL; window.iceServers = {
iceServers: [{
url: 'stun:23.21.150.121'
}
]
};
</script>
<script>
/* offerer */
function offererPeer(video_stream) {
offerer = new RTCPeerConnection(window.iceServers)
offerer.addStream(video_stream) offerer.onaddstream = function (event) {
// 本地显示video
} offerer.onicecandidate = function (event) {
if (!event || !event.candidate) return sendToP2({
'action' : 'candidate',
'candidate' :event.candidate
}) } offerer.createOffer(function (offer) {
offerer.setLocalDescription(offer)
sendToP2({
'action' : 'create',
'offer':offer
}) }, function() {}, mediaConstraints)
}
</script>
<script>
var video_constraints = {
mandatory: {},
optional: []
} function getUserMedia(callback) {
var n = navigator
n.getMedia = n.webkitGetUserMedia || n.mozGetUserMedia
n.getMedia({
audio: false,
video: video_constraints
}, callback, onerror) function onerror(e) {
alert(JSON.stringify(e, null, '\t'))
}
}
</script>
<script>
function sendToP2(data){
answererWin.postMessage(JSON.stringify(data) ,window.location) }
function receiveMessage(data){
data = JSON.parse(data.data)
switch ( data.action) {
case 'answer' :
offerer.setRemoteDescription(new RTCSessionDescription(data.answer))
break
case "candidate":
offerer.addIceCandidate(new RTCIceCandidate(data.candidate))
break }
console.log('msg' ,data)
} window.addEventListener("message", receiveMessage, false)
answererWin = window.open('answer.html' ,'t')
getUserMedia(function (video_stream) {
offererPeer(video_stream)
});
</script> </body> </html>
B answer.html 作为answer
<!DOCTYPE html>
<html id="home" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </head> <body>
<article>
<div style="text-align:center;">
<div class="videos-container">
<video id="peer1-to-peer2" autoplay controls></video>
<h2>Offerer-to-Answerer</h2>
<h2>此页面刷新之后，必须重新刷新一下Offer页面</h2>
</div>
</div>
<script>
var mediaConstraints = {
optional: [],
mandatory: {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
}
};
</script>
<script>
var offerer, answerer;
var offererToAnswerer = document.getElementById('peer1-to-peer2'); window.RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
window.RTCSessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
window.RTCIceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate; navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
window.URL = window.webkitURL || window.URL; window.iceServers = {
iceServers: [{
url: 'stun:23.21.150.121'
}
]
};
</script>
<script>
/* answerer */ function answererPeer(offer, video_stream) {
answerer = new RTCPeerConnection(window.iceServers);
// answerer.addStream(video_stream); answerer.onaddstream = function (event) {
offererToAnswerer.src = URL.createObjectURL(event.stream);
offererToAnswerer.play();
}; answerer.onicecandidate = function (event) {
if (!event || !event.candidate) return;
sendToP1({
'action' : 'candidate',
'candidate' :event.candidate
})
//offerer.addIceCandidate(event.candidate);
}; answerer.setRemoteDescription(new RTCSessionDescription(offer));
answerer.createAnswer(function (answer) {
answerer.setLocalDescription(answer);
sendToP1({
'action' : 'answer' ,
'answer' : answer
})
//offerer.setRemoteDescription(answer);
}, function() {}, mediaConstraints);
} function receiveMessage(data){
data = JSON.parse(data.data)
console.log(data)
switch(data.action){
case "create":
answererPeer(data.offer , data.stream)
break
case "candidate":
answerer.addIceCandidate(new RTCIceCandidate(data.candidate))
break
}
}
window.addEventListener("message", receiveMessage, false) function sendToP1(data) {
opener.postMessage(JSON.stringify(data) , window.location)
}
</script> </article> </body> </html>
demo用 postMessage传递数据， 业务使用可以用websocket
A 先 createOffer ，生成的offer 供自己setLocalDescription ，并发给B
B 拿A的offer ，setRemoteDescription(offer) , 然后 createAnswer ，生成的answer 供自己setLocalDescription ，并发给A
A 拿B的answer 设置 setRemoteDescription（answer)
A onicecandidate 事件被触发 将得到的通道发给B
B addIceCandidate(new RTCIceCandidate(candidate)) 建立通道
B onicecandidate 事件被触发 将得到的通道发给A
A addIceCandidate(new RTCIceCandidate(candidate)) 建立通道
通道建立后视频就可以共享了
使用时，打开：offer.html 即可。
简单的WebRTC例子的更多相关文章
- 一个简单的CORBA例子
因为对CORBA分析的需要,这里写一个简单的CORBA例子.从JDK1.2开始,JDK中集成了ORB的实现,本例子使用了JDK1.7,对于JDK1.2+应该都没有问题.这个例子实现一个简单的加减乘除的 ...
- 菜鸟学习Hibernate——简单的一个例子
一.Hibernate开发. 上篇博客已经为大家介绍了持久层框架的发展流程,持久层框架的种类. 为了能够使用Hibernate快速上手,我们先讲解一个简单的Hibernate应用实例hibernate ...
- 轻松创建nodejs服务器（1）：一个简单nodejs服务器例子
这篇文章主要介绍了一个简单nodejs服务器例子,本文实现了一个简单的hello world例子,并展示如何运行这个服务器,需要的朋友可以参考下 我们先来实现一个简单的例子,hello world ...
- 使用Multiplayer Networking做一个简单的多人游戏例子-3/3（Unity3D开发之二十七）
使用Multiplayer Networking做一个简单的多人游戏例子-1/3 使用Multiplayer Networking做一个简单的多人游戏例子-2/3 使用Multiplayer Netw ...
- 使用Multiplayer Networking做一个简单的多人游戏例子-2/3（Unity3D开发之二十六）
猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51007512 ...
- 使用Multiplayer Networking做一个简单的多人游戏例子-1/3（Unity3D开发之二十五）
猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51006463 ...
- 一个简单的cmake例子
一个简单的cmake例子CMakeLists.txt,生成动态库文件,可以指定发布目录. 尚不支持: 1.交叉编译环境配置 2.添加依赖库 #在当前目录新建一个build目录,然后cd build ...
- vue双向数据绑定最最最最最简单直观的例子
vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...
- 一个最简单的JStorm例子
最简单的JStorm例子分为以下几个步骤: 1.生成Topology Map conf = new HashMp(); //topology所有自定义的配置均放入这个Map TopologyBuild ...
随机推荐
- could not connect to server: Connection refused (0x0000274D/10061)
Oracle Linux 6.8 PostgreSQL Server IP: 192.168.10.220 Windows 7 x64 pgAdmin Custom Port IP: 192.168. ...
- 两个Activity之间共享数据、互相访问的另一种方式的实现
本帖最后由 勇敢的心_ 于 2010-9-29 11:51 编辑 本人从windows编程转过来学习Android开发,一直在想如果两个Activity之间能够像C#或delphi中的Form一样,可 ...
- CSS：如何学习 CSS？
马上该转战互联网领域了,在此总结一下 CSS 学习的思路. 理解 CSS 的基本语法. 理解盒子模型. 理解文档流和定位. 理解浮动和清除. 理解各种 CSS 样式. 目前发现的最好的资源是:http ...
- android获取屏幕长宽的方法
package com.kale.imageview02; import android.annotation.SuppressLint; import android.app.Activity; i ...
- Leetcode刷题记录：编码并解码短网址
题目要求 编写一个类,提供两个方法.一个可以将普通的网址编码成短网址,一个可以将短网址还原为普通网址. 参考题解 # 使用随机函数,生成短网址,保存在dict中,避免重复 import random ...
- C#零基础入门07：打老鼠之面向对象重构
一:前言 有了上面两节的知识,尤其是第六节之后,现在我们回过头看我们的打老鼠游戏,我们是不是会发现:这个程序也太不面向对象了.我们所有的代码逻辑都分布在Code-Hide中(UI的后台代码,称之为Co ...
- LaTeX技巧：LaTeX括号总结
功能 语法 显示 不好看 ( \frac{1}{2} ) 好一点 \left( \frac{1}{2} \right) 您可以使用\left和\right来显示不同的括号: 功能 语法 显示 ...
- [转]memcached+magent实现memcached集群
From : http://www.cnblogs.com/happyday56/p/3461113.html 首先说明下memcached存在如下问题 本身没有内置分布式功能,无法实现使用多台Mem ...
- [转]ThinkPHP的CURD易忽视点小结
转自: http://www.oschina.net/code/snippet_2285640_44437. 1.使用对象的方法插入数据 D用法. $Form = D('Form'); $data[' ...
- LCA算法总结
LCA问题(Least Common Ancestors,最近公共祖先问题),是指给定一棵有根树T,给出若干个查询LCA(u, v)(通常查询数量较大),每次求树T中两个顶点u和v的最近公共祖先,即找 ...