webrtc学习笔记一 (视频流)
程序员文章站
2022-07-08 16:46:03
...
google官方的
socket.io的源码
https://bitbucket.org/webrtc/codelab/downloads
http://dl.iteye.com/topics/download/88405497-3fd1-3e34-adba-004583638559
最简单的WebRTC示例
http://www.blogjava.net/linli/archive/2014/10/21/418910.html
webrtc.html
nodejs的server
server.js
在局域网可以忽略google的stun
一台电脑先打开
192.168.137.27:3000
另一台打开
192.168.137.27:3000#true
iceServer设置成空也行
官方参考
http://www.html5rocks.com/en/tutorials/webrtc/basics/
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
http://blog.csdn.net/liaowenfeng/article/details/18407837
例子
https://apprtc.appspot.com/
例子
http://www.simpl.info/rtcpeerconnection/
git:
https://github.com/andyet/SimpleWebRTC
https://github.com/webRTC-io/webRTC.io
socket.io的源码
https://bitbucket.org/webrtc/codelab/downloads
http://dl.iteye.com/topics/download/88405497-3fd1-3e34-adba-004583638559
最简单的WebRTC示例
http://www.blogjava.net/linli/archive/2014/10/21/418910.html
webrtc.html
<html> <body> Local: <br> <video id="localVideo" autoplay></video><br> Remote: <br> <video id="remoteVideo" autoplay></video> <script> // 仅仅用于控制哪一端的浏览器发起offer,#号后面有值的一方发起 var isCaller = window.location.href.split('#')[1]; // 与信令服务器的WebSocket连接 var socket = new WebSocket("ws://192.168.137.27:3000"); // stun和turn服务器 var iceServer = { "iceServers": [{ "url": "stun:stun.l.google.com:19302" }, { "url": "turn:numb.viagenie.ca", "username": "haoningabc@163.com", "credential": "12345" }] }; // 创建PeerConnection实例 (参数为null则没有iceserver,即使没有stunserver和turnserver,仍可在局域网下通讯) var pc = new webkitRTCPeerConnection(iceServer); // 发送ICE候选到其他客户端 pc.onicecandidate = function(event){ if (event.candidate !== null) { socket.send(JSON.stringify({ "event": "_ice_candidate", "data": { "candidate": event.candidate } })); } }; // 如果检测到媒体流连接到本地,将其绑定到一个video标签上输出 pc.onaddstream = function(event){ //document.getElementById('remoteVideo').src = URL.createObjectURL(event.stream); document.getElementById('remoteVideo').srcObject = event.stream; }; // 发送offer和answer的函数,发送本地session描述 var sendOfferFn = function(desc){ pc.setLocalDescription(desc); socket.send(JSON.stringify({ "event": "_offer", "data": { "sdp": desc } })); }, sendAnswerFn = function(desc){ pc.setLocalDescription(desc); socket.send(JSON.stringify({ "event": "_answer", "data": { "sdp": desc } })); }; // 获取本地音频和视频流 navigator.webkitGetUserMedia({ "audio": true, "video": true }, function(stream){ //绑定本地媒体流到video标签用于输出 //document.getElementById('localVideo').src = URL.createObjectURL(stream); document.getElementById('localVideo').srcObject = stream; //向PeerConnection中加入需要发送的流 pc.addStream(stream); //如果是发起方则发送一个offer信令 if(isCaller){ pc.createOffer(sendOfferFn, function (error) { console.log('Failure callback: ' + error); }); } }, function(error){ //处理媒体流创建失败错误 console.log('getUserMedia error: ' + 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)); // 如果是一个offer,那么需要回复一个answer if(json.event === "_offer") { pc.createAnswer(sendAnswerFn, function (error) { console.log('Failure callback: ' + error); }); } } }; </script> </body> </html>
nodejs的server
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}); // 存储socket的数组,这里只能有2个socket,每次测试需要重启,否则会出错 var wsc = [], index = 1; // 有socket连入 wss.on('connection', function(ws) { console.log('connection'); // 将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 ---(' + otherIndex + '): '); wsc[otherIndex].send(message, function (error) { if (error) { console.log('Send message error (' + desc + '): ', error); } }); }); });
在局域网可以忽略google的stun
一台电脑先打开
192.168.137.27:3000
另一台打开
192.168.137.27:3000#true
iceServer设置成空也行
官方参考
http://www.html5rocks.com/en/tutorials/webrtc/basics/
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
http://blog.csdn.net/liaowenfeng/article/details/18407837
例子
https://apprtc.appspot.com/
例子
http://www.simpl.info/rtcpeerconnection/
git:
https://github.com/andyet/SimpleWebRTC
https://github.com/webRTC-io/webRTC.io