首页 / JAVASCRIPT / javascript-Firefox启动连接时,无法在Chrome中使用WebRTC数据通道

javascript-Firefox启动连接时,无法在Chrome中使用WebRTC数据通道

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-Firefox启动连接时,无法在Chrome中使用WebRTC数据通道，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10002字，纯文字阅读大概需要15分钟。

内容图文

javascript-Firefox启动连接时,无法在Chrome中使用WebRTC数据通道

我正在尝试使用WebRTC DataChannel创建一个简单的网页,以在浏览器之间发送ping / pong.

Chrome启动连接后,Chrome便开始工作.
当Firefox启动连接,然后Firefox连接时,它可以工作.
当Chrome启动连接,然后Firefox连接时,它开始工作.
但是,当Firefox启动连接,然后Chrome连接时,它不起作用. Chrome永远不会接收Firefox发送的数据.

我在Archlinux上使用Firefox 26和Chromium 32.

这是我的JavaScript代码：

<!DOCTYPE html>
<html>
<head>
    <title>WebRTC test</title>
    <meta charset="utf-8">
</head>
<body>
    <button id="create" disabled>Create data channel</button>

    <script type="text/javascript">
        // DOM

        var create = document.getElementById('create');

        // Compatibility

        window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
        window.RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription;
        window.RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate || window.webkitRTCIceCandidate;

        // Create a WebRTC object

        var rtc = new RTCPeerConnection(null);

        // Create a data channel

        var sendChannel = rtc.createDataChannel('pingtest', {reliable: false});
        var myMsg = 'ping';

        function setRecvChannel(recvChannel) {
            recvChannel.onmessage = function(event) {
                if(event.data.indexOf('\x03\x00\x00\x00\x00\x00\x00\x00\x00') === 0) {
                    console.log('-> ' + window.btoa(event.data));
                    return; // Received channel's name, ignore
                }

                console.log('-> ' + event.data);
                window.setTimeout(function() {
                    console.log('<- ' + myMsg);
                    sendChannel.send(myMsg);
                }, 500);
            };
        }

        // Chrome and Firefox

        sendChannel.onopen = function(event) {
            setRecvChannel(sendChannel);

            if(myMsg === 'ping') {
                console.log('<- ' + myMsg);
                sendChannel.send(myMsg);
            }
        };

        // Firefox

        rtc.ondatachannel = function(event) {
            setRecvChannel(event.channel);
        };

        // ICE

        rtc.onicecandidate = function(event) {
            if(event.candidate) {
                console.log('<- ' + JSON.stringify(event.candidate));
                ws.send(JSON.stringify(event.candidate));
            }
        };

        // Signaling channel

        var ws = new WebSocket('ws://127.0.0.1:49300/');

        ws.onopen = function() {
            create.disabled = false;
        };

        ws.onmessage = function(event) {
            console.log('-> ' + event.data);
            var data = JSON.parse(event.data);

            if(data.sdp) {
                rtc.setRemoteDescription(new RTCSessionDescription(data));

                if(data.type === 'offer') {
                    myMsg = 'pong';

                    rtc.createAnswer(function(anwser) {
                        rtc.setLocalDescription(anwser, function () {
                            console.log('<- ' + JSON.stringify(anwser));
                            ws.send(JSON.stringify(anwser));
                        });
                    }, console.error);
                }
            }
            else {
                rtc.addIceCandidate(new RTCIceCandidate(data));
            }
        };

        ws.onclose = function() {
            create.disabled = true;
        };

        // Create an offer

        create.onclick = function() {
            rtc.createOffer(function(offer) {
                rtc.setLocalDescription(offer, function () {
                    offer.sdp = offer.sdp;
                    console.log(offer.sdp);
                    console.log('<- ' + JSON.stringify(offer));
                    ws.send(JSON.stringify(offer));
                });
            }, console.error);
        };
    </script>
</body>
</html>

