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例子的更多相关文章

  1. 一个简单的CORBA例子

    因为对CORBA分析的需要,这里写一个简单的CORBA例子.从JDK1.2开始,JDK中集成了ORB的实现,本例子使用了JDK1.7,对于JDK1.2+应该都没有问题.这个例子实现一个简单的加减乘除的 ...

  2. 菜鸟学习Hibernate——简单的一个例子

    一.Hibernate开发. 上篇博客已经为大家介绍了持久层框架的发展流程,持久层框架的种类. 为了能够使用Hibernate快速上手,我们先讲解一个简单的Hibernate应用实例hibernate ...

  3. 轻松创建nodejs服务器（1）：一个简单nodejs服务器例子

    这篇文章主要介绍了一个简单nodejs服务器例子,本文实现了一个简单的hello world例子,并展示如何运行这个服务器,需要的朋友可以参考下   我们先来实现一个简单的例子,hello world ...

  4. 使用Multiplayer Networking做一个简单的多人游戏例子-3/3（Unity3D开发之二十七）

    使用Multiplayer Networking做一个简单的多人游戏例子-1/3 使用Multiplayer Networking做一个简单的多人游戏例子-2/3 使用Multiplayer Netw ...

  5. 使用Multiplayer Networking做一个简单的多人游戏例子-2/3（Unity3D开发之二十六）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51007512 ...

  6. 使用Multiplayer Networking做一个简单的多人游戏例子-1/3（Unity3D开发之二十五）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51006463 ...

  7. 一个简单的cmake例子

    一个简单的cmake例子CMakeLists.txt,生成动态库文件,可以指定发布目录. 尚不支持: 1.交叉编译环境配置 2.添加依赖库   #在当前目录新建一个build目录,然后cd build ...

  8. vue双向数据绑定最最最最最简单直观的例子

    vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...

  9. 一个最简单的JStorm例子

    最简单的JStorm例子分为以下几个步骤: 1.生成Topology Map conf = new HashMp(); //topology所有自定义的配置均放入这个Map TopologyBuild ...

随机推荐

  1. ECShop 调用自定义广告

    原文地址:http://www.ecshoptemplate.com/article-1348.html ECShop中关于广告的调用方法,网上有很多,现在要介绍的不同于其他,根据实际情况选择使用,以 ...

  2. ifeq endif

    ifeq ($(PLATFORM_VERSION),4.4)$(info "________________________4.4"); LOCAL_CFLAGS += -DPLU ...

  3. C++ inline内联函数

    inline 函数避免函数调用的开销 // find longer of two strings const string &shorterString(const string &s ...

  4. Eclipse 保存文件时自动格式化代码

    很多同学不知道Eclipse有个很有用的功能,就是自动格式源代码的功能,一般大家都是直接Ctrl+Shift+F手动格式化,多浪费时间. 其实Eclipse里已经带有自动格式化功能了,默认是没有代开该 ...

  5. 冰血暴第一季/全集Fargo迅雷下载

    冰血暴 第一季 Fargo 1 (2014)本季看点: 该剧改编自科恩兄弟获得1996年奥斯卡提名的同名经典影片,计划总共拍摄10集,第一季将讲述一个完整的故事.由<识骨寻踪第一季>编剧诺 ...

  6. python显示多个图表

    plt.figure(figsize=(64,64)) 每次都有创建新的,否则会覆盖 plt.subplot(121) plt.imshow(img,'gray') plt.title('origin ...

  7. Android Studio 下载地址

    下载地址:https://developer.android.com/sdk/index.html#download      这个网址可以下载需要的东西,FQ的话可以给 xifulinmen@gma ...

  8. 洛谷 P1164 小A点菜

    题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家……餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:“随便点”. 题目描述 不过uim由于买了一些辅(e ...

  9. dcm4chee 修改默认(0002,0013) ImplementationVersionName

    dcm4chee-2.17.3-psql\server\default\lib\dcm4che.jar ----org\dcm4che\Implementation.properties dcm4ch ...

  10. 在bat中执行sql，并配置windows计划任务，并隐藏命令窗口 (转)

    1.创建一个sql文件,test.sql: INSERT INTO TR_HK_RC_TEMPERATURE2 (HWINSTANCEID, KPIITEMID, BRANCHID, COLLECTT ...