Nginx 正向代理实现webrtc 语音电话功能

为了这个功能花费了好几天，由于是内网Linux环境，需要的openssl ，nginx，gcc ,pcle不能直接一键下载安装。需要从官网下载源码，上传内网环境，再编译源码。。。。一大波操作下来着实蛋疼。具体操作步骤前几篇文章都有记录，在此做个配置记录，其他就不在累赘了。

步骤总结：

1.下载openssl ，nginx，gcc ,pcle源码上传内网编译，可参考前面几篇文章

具体操作步骤：

1.nginx安装：http://www.xiwenblog.com/archives/2382

2.openssl安装：http://www.xiwenblog.com/archives/2384

2.编译nginx需要开启并指定ssl模块。这个地方坑比较多，也最麻烦。前面文章都有详细记录。

报错具体参考：http://www.xiwenblog.com/archives/2399

3.用openssl 自己签发ssl证书，并配置。ps:外网环境可以直接从阿里，腾讯直接下载安全证书即可。

3.配置nginx代理，需要同时支持http和https，代理wss，代理https

4.修改前端代码，请求路径为https://XXX:443/XX

openssl签发证书：

参考这篇：http://www.xiwenblog.com/archives/2441

Nginx 配置：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

pid        logs/nginx.pid;


events {
    worker_connections  65535;
}


http { 
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  165;

    #gzip  on;


    server {
        #同时监听443和80端口
  	listen    80;
        listen   443 ssl;
        server_name  172.27.240.20;
        # ssl on;
        index  index.htm;	
	ssl_certificate /usr/local/nginx/certificate/server.crt;  #配置自己签发的证书
	ssl_certificate_key /usr/local/nginx/certificate/server.key; 
	ssl_session_timeout  5m;
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	#ssl_ciphers  HIGH:!aNULL:!MD5;
	ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
	ssl_prefer_server_ciphers   on;


         location / {
	   fastcgi_connect_timeout 75;  
       	   fastcgi_read_timeout 600;   
      	   fastcgi_send_timeout 600;   
           add_header Access-Control-Allow-Origin *;
  	   add_header Content-Security-Policy upgrade-insecure-requests; 
    	   add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    	   add_header Access-Control-Allow-Headers 
           'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
   	 
           proxy_set_header X-Forwarded-Proto $scheme;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	   proxy_pass http://172.27.240.20:8080/govern/; ##代理到前端的登录页面
	}


 	location  /govern_server {
	   fastcgi_connect_timeout 75;  
       	   fastcgi_read_timeout 600;   
      	   fastcgi_send_timeout 600;   
                   add_header Access-Control-Allow-Origin *;
  	   add_header Content-Security-Policy upgrade-insecure-requests; 
    	   add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    	   add_header Access-Control-Allow-Headers
            'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
   	   
           proxy_set_header X-Forwarded-Proto $scheme;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	   proxy_pass http://172.27.240.20:8080/govern_server/;#代理后端服务地址 ，需要注意的是前端请求路径需要配置
           为https://XXXXX:443/govern_server
	}

	 location /wss{
                       proxy_redirect off;
             	       proxy_pass http://172.30.129.141:5066;#代理wss
                       proxy_http_version 1.1; 
                       proxy_set_header Connection "upgrade";
                       proxy_set_header Upgrade $http_upgrade;
                       proxy_set_header Host $host;
                       proxy_set_header Remote_addr $remote_addr;
         	       proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
                       proxy_read_timeout 100s;
          }
      }
}

#user nobody;

worker_processes 1;

#error_log logs/error.log;

#error_log logs/error.log notice;

#error_log logs/error.log info;

pid logs/nginx.pid;

events {

worker_connections 65535;

}

