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,answererWinwindow.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) returnsendToP2({'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 = navigatorn.getMedia = n.webkitGetUserMedia || n.mozGetUserMedian.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))breakcase "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)breakcase "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
转载于:https://www.cnblogs.com/developer-ios/p/6517348.html
webrtc 视频 demo相关推荐
- WebRTC 聊天Demo
我想大部分人应该都还记得"你好Chrome,火狐正在呼叫!"的博客和Demo,向大家展示了在火狐和Chrome中进行WebRTC视频聊天,获得了很多朋友的注意.从那开始,Fresh ...
- 使用 SimpleWebRTC 构建 WebRTC 视频聊天应用程序
Building a WebRTC Video Chat Application with SimpleWebRTC 机翻 原文:Building a WebRTC Video Chat Applic ...
- 译:WebRTC视频通信浅析
译:WebRTC视频通信 http://blog.csdn.net/csdnhaoren13/article/details/50999168 原文:http://www.html5rocks.com ...
- 译:WebRTC视频通信
原文:http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/ WebRTC可以进行p2p之间的通信,但是仍需要服务支持. 1. si ...
- webrtc的DEMO环境搭建
Webrtc 介绍与Demo环境搭建 一,webrtc的基本介绍 WebRTC是一个开源项目,提供简单的JavaScript接口以实现浏览器的实时通信(RTC).与普通的客户端与服务器之间的即时通信不 ...
- 搭建webrtc视频服务rtcmulticonnection-server完整教程
搭建webrtc视频服务rtcmulticonnection-server完整教程 1.ubuntu/centos服务器皆可 2.该服务器要求有证书,无证书则nginx开个80的demo网站,使用ce ...
- WebRTC 视频对话
今天聊一下WebRTC.很多开发者,可能会觉得有些陌生,或者直接感觉繁杂.因为WebRTC在iOS上的应用,只是编译都让人很是头痛.这些话,到此为止,以防让了解者失去信心.我们只传播正能量,再多的困难 ...
- 5分钟快速打造WebRTC视频聊天转
原文地址: 5分钟快速打造WebRTC视频聊天 百度一下WebRTC,我想也是一堆.本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本 ...
- 机器学习帮助WebRTC视频质量评价
本文来自CosMos Software创始人Alex. Gouaillard的博客,他同时为WebRTC.QUIC等标准组织工作.LiveVideoStack对原文进行了摘译. 文 / Alex. G ...
最新文章
- SpringBoot第十四篇:在springboot中用redis实现消息队列
- python结束if else_python | if else || where true 流程控制
- Oracle 数据库DBA管理手册!
- LSTM模型在问答系统中的应用 2017-06-27 21:03 在问答系统的应用中,用户输入一个问题,系统需要根据问题去寻找最合适的答案。 1:采用句子相似度的方式。根据问题的字面相似度选择相似度最
- 六、Scrapy中Download Middleware的用法
- Linux中fork的秘密
- linux的基础知识——正则表达式
- 要闻君说:FaceTime的服务究竟坑有多大?CNCF 技术监督委员会首添中国面孔,来自阿里!高通华为暂和解……...
- 99% 的同学写不出好代码,都是因为这个问题!
- 超级菜菜鸟全程架站攻略(Mysql+Apche+PHP+Phpmyadmin+Zend,含本机安装)
- 1,python基础入门
- 函数的凹凸区间怎么求_函数凹凸区间怎么求
- 基于DLP4500的结构光3DScan应用手册
- 127.0.0.1、192.168.0.111、本机地址、URL
- win10资源管理器——删除左侧图标(自用)
- maven3实战之仓库
- Ubuntu安装使用Krita
- python复制word段落_使用python将整个word文档(包括表)复制到另一个
- 你也还在找程序员外包平台吗?有这几个就足够了!
- java list获取某个字段
热门文章
- 2清空所有表_拉链表(二)
- kafka中LEO和HW
- int size java_int size()
- 盘点 20多种基本Java库和API,值得收藏!
- 解惑图数据库!你知道什么是图数据库吗?
- eigen 编译_头条 | 使用eigen实现四元数、欧拉角、旋转矩阵、旋转向量间的转换...
- npz文件转为npy_numpy的文件存储 .npy .npz 文件
- 进程的退出方式以及僵尸进程和孤儿进程
- 订阅号 图文回复php,微信开发(PHP实现订阅号的公众号配置和自动回复)
- 可变参数列表(va_list,va_arg,va_copy,va_start,va_end)