webrtc网上封装的很多，demo很多都是一个页面里实现的，今天实现了个完整的 ， A 发视频给 B。

1.) A 方

<!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(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.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>

2.） B

<!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 即可。

6. webRTC的更多相关文章

  1. 使用WebRTC搭建前端视频聊天室——数据通道篇

    本文翻译自WebRTC data channels 在两个浏览器中,为聊天.游戏.或是文件传输等需求发送信息是十分复杂的.通常情况下,我们需要建立一台服务器来转发数据,当然规模比较大的情况下,会扩展成 ...

  2. 使用WebRTC搭建前端视频聊天室——点对点通信篇

    WebRTC给我们带来了浏览器中的视频.音频聊天体验.但个人认为,它最实用的特性莫过于DataChannel——在浏览器之间建立一个点对点的数据通道.在DataChannel之前,浏览器到浏览器的数据 ...

  3. 使用WebRTC搭建前端视频聊天室——信令篇

    博客原文地址 建议看这篇之前先看一下使用WebRTC搭建前端视频聊天室——入门篇 如果需要搭建实例的话可以参照SkyRTC-demo:github地址 其中使用了两个库:SkyRTC(github地址 ...

  4. 使用WebRTC搭建前端视频聊天室——入门篇

    http://segmentfault.com/a/1190000000436544 什么是WebRTC? 众所周知,浏览器本身不支持相互之间直接建立信道进行通信,都是通过服务器进行中转.比如现在有两 ...

  5. WebRTC的一个例子

    内容引自:一个WebRTC实现获取内网IP的例子(穿透NAT) 网页代码直接复制到下面(如果以上链接被墙,可以直接将下面代码保存文件,然后在浏览器打开即可,不支持IE浏览器): <!doctyp ...

  6. WebRTC音频预处理单元APM的整体编译及使用

    正文 行的gnu静态库链接路径是针对NDK版本 r8d 的,如读者版本不匹配,请自行找到 libgnustl_static.a 静态库的路径进行替换. 3)本示例并不打算编译 WebRTC 的测试工程 ...

  7. 单独编译使用WebRTC的音频处理模块

    块,每块个点,(12*64=768采样)即AEC-PC仅能处理48ms的单声道16kHz延迟的数据,而 - 加载编译好的NS模块动态库 接下来只需要按照 此文 的描述在 android 的JAVA代码 ...

  8. webrtc中APM（AudioProcessing module）的使用2

    这个其实就是从Audio_processing.h中拿出来的. APM should be placed in the signal chain as close to the audio hardw ...

  9. webrtc中APM（AudioProcessing module）的使用

    一,实例化和配置 AudioProcessing* apm = AudioProcessing::Create(0); //这里的0指的是channelID,只是一个标注那个通道的表示 apm-> ...

  10. WebRTC通信流程

    WebRTC是HTML5支持的重要特性之一,有了它,不再需要借助音视频相关的客户端,直接通过浏览器的Web页面就可以实现音视频对聊功能.而且WebRTC项目是开源的,我们可以借助WebRTC源码快速构 ...

随机推荐

  1. C 实战练习题目2

    题目:企业发放的奖金根据利润提成. 利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%: 20万到4 ...

  2. mongodb_2

    一.游标 在mongodb中,底层使用js引擎进行各种操作,所以我们在命令行窗口,可直接执行js代码. #使用for循环,插入1000条数据. > for (var i=0;i<1000; ...

  3. pyplot 作图总结

    折线图 下面是绘制折线图,设置图片的横轴纵轴标签,图片标题的API的用法. import matplotlib.pyplot as pyplot # init pyplot.figure() # ar ...

  4. 搜索引擎如何检索结果：Python和spaCy信息提取简介

    概览 像Google这样的搜索引擎如何理解我们的查询并提供相关结果? 了解信息提取的概念 我们将使用流行的spaCy库在Python中进行信息提取 介绍 作为一个数据科学家,在日常工作中,我严重依赖搜 ...

  5. coding++ ：Layui-form 表单模块

    虽然对layui比较熟悉了,但是今天有时间还是将layui的form表单模块重新看一下. https://www.layui.com/doc/modules/form.html 1):更新渲染 lay ...

  6. coding++：Java 中Model 与 实体的区别

    model的字段>entity的字段,并且model的字段属性可以与entity不一致,model是用于前端页面数据展示的,而entity则是与数据库进行交互做存储用途. 举个例子: 比如在存储 ...

  7. SpringCloud配置中心config

    1,配置中心可以用zookeeper来实现,也可以用apllo 来实现,springcloud 也自带了配置中心config Apollo 实现分布式配置中心 zookeeper:实现分布式配置中心, ...

  8. 403 Invalid CORS request 跨域问题解决

    这里使用springMVC自带的CORS解决跨域问题 什么是跨域问题 1.请求地址与当前地址不相同 2.端口号不相同 技术有限端口号不同还未发现 3.二级域名不相同 出现这种问题如何解决有很多种方法, ...

  9. 如何在Linux下优雅的查询日志

    做为一名合格的Java后台开发 经常需要查询线上的日志,定位线上问题 所以熟练掌握日志查询的命令 可以使你更加迅速的定位错误日志位置,及时解决问题 在此,我将介绍几个自己工作中经常使用到的日志查询命令 ...

  10. JS面向对象介绍

    JS面向对象介绍 首先面向对象是什么?为什么要使用面向对象. 因为JavaScript对每个创建的对象都会自动设置一个原型(谷歌火狐中是proto),指向它的原型对象prototype,举个例子: f ...