webrtc 视频 demo
webrtc 视频 demo
webrtc网上封装的很多，demo很多都是一个页面里实现的，今天实现了个完整的 ， A 发视频给 B
A webrtc.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-scal
able=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style> p { padding: 1em; } li {
border-bottom: 1px solid rgb(189, 189, 189);
border-left: 1px solid rgb(189, 189, 189);
padding: .5em;
} </style>
</head> <body> <script>
var mediaConstraints = {
optional: [],
mandatory: {
OfferToReceiveAudio: false,
OfferToReceiveVideo: true
}
};
</script>
<script>
var offerer
,answererWin window.RTCPeerConnection = window.mozRTCPeerConnection || window.webkit
RTCPeerConnection;
window.RTCSessionDescription = window.mozRTCSessionDescription || windo
w.RTCSessionDescription;
window.RTCIceCandidate = window.mozRTCIceCandidate || window.RTCIceCand
idate; navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitG
etUserMedia;
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(ne
w RTCSessionDescription(data.answer))
break
case "candidate":
offerer.addIceCandidate(new RTC
IceCandidate(data.candidate))
break }
console.log('msg' ,data)
} window.addEventListener("message", receiveMessage, fals
e)
answererWin = window.open('webrtc2.html' ,'t')
getUserMedia(function (video_stream) {
offererPeer(video_stream)
});
</script> </body> </html>
B webrtc2.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">
<link rel="stylesheet" href="https://www.webrtc-experiment.com/style.css"> <style>
audio, video {
-moz-transition: all 1s ease;
-ms-transition: all 1s ease; -o-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
vertical-align: top;
} p { padding: 1em; } li {
border-bottom: 1px solid rgb(189, 189, 189);
border-left: 1px solid rgb(189, 189, 189);
padding: .5em;
} .videos-container {
display: inline-block;
border: 2px solid black;
padding: .1em;
border-radius: 0.2em;
margin: 2em .2em;
background: white;
vertical-align: top;
}
.videos-container h2 {
border: 0;
border-top: 1px solid black;
margin: 0;
text-align: center;
display:block;
}
video {
width:20em;
height: 15em;
background: black;
}
</style>
<!-- for HTML5 el styling -->
<script>
document.createElement('article');
</script>
</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> </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)) 建立通道
通道建立后视频就可以共享了
参考网址
http://www.html5rocks.com/en/tutorials/webrtc/basics/?redirect_from_locale=fr
https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/client-side.html
webrtc 视频 demo的更多相关文章
- WebRTC 视频对话
今天聊一下WebRTC.很多开发者,可能会觉得有些陌生,或者直接感觉繁杂.因为WebRTC在iOS上的应用,只是编译都让人很是头痛.这些话,到此为止,以防让了解者失去信心.我们只传播正能量,再多的困难 ...
- Android IOS WebRTC 音视频开发总结（七五）-- WebRTC视频通信中的错误恢复机制
本文主要介绍WebRTC视频通信中的错误恢复机制(我们翻译和整理的,译者:jiangpeng),最早发表在[这里] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:blac ...
- 5分钟快速打造WebRTC视频聊天<转>
原文地址: 5分钟快速打造WebRTC视频聊天 百度一下WebRTC,我想也是一堆.本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本 ...
- WebRTC视频分辨率设置
前面我们能够打开摄像头.getUserMedia()时会传入参数,在参数里我们可以指定宽高信息.通过宽高参数控制输出的视频分辨率. html 在页面上摆放一些元素,下面是主要部分 <div id ...
- Android WebRTC视频旋转问题
最近在对接WebRTC到安卓手机上,有个需求就是手机横屏时将对方图像进行旋转,研究了WebRTC video_render的代码后发现远端的视频渲染使用opengles20或surfaceview实现 ...
- 动手搭建第一个小程序音视频Demo
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:小程序音视频产品经理 腾讯云提供了全套技术文档和源码来帮助您快速构建一个音视频小程序,但是再好的源码和文档也有学习成本,为了尽快的能调试起 ...
- 5分钟快速打造WebRTC视频聊天
百度一下WebRTC,我想也是一堆.本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本信息都发不出去,更别说视频了.于是自己动手. 想 ...
- Android使用VideoView播放本地视频及网络视频Demo
1.xm文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:and ...
- webRTC peerconnection_client demo创建VS工程
编译了webRTC Windows源码之后,想使用编译出来的库写一个demo出来,但是又不知到怎么下手.就想通过源码中带的示例peerconnection_client和peerconnection_ ...
随机推荐
- Js变量类型
值类型和引用类型 值类型(基本类型):5种,Number String Boolean null undefined var a=10; var b=a; a=2; console.log(b); a ...
- Slow HTTP Denial of Service Attack 漏洞解决办法
编辑 删除 问题名称: Slow HTTP Denial of Service Attack 问题URL http://10.238.*.*:58*** 风险等级: 高 问题类型: 服务器配置类 漏洞 ...
- 小知识~清除系统盘的Hiberfil.sys
Hiberfil.sys这个文件是系统休眠用的,时间长了你可能会占用几个G的磁盘空间,有时我们并不需要它,而又无法直接删除,这时,你可以使用CMD命令来关闭这个功能,关闭后,这个文件自动被删除. 1 ...
- CAD设置系统变量（com接口VB语言）
主要用到函数说明: MxDrawXCustomFunction::Mx_SetSysVar 设置系统变量.详细说明如下: 参数 说明 CString sVarName 系统变量名 Value 需要设置 ...
- 03JavaScript运算符与表达式
JavaScript运算符与表达式 2.5运算符与表达式 2.5.1赋值运算符 运算符 意义 运算符 意义 = x=5 /= x=x/y += x=x+y %= 求余赋值 -= x=x-y *= x= ...
- BZOJ3124: [Sdoi2013]直径 (树形DP)
题意:给一颗树 第一问求直径 第二问求有多少条边是所有直径都含有的 题解:求直径就不说了 解第二问需要自己摸索出一些性质 任意记录一条直径后 跑这条直径的每一个点 如果以这个点不经过直径能到达最远的 ...
- oracle 内连接 左外连接 右外连接的用法,(+)符号用法
1. 内连接很简单 select A.*, B.* from A,B where A.id = B.id select A.*, B.* from A inner join B on A.id = B ...
- Number String(HDU 4055,动态规划递推,前缀和优化)
点击加号查看代码 #include<bits/stdc++.h>//前缀和优化版本,不易理解 using namespace std; #define ll long long ; ; l ...
- 「 CODE[VS] P2853 」 方格游戏
题目大意 给定一张 $n\times n$ 的网格.每个格子上都有一个系数 $a$,先下 $A$ 和 $B$ 两人选择两条 $(1,1)\rightarrow (n,n)$ 路径.要求着两条路径不能相 ...
- HDU - 2050 - 折线分割平面（数学 + dp）
题意: 我们看到过很多直线分割平面的题目,今天的这个题目稍微有些变化,我们要求的是n条折线分割平面的最大数目.比如,一条折线可以将平面分成两部分,两条折线最多可以将平面分成7部分 思路: 记住结论.. ...