这是我仅出于测试目的而创建的基于WebSocket的信令服务器,它仅侦听端口49300并将从客户端接收的数据广播到其他客户端：

#!/usr/bin/python
#-*- encoding: Utf-8 -*-
from socket import socket, AF_INET, SOCK_STREAM, SOL_SOCKET, SO_REUSEADDR
from string import printable
from threading import Thread
from base64 import b64encode
from struct import unpack
from hashlib import sha1

PORT = 49300

activeSocks = []

def SignalingChannel(ip, port, sock):
    print 'Connection from %s:%s' % (ip, port)

    # Handling the HTTP request

    try:
        headers = sock.recv(8184)

        assert headers.upper().startswith('GET')
        assert headers.endswith('\r\n\r\n')

        data = headers.strip().replace('\r', '').split('\n')[1:]

        headers = {}
        for header in data:
            name, value = header.split(':', 1)
            headers[name.strip().lower()] = value.strip()

        assert headers['host']
        assert 'upgrade' in headers['connection'].lower()
        assert 'websocket' in headers['upgrade'].lower()
        assert headers['sec-websocket-version'] == '13'
        assert len(headers['sec-websocket-key']) == 24

        guid = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
        accept = b64encode(sha1(headers['sec-websocket-key'] + guid).digest())

        sock.send('HTTP/1.1 101 Switching Protocols\r\n' +
        'Connection: Upgrade\r\n' +
        'Upgrade: websocket\r\n' +
        'Sec-WebSocket-Accept: %s\r\n' % accept +
        '\r\n')

    except:
        try:
            msg = 'This is a RFC 6455 WebSocket server.\n'

            sock.send('HTTP/1.1 400 Bad Request\r\n' +
            'Connection: Close\r\n' +
            'Content-Length: %d\r\n' % len(msg) +
            'Content-Type: text/plain; charset=us-ascii\r\n' +
            'Sec-WebSocket-Version: 13\r\n' +
            '\r\n' +
            msg)

        except:
            pass

        sock.close()
        print 'Disconnection from %s:%s' % (ip, port)
        return

    activeSocks.append(sock)

    try:
        data = sock.recv(2)
        while len(data) == 2:
            frame = data[0] + chr(ord(data[1]) & 0b01111111)
            opcode = ord(data[0]) & 0b00001111
            mask = ord(data[1]) & 0b10000000
            paylen = ord(data[1]) & 0b01111111

            if paylen == 126:
                data = sock.recv(2)
                frame += data
                paylen = unpack('>H', data)[0]
            elif paylen == 127:
                data = sock.recv(8)
                frame += data
                paylen = unpack('>Q', data)[0]

            if mask:
                mask = sock.recv(4)

            data = ''
            received = True
            while received and len(data) < paylen:
                received = sock.recv(paylen - len(data))
                data += received

            if mask:
                unmasked = ''
                for i in xrange(len(data)):
                    unmasked += chr(ord(data[i]) ^ ord(mask[i % 4]))
            else:
                unmasked = data

            frame += unmasked

            if opcode != 8:
                print '-- From port %d --' % port
                if all(ord(c) < 127 and c in printable for c in unmasked):
                    print unmasked
                else:
                    print repr(unmasked)
                for destSock in activeSocks:
                    if destSock != sock:
                        destSock.send(frame)
            else:
                break

            data = sock.recv(2)
    except:
        pass

    activeSocks.remove(sock)
    sock.close()
    print 'Disconnection from %s:%s' % (ip, port)

listenSock = socket(AF_INET, SOCK_STREAM)
listenSock.setsockopt(SOL_SOCKET, SO_REUSEADDR, 1)

listenSock.bind(('0.0.0.0', PORT))
listenSock.listen(20)

print 'Listening on port 49300...'

while True:
    clientSock, (ip, port) = listenSock.accept()
    Thread(target=SignalingChannel, args=(ip, port, clientSock)).start()

