`
haoningabc
  • 浏览: 1477926 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

webrtc学习笔记六(datachannel+websocket)

webrtc 
阅读更多
2020年5月12日更新
5年前的例子又不好使了，
出现错误
websocket Failed to execute 'send' on 'WebSocket': Still in CONNECTING state
参考：https://blog.csdn.net/bossxu_/article/details/102977802

原因是
pc.createOffer 的时候websocket还没建立完，socket.send出现问题，
把这段代码加到websocket.onopen事件里就好了：


只有datachannel的例子，websocket作为转发用，
建立连接后websocket就可以关了
server.js 
//http://www.blogjava.net/linli/archive/2014/10/21/418910.html
var express = require('express'),
app = express(),
server = require('http').createServer(app);

server.listen(3000);

app.get('/', function(req, res) {
    res.sendfile(__dirname + '/webrtc.html');
});

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({server: server});
function writeObj(obj){ 
    var description = ""; 
    for(var i in obj){   
        var property=obj[i];   
        description+=i+" = "+property+"\n";  
    }   
    console.log(description); 
} 
// 存储socket的数组，这里只能有2个socket，每次测试需要重启，否则会出错
var wsc = [],
index = 1;
// 有socket连入
wss.on('connection', function(ws) {
    console.log('connection:');
    //writeObj(ws);
    // 将socket存入数组
    wsc.push(ws);
    // 记下对方socket在数组中的下标，因为这个测试程序只允许2个socket
    // 所以第一个连入的socket存入0，第二个连入的就是存入1
    // otherIndex就反着来，第一个socket的otherIndex下标为1，第二个socket的otherIndex下标为0
    var otherIndex = index--,
    desc = null;

    if (otherIndex == 1) {
        desc = 'first socket';
    } else {
        desc = 'second socket';
    }
    // 转发收到的消息
    ws.on('message', function(message) {
        var json = JSON.parse(message);
        //console.log('received (' + desc + '): ', json);
        console.log('otherIndex ---('+desc+')(' + otherIndex + '): '+json.event);
        wsc[otherIndex].send(message, function (error) {
            if (error) {
                console.log('Send message error (' + desc + '): ', error);
            }
        });
    });
});


webrtc_datachannle.html 

<html>
<body>
<button id="sendButton" onclick="sendData()">Send</button>
<textarea id="dataChannelSend" >abc</textarea>
<textarea id="dataChannelReceive" ></textarea>

<script>
        var isCaller = window.location.href.split('#')[1];
        var socket = new WebSocket("ws://127.0.0.1:3000");
		socket.onopen=function(){ //这部分放到onopen事件里了 2020.05.12
			console.log("socket on open --->");
			if(isCaller){
        	    console.log("------->createOffer");
        	    pc.createOffer(function(desc){
        	    //  console.log(desc);
        	        pc.setLocalDescription(desc);
        	        console.log("---------------->pc.setLocal");
        	        socket.send(JSON.stringify({
        	            "event": "_offer",
        	            "data": {
        	                "sdp": desc
        	            }
        	        }));
        	    }, function (error) {
        	        console.log('Failure callback: ' + error);
        	    });
        	}
		}
        socket.onmessage = function(event){
            var json = JSON.parse(event.data);
            //console.log('onmessage: ', json);
            //如果是一个ICE的候选，则将其加入到PeerConnection中，否则设定对方的session描述为传递过来的描述
            if( json.event === "_ice_candidate" ){
                pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));
            } else {
                pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));
                console.log("---------------->pc.setRemote");
                // 如果是一个offer，那么需要回复一个answer
                if(json.event === "_offer") {
                    console.log("------->createAnswer");
                    pc.createAnswer(function(desc){
                        pc.setLocalDescription(desc);
                        console.log("---------------->pc.setLocal");
                        socket.send(JSON.stringify({
                            "event": "_answer",
                            "data": {
                                "sdp": desc
                            }
                        }));
                    }, function (error) {
                        console.log('Failure callback: ' + error);
                    });
                }else{
                    console.log("------->receive Answer---('"+json.event+"')");
                }

            }
        };
        var iceServer = null;
        var pc = new webkitRTCPeerConnection(iceServer,{optional: [{RtpDataChannels: true}]});
        try {
            sendChannel = pc.createDataChannel('sendDataChannel',{reliable: true});
        } catch (e) {
            alert('createDataChannel() failed with exception: ' + e.message);
        }
        sendChannel.onopen = console.log('--Send channel open state is : ' +sendChannel.readyState);
        sendChannel.onclose = console.log('--Send channel close  state is: ' +sendChannel.readyState);
        // 发送ICE候选到其他客户端
        pc.onicecandidate = function(event){
            console.log("onicecandidate----------->");
            if (event.candidate !== null) {
                console.log("event.candidate   !=   null");
                socket.send(JSON.stringify({
                    "event": "_ice_candidate",
                    "data": {
                        "candidate": event.candidate
                    }
                }));
            }else{
                console.log("event.candidate   == null");
            }
        };
        sendChannel.onmessage = function(event) {
              console.log("-sendChannel--★★★★★---ondatachannel");
              document.getElementById('dataChannelReceive').value = event.data;
        };
        function sendData() {
          var data = document.getElementById('dataChannelSend').value;
          console.log("---->>>>sendData():"+data);
          sendChannel.send(data);
        }
//        if(isCaller){ //这部分放到onopen事件里了 2020.05.12
//            console.log("------->createOffer");
//            pc.createOffer(function(desc){
//            //  console.log(desc);
//                pc.setLocalDescription(desc);
//                console.log("---------------->pc.setLocal");
//                socket.send(JSON.stringify({
//                    "event": "_offer",
//                    "data": {
//                        "sdp": desc
//                    }
//                }));
//            }, function (error) {
//                console.log('Failure callback: ' + error);
//            });
//        }

    </script>
</body>
</html>
分享到：
| webrtc学习笔记五（视频流和datachannel一 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    java版本使用springboot vue websocket webrtc实现视频通话

    总之，结合Spring Boot、Vue.js、WebSocket和WebRTC，我们可以构建一个高效、可靠的实时视频通话系统，满足现代通信需求。这个过程涉及到多个技术层面的整合，需要深入理解每一个组件的工作原理和交互方式，才能确保...

    WebRTC+Uniapp+WebSocket完整实例代码

    WebRTC+Uniapp+WebSocket完整实例代码

    基于WebRTC+SpringBoot+Websocket 简单音视频通话

    相关技术：Websocket，Springboot，WebRtc 使用Websocket 作为交互，作为信令服务器，负责信令交换。 视频、麦克风、屏幕共享相关操作，下载即可运行。 包含使用手册及相关说明。

    基于websocket+webrtc实现音视频通话demo，下载即可用

    基于Java WebSocket 做信令服务器，使用webrtc浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。从而实现音视频通话。下载启动 输入http://localhost 就可使用

    webrtc demo(html+js+nodejs)

    通过学习和调试这个项目，你可以深入理解WebRTC的信令流程、媒体流处理和多人视频会议的实现细节。同时，这也是一个很好的起点，可以根据需要扩展功能，如增加屏幕共享、音频处理、服务质量监控等。

    WebRTC-:H5的WebRTC + Websocket 简单实现的直播间

    WebRTC直播间演示链接​WebRTC介绍​原理简单解释：​浏览器提供获取屏幕、音频等媒体数据的接口，​双方的媒体流数据通过Turn服务器传输。​项目构造(非常简单)前端：就一个html文件，js和css直接放里面了，纯手写...

    HTML5+WebSocket实例

    RTCApp可能结合了WebSocket和WebRTC，构建了一个视频通信实例。WebSocket可以用来传输控制信息，如建立和结束通话、调整音视频质量等，而WebRTC则负责实际的音视频流传输。 这些实例有助于开发者理解WebSocket的...

    GO语言基于WebRTC的视频会议系统源码+数据库.zip

    GO语言基于WebRTC的视频会议系统源码+数据库.zip基于WebRTC的视频会议系统源码+数据库.zip基于WebRTC的视频会议系统源码+数据库.zip基于WebRTC的视频会议系统源码+数据库.zip基于WebRTC的视频会议系统源码+数据库....

    webrtc+java+webscoket+js 实现视频聊天、在线聊天室、桌面共享

    webrtc+java+webscoket+js 实现视频聊天、在线聊天室、桌面共享 本项目只能在局域网内使用，要是放在公网需要配置https才行，运行前需要把相关ip修改成本地服务器ip，chat 是前端代码文件夹,建议用nginx部署,index....

    WebRtc.rar_WEBSOCKET 视频_webRTC服务器_webrtc与websocket_websocket_web

    在"WebRtc.rar_WEBSOCKET 视频_webRTC服务器_webrtc与websocket_websocket_web"这个项目中，开发者使用WebSocket作为WebRTC的信令传输层，实现了基于浏览器的视频通信。WebSocket和WebRTC的结合是现代Web应用程序中...

    WEBRTC-to-SIP:设置WEBRTC客户端和Kamailio服务器以调用SIP客户端

    WEBRTC到SIP客户端和服务器 如何设置Kamailio + RTPEngine + TURN服务器以启用WebRTC客户端和旧版SIP客户端之间的呼叫。 默认情况下，此配置启用了IPv6。 此设置将桥接SRTP-&gt; RTP和ICE-&gt; nonICE，以使WebRTC客户端...

    基于WebRtc+node.js+express+PeerJS构建的多人即时视频通话项目源码+项目说明.zip

    基于WebRtc+node.js+express+PeerJS构建的多人即时视频通话项目源码+项目说明.zip 该项目是个人毕设项目，答辩评审分达到95分，代码都经过调试测试，确保可以运行！欢迎下载使用，可用于小白学习、进阶。 该资源主要...

    基于SpringBoot+Websocket+WebRtc 视频会议

    本文将深入探讨如何利用SpringBoot、WebSocket和WebRTC技术实现这样的系统。这三个技术的结合为开发者提供了强大的工具，可以创建高效的多人视频通话应用。 首先，SpringBoot是Java开发领域的主流框架，它简化了...

    WebRTC+websocket

    WebRTC+WebSocket的组合广泛应用于实时通信场景，如在线视频会议、远程协作工具、一对一视频聊天应用、游戏通信等。这个项目为学习者提供了一个实践平台，通过它可以深入理解WebRTC和WebSocket的协同工作原理，以及...

    webrtc-windows-demo+AMR8K-475

    【标题】"webrtc-windows-demo+AMR8K-475" 指的是一个针对Windows平台的WebRTC（Web Real-Time Communication）演示项目，它特别包含了对AMR（Adaptive Multi-Rate）编码的支持，特别是针对8kHz采样率的AMR-NB（ ...

    SpringBoot+WebSocket+WebRTC实现视频通话

    本项目利用SpringBoot、WebSocket和WebRTC技术构建了一个基本的视频通话系统。以下是关于这些关键技术点的详细说明。 首先，SpringBoot是Spring框架的一个轻量级封装，它简化了Java应用的开发流程，提供了自动配置...

    WEBRTC多人视频通话

    WEBRTC多人视频通话，可以支持多人视频通话，目前是三人的，因为视频通话的信令用到的是websocket，所以代码里面也放入了单独websocket通信的demo，解释也比较详细了,原来有一个列子是两人的，后面改成三人的，多人...

    基于webrtc的视频会议（源码+项目说明）.zip

    基于webrtc的视频会议（源码+项目说明）.zip已经通过的高分项目。 基于webrtc的视频会议（源码+项目说明）.zip已经通过的高分项目。基于webrtc的视频会议（源码+项目说明）.zip已经通过的高分项目。基于webrtc的...

    java+webSocket+WebRTC实现在线文字视频聊天

    需要使用端口，域名访问时，必须对tomcat做自签名证书，如果只是在本地使用localhost访问，就不需要做自签名证书了。 项目地址：https://shiping.lipingoomoney.cn:8443/rtcdemo/

    WebSocket 与 webrtc结合

    WebSocket 和 WebRTC 结合是现代Web应用程序中实现实时通信的重要技术组合。WebSocket提供双向通信，而WebRTC专注于在浏览器之间直接进行音视频流传输。让我们深入探讨这两种技术以及它们如何协同工作。 WebSocket ...

Magicbox
Global site tag (gtag.js) - Google Analytics