http {

include mime.types;

default_type application/octet-stream;

sendfile on;

keepalive_timeout 165;

#gzip on;

server {

#同时监听443和80端口

listen 80;

listen 443 ssl;

server_name 172.27.240.20;

# ssl on;

index index.htm;

ssl_certificate /usr/local/nginx/certificate/server.crt; #配置自己签发的证书

ssl_certificate_key /usr/local/nginx/certificate/server.key;

ssl_session_timeout 5m;

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

#ssl_ciphers HIGH:!aNULL:!MD5;

ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;

ssl_prefer_server_ciphers on;

location / {

fastcgi_connect_timeout 75;

fastcgi_read_timeout 600;

fastcgi_send_timeout 600;

add_header Access-Control-Allow-Origin *;

add_header Content-Security-Policy upgrade-insecure-requests;

add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

add_header Access-Control-Allow-Headers

'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

proxy_set_header X-Forwarded-Proto $scheme;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_pass http://172.27.240.20:8080/govern/; ##代理到前端的登录页面

}

location /govern_server {

fastcgi_connect_timeout 75;

fastcgi_read_timeout 600;

fastcgi_send_timeout 600;

add_header Access-Control-Allow-Origin *;

add_header Content-Security-Policy upgrade-insecure-requests;

add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

add_header Access-Control-Allow-Headers

'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

proxy_set_header X-Forwarded-Proto $scheme;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_pass http://172.27.240.20:8080/govern_server/;#代理后端服务地址，需要注意的是前端请求路径需要配置

为https://XXXXX:443/govern_server

}

location /wss{

proxy_redirect off;

proxy_pass http://172.30.129.141:5066;#代理wss

proxy_http_version 1.1;

proxy_set_header Connection "upgrade";

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Host $host;

proxy_set_header Remote_addr $remote_addr;

proxy_set_header X-Forwarded-For $remote_addr:$remote_port;

proxy_read_timeout 100s;

}

html：

<!DOCTYPE html>
<html>
<head>
  <title>外呼测试</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="Author" content="foruok" />
  <meta name="description" content="JsSIP based example web application." />
  <script src="./jssip.min.js" type="text/javascript"></script>
  <style type="text/css">
  </style>
</head>

<body>

  呼叫号码:<input style="width:100px" id="sip_phone_number" type="text" >
  <button onclick="testStart()"> 注册 </button>
  <button onclick="testCall()"> 呼叫 </button>
  <button onclick="testgua()"> 挂断 </button>
<div >
    <audio id="audioView"  autoplay ></audio>
  </div>



</body>
  　<script src="./webPhone.js"></script>
</html>

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

呼叫号码:<input style="width:100px" id="sip_phone_number" type="text" >

<div >

</div>

</body>

</html>

webphone.js

 var outgoingSession = null;
    var incomingSession = null;
    var currentSession = null;
 var audioView = document.getElementById('audioView');
    var constraints = {
      audio: true,
      video: false
    };
    var localStream = null;

    navigator.mediaDevices.getUserMedia(constraints, 
      function(stream){ 
        console.info('getUserMedia() success: ' + stream);
        localStream =stream;
      }, 
      function(e){
         console.info('getUserMedia() error: ' + e.name);
      });

    
    var userAgent = null;

    function testStart(){

      var sip_uri_ = "sip:9996000@172.30.129.141:5060";
      var sip_password_ = "1234";
      var ws_uri_ = "wss://172.27.240.20/wss"; //用Nginx代理了wss

      JsSIP.C.SESSION_EXPIRES=120;
      JsSIP.C.MIN_SESSION_EXPIRES=120;
      var socket = new JsSIP.WebSocketInterface(ws_uri_);
      var configuration = {
        sockets: [ socket ],
        outbound_proxy_set: ws_uri_,
        uri: sip_uri_,
        password: sip_password_,
        register: true,
        session_timers: false,
        contact_uri: sip_uri_ + ';transport=ws'
      };

      userAgent = new JsSIP.UA(configuration);
      console.log("userAgent:", userAgent);

      userAgent.on('registered', function(data){
        console.info("registered: ", data.response.status_code, ",", data.response.reason_phrase);
        console.info("registered data:", data);
      });

      userAgent.on('registrationFailed', function(data){
        console.log("registrationFailed, ", data);
      });

      userAgent.on('registrationExpiring', function(){
        console.warn("registrationExpiring");
      });

      userAgent.on('newRTCSession', function(data){
      
          console.info('onNewRTCSession: ', data);

          if(data.originator == 'remote'){ //incoming call
            console.info("incomingSession, answer the call");
            incomingSession = data.session;
            data.session.answer({'mediaConstraints' : { 'audio': true, 'video': false}, 'mediaStream': localStream});
          }else{
            console.info("outgoingSession");
            outgoingSession = data.session;
            outgoingSession.on('connecting', function(data){
              console.info('onConnecting - ', data.request);
              currentSession = outgoingSession;
              outgoingSession = null;
            });
          }

          data.session.on('accepted', function(data){
            console.info('onAccepted - ', data);
            console.info("setCurrentSession - ", currentSession);
 
          });

          data.session.on('confirmed', function(data){
            console.info('onConfirmed - ', data);
             const stream = new MediaStream();
            const receivers = currentSession.connection.getReceivers();
            if (receivers) receivers.forEach((receiver) => stream.addTrack(receiver.track));
            debugger;
            let audioView1=new Audio();
            audioView.srcObject = stream;
            //audioView1.play();
          });

          data.session.on('sdp', function(data){     
            console.info('onSDP, type - ', data.type, ' sdp - ', data.sdp);
          });

          data.session.on('progress', function(data){
            console.info('onProgress - ', data);
          });

      });


      userAgent.start();
    }

    // Register callbacks to desired call events
    var eventHandlers = {
      'progress': function(e) {
          console.log('call progress:',e);
        },
      'failed': function(e) {
          console.log('call failed:', e);
      },
      'ended': function(e) {
          console.log('call ended :', e);
      },
      'confirmed': function(e) {
        console.log('call confirmed:',e);
      }
    };

    function testCall(){
      //var sip_phone_number_ = "sip:0"+ document.getElementById("sip_phone_number").value.toString() + "@172.30.129.141:6060";
      var sip_phone_number_ = "sip:0"+ "15509509252" + "@172.30.129.141:6060";
      var options = {
        'eventHandlers'    : eventHandlers,
        'mediaConstraints' : { 'audio': true, 'video': false },
        'mediaStream': localStream
      };

      outgoingSession = userAgent.call(sip_phone_number_, options);

    }

    function testgua(){
       userAgent.terminateSessions(function(e) {
        console.log('terminateSessions:',e);
      });
    }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

var outgoingSession = null;

var incomingSession = null;

var currentSession = null;

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

var constraints = {

audio: true,

video: false

};

var localStream = null;

navigator.mediaDevices.getUserMedia(constraints,

function(stream){

console.info('getUserMedia() success: ' + stream);

localStream =stream;

function(e){

console.info('getUserMedia() error: ' + e.name);

});

var userAgent = null;

function testStart(){

var sip_uri_ = "sip:9996000@172.30.129.141:5060";

var sip_password_ = "1234";

var ws_uri_ = "wss://172.27.240.20/wss"; //用Nginx代理了wss

JsSIP.C.SESSION_EXPIRES=120;

JsSIP.C.MIN_SESSION_EXPIRES=120;

var socket = new JsSIP.WebSocketInterface(ws_uri_);

var configuration = {

sockets: [ socket ],

outbound_proxy_set: ws_uri_,

uri: sip_uri_,

password: sip_password_,

session_timers: false,

contact_uri: sip_uri_ + ';transport=ws'

};

userAgent = new JsSIP.UA(configuration);

console.log("userAgent:", userAgent);

userAgent.on('registered', function(data){

console.info("registered: ", data.response.status_code, ",", data.response.reason_phrase);

console.info("registered data:", data);

});

userAgent.on('registrationFailed', function(data){

console.log("registrationFailed, ", data);

});

userAgent.on('registrationExpiring', function(){

console.warn("registrationExpiring");

});

userAgent.on('newRTCSession', function(data){

console.info('onNewRTCSession: ', data);

if(data.originator == 'remote'){ //incoming call

console.info("incomingSession, answer the call");

incomingSession = data.session;

data.session.answer({'mediaConstraints' : { 'audio': true, 'video': false}, 'mediaStream': localStream});

}else{

console.info("outgoingSession");

outgoingSession = data.session;

outgoingSession.on('connecting', function(data){

console.info('onConnecting - ', data.request);

currentSession = outgoingSession;

outgoingSession = null;

});

}

data.session.on('accepted', function(data){

console.info('onAccepted - ', data);

console.info("setCurrentSession - ", currentSession);

});

data.session.on('confirmed', function(data){

console.info('onConfirmed - ', data);

const stream = new MediaStream();

const receivers = currentSession.connection.getReceivers();

if (receivers) receivers.forEach((receiver) => stream.addTrack(receiver.track));

debugger;

let audioView1=new Audio();

audioView.srcObject = stream;

//audioView1.play();

});

data.session.on('sdp', function(data){

console.info('onSDP, type - ', data.type, ' sdp - ', data.sdp);

});

data.session.on('progress', function(data){

console.info('onProgress - ', data);

});

userAgent.start();

}

// Register callbacks to desired call events

var eventHandlers = {

'progress': function(e) {

console.log('call progress:',e);

'failed': function(e) {

console.log('call failed:', e);

'ended': function(e) {

console.log('call ended :', e);

'confirmed': function(e) {

console.log('call confirmed:',e);

}

};

function testCall(){

//var sip_phone_number_ = "sip:0"+ document.getElementById("sip_phone_number").value.toString() + "@172.30.129.141:6060";

var sip_phone_number_ = "sip:0"+ "15509509252" + "@172.30.129.141:6060";

var options = {

'eventHandlers' : eventHandlers,

'mediaConstraints' : { 'audio': true, 'video': false },

'mediaStream': localStream

};

outgoingSession = userAgent.call(sip_phone_number_, options);

}

function testgua(){

userAgent.terminateSessions(function(e) {

console.log('terminateSessions:',e);

});

}

jssip.min.js—–官网下载

Post Views: 815

2024年4月
一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30