要运行代码,请启动信令服务器,在两个浏览器选项卡中打开网页,单击“创建数据通道”按钮,然后查看Web控制台.

任何想法？

解决方法:

查看Chrome / Firefox错误跟踪器,似乎已确定并解决了此问题,但仅在Chrome Canary 33.0.1715.0或更高版本中.

如果您不愿意使用上述的Chrome Canary版本,则可以检测到不良的对等体组合,并通过“要约”按钮向其他客户发出要约.

伪代码：

socket.onMessage(msg) {
   if(msg == "request-offer"){
      doOffer();
   }
   ...
}

createDataChannelButton.onClick() {
   if(!canCreateChannelBasedOnBrowser){
      socket.send("request-offer");
   }
   else {
      doOffer();
   }
}

用您的示例代码：

<!DOCTYPE html>
<html>
<head>
   <title>WebRTC test</title>
   <meta charset="utf-8">
</head>
<body>
<button id="create" disabled>Create data channel</button>

<script type="text/javascript">
   // DOM

   // CHANGE: Add basic browser detection based on google's adapter.js file.
   var rtcBrowserVersion = 0;
   var rtcCanInitiateDataOffer = false;
   if (navigator.mozGetUserMedia) {
      rtcBrowserVersion = parseInt(navigator.userAgent.match(/Firefox\/([0-9]+)\./)[1], 10);
      rtcCanInitiateDataOffer = true;
   } else if (navigator.webkitGetUserMedia) {
      // Chrome Canary reports major version 35 for me.  Can't find a reliable resource to confirm
      // canary versions.
      rtcBrowserVersion = parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2], 10);
      rtcCanInitiateDataOffer = rtcBrowserVersion >= 35;
   }


   var create = document.getElementById('create');

   // Compatibility

   window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
   window.RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription;
   window.RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate || window.webkitRTCIceCandidate;

   // Create a WebRTC object

   var rtc = new RTCPeerConnection(null);

   // Create a data channel

   var sendChannel = rtc.createDataChannel('pingtest', {reliable: false});
   var myMsg = 'ping';

   function setRecvChannel(recvChannel) {
      recvChannel.onmessage = function(event) {
         if(event.data.indexOf('\x03\x00\x00\x00\x00\x00\x00\x00\x00') === 0) {
            console.log('-> ' + window.btoa(event.data));
            return; // Received channel's name, ignore
        }

        console.log('-> ' + event.data);
        window.setTimeout(function() {
           console.log('<- ' + myMsg);
           sendChannel.send(myMsg);
        }, 500);
     };
  }

  // Chrome and Firefox

  sendChannel.onopen = function(event) {
     setRecvChannel(sendChannel);

     if(myMsg === 'ping') {
        console.log('<- ' + myMsg);
        sendChannel.send(myMsg);
     }
  };

  // Firefox

  rtc.ondatachannel = function(event) {
     setRecvChannel(event.channel);
  };

  // ICE

  rtc.onicecandidate = function(event) {
     if(event.candidate) {
        console.log('<- ' + JSON.stringify(event.candidate));
        ws.send(JSON.stringify(event.candidate));
     }
  };

  // Signaling channel

  var ws = new WebSocket('ws://127.0.0.1:49300/');

  ws.onopen = function() {
     create.disabled = false;
  };

  ws.onmessage = function(event) {
     console.log('-> ' + event.data);
     var data = JSON.parse(event.data);

    if(data.sdp) {
       rtc.setRemoteDescription(new RTCSessionDescription(data));

       if(data.type === 'offer') {
          myMsg = 'pong';

          rtc.createAnswer(function(anwser) {
             rtc.setLocalDescription(anwser, function () {
                console.log('<- ' + JSON.stringify(anwser));
                ws.send(JSON.stringify(anwser));
             });
          }, console.error);
       }
    }
    // CHANGE: Chrome with offer bug asked to initiate the offer.
    else if(data.initiate === true){
       doOffer();
    }
    else {
       rtc.addIceCandidate(new RTCIceCandidate(data));
    }
 };

 ws.onclose = function() {
   create.disabled = true;
};

// Create an offer

// CHANGE: Create function for offer, so that it may be called from ws.onmessage
function doOffer(){
   rtc.createOffer(function(offer) {
      rtc.setLocalDescription(offer, function () {
         offer.sdp = offer.sdp;
         console.log(offer.sdp);
         console.log('<- ' + JSON.stringify(offer));
         ws.send(JSON.stringify(offer));
      });
   }, console.error);
}

create.onclick = function() {
   // CHANGE: If this client is not able to negotiate a data channel, send a
   // message to the peer asking them to offer the channel.
   if(rtcCanInitiateDataOffer){
      doOffer();
   }
   else {
      ws.send(JSON.stringify({initiate:true}));
   }
};

内容总结

以上是互联网集市为您收集整理的javascript-Firefox启动连接时,无法在Chrome中使用WebRTC数据通道全部内容，希望文章能够帮你解决javascript-Firefox启动连接时,无法在Chrome中使用WebRTC数据通道所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/658817.html

来源：【匿名】

【上一篇】Javascript函数返回未定义的值【下一篇】javascript 怎么调用php方法

更多 ►

【javascript-Firefox启动连接时,无法在Chrome中使用WebRTC数据通道】教程文章相关的互联网学习教程文章

JavaScript无提示关闭当前页面窗口，兼容IE/Firefox/Chrome【代码】

JS与IE/Firefox兼容性汇总

以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox1. document.form.item 问题 (1)现有问题：现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行 (2)解决方法：改用 document.formName.elements["elementName"] (3)其它参见 22. 集合类对象问题 (1)现有问题：现有代码中许多集合类对象取用时使用 ()，IE 能接受，...

如果路径中有查询字符串,Firefox是否会缓存javascript并在没有请求的情况下使用它？【代码】

我想要做的是在javascript路径的末尾添加一个查询字符串,以便每当我的应用程序更新到新版本时,都会下载javascript.但是,只要查询字符串相同,我希望它继续使用缓存版本而不执行http请求来检查脚本是否已更改. 我在PHP中完成此操作的方法是从CVS标记中读取.当我构建HTML输出时,我读取CVS标记并使用它附加到javascript路径的末尾,以便它创建一个如下所示的脚本标记：<script src="javascript/messages/shipments.js?TPRSAPPS-DEV2_090...

javascript – 在Firefox中绕过浏览器缓存？【代码】

考虑以下html页面,它可以加载许多大型png文件：<html> <head> <script type="text/javascript">function hide( ) { document.getElementById("here").innerHTML = "hidden"; } function show( ) { var loadMe = "";for (var i=1; i<250; i++){ loadMe += "<img src='http://domain.com/" + i + "_a.png'><br>";loadMe += "<img src='http://domain.com/" + i + "_b.png'><br>";}document.getElementById("here").innerHT...

Javascript-Web Audio API：使用媒体流时,firefox中的FFT数据与Chrome中的FFT数据不同？

我正在尝试对使用Web音频API从麦克风获得的数据进行频率分析.我需要实时数据(尽可能多地获取1024个样本的窗口大小). 我正在使用createMediaStreamSource作为源节点.我已使用getByteFrequencyData方法(样本大小= 1024)使用了来自Analyzer节点的FFT数据. 来自FFT阵列的数据在chrome和firefox中是完全不同的(在firefox中,频谱始终较小(矢量尺寸较小),值较小(较低值),与Chrome相比,Chrome与其他FFT算法相比似乎还可以例如在Audacity).即...

jquery.AutoComplete.js中文修正版(支持firefox)_jquery

代码如下:jQuery.autocomplete = function(input, options) { // Create a link to self var me = this; // Create jQuery object for input element var $input = $(input).attr("autocomplete", "off"); // Apply inputClass if necessary if (options.inputClass) $input.addClass(options.inputClass); // Create results var results = document.createElement("div"); // Create jQuery object for results var $results = $...

javascript – 为什么Chrome和FireFox控制台打印未定义？【代码】

拿这个简单的Test对象并将其粘贴到控制台中,你会看到它显示为undefined.该对象正在工作,因为它也打印123,但未定义的是什么. 测试：var Test = new (function(){return {get testing(){return "123";}} });console.log(Test.testing);控制台输出：123 undefined解决方法:这是console.log的返回值. 尝试console.log(1);这使1 undefined但是,如果你输入的话Test.testing只给出了"123"

jquery load()在firefox(火狐)下显示不正常的解决方法

代码如下:<html> <head> <script type="text/javascript" src="jquery-1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b01").click(function(){ $(#myDiv).load(http://www.baidu.com); }); }); </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button id="b01" type="button">Change Content</button> </body> </html> 把 http://www.baidu.co...

FireFox浏览器使用Javascript上传大文件_PHP教程

本程序是利用3.x的Firefox浏览器可以读取本地文件的特性，实现通过xmlHttPRequest上传大文件功能，并在可以上传过程中动态显示上传进度。略加修改，并与服务器端配合，可以实现断点续传等诸多功能。本例主要是研究FireFox的file-input节点的一些特性，其他客户端应用，如Flash、Sliverlight等，在实现客户端大文件上传时，在数据传输与服务器端存储等方面，与本例的思路基本一致。注意：文件体积似乎有临界点，但这个临界点是多少尚...

一个JS在IE和FireFox中执行效果,该怎么处理

一个JS在IE和FireFox中执行效果怪！JS在FireFox执行对，在IE执行错我有一个节目的分类，在页面中循环取出，循环大致如下： while($Sort = $db->db_fetch_array()){ echo "" . "". "".$Sort["SORT_NAME"]". "" . ""; }?>点击分类，将选中分类的背景色调整为#E9F4FC，未选中的为无色，以JS实现JS如下：该功能在FireFox下正常执行，但在IE6下，在JS中alert(sort.length);每次得到都是0，...

FireFox浏览器使用Javascript上传大文件_php实例

javascript-firefoxdeveloperedition官网下载不了

firefox developer edition 官网下载不了https://www.mozilla.org/zh-CN/firefox/channel/#developer 无论是中文还是英文，全都不行，复制地址用迅雷也下不了，没资源搜种子也搜不到求大神解决回复内容：firefox developer edition 官网下载不了https://www.mozilla.org/zh-CN/firefox/channel/#developer 无论是中文还是英文，全都不行，复制地址用迅雷也下不了，没资源搜种子也搜不到求大神解决我试了下载是OK的啊： windows: ht...

FireFox浏览器使用Javascript上传大文件_PHP

FireFox浏览器使用Javascript上传大文件

使用ChromeFirefox自带调试工具调试javascript的9种技巧【图】

我们调试Javascript一般会用到Chrome或Firefox自带的调试工具，本文列出了几条用于调试Javascript的技巧，掌握它们，让我们花更少的时间来解决错误和bug，从而提高开发效率。本文主要介绍了9种使用Chrome Firefox 自带网页调试工具调试javascript技巧，希望能帮助到大家。1. debugger除了console.log, debugger是我们最喜欢、快速的调试工具。执行代码后，Chrome会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。...

首页 / JAVASCRIPT / javascript-Firefox启动连接时,无法在Chrome中使用WebRTC数据通道

javascript-Firefox启动连接时,无法在Chrome中使用WebRTC数据通道

内容导读

内容图文

内容总结

内容备注

内容手机端

【javascript-Firefox启动连接时,无法在Chrome中使用WebRTC数据通道】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

FIREFOX - 相关标签

CHROME - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程