FreeSWITCH學習筆記 第二場 第一個鏡頭 JsSIP初識
阿新 • • 發佈:2019-01-01
官網地址:JsSIP;下載地址:JsSIP下載截至本博文版本為3.1.4;GIT地址:JSSIP原始碼;可以在官網看一下它的DEMO,可以看下官方API文件
FreeSWITCH配置可參見FreeSWITCH學習筆記 第一場 第二個鏡頭 視訊通話配置
- 官方Getting Started程式碼解析
// Create our JsSIP instance and run it
/**
* 建立websocket連線,連線地址最好是wss,本地測試可以使用ws,
* 如果信令服務使用FreeSWITCH,那麼websocket連線地址如下:
* ws://FreeSWITCH所在伺服器IP:5066 或
* wss://FreeSWITCH所在伺服器IP:7443
*/
var socket = new JsSIP.WebSocketInterface('wss://sip.myhost.com');
/**
* User Agent配置引數,sockets表示信令伺服器的連線集合,即可以
* 註冊多個信令伺服器;uri即註冊使用者的SIP地址,password為連線密
* 碼;常用的引數還有register(true/false)表示是否直接註冊;
* no_answer_timeout無應答超時時間等。具體的可參考:
* http://www.jssip.net/documentation/3.0.x/api/ua_configuration_parameters/
*/
var configuration = {
sockets : [ socket ],
uri : 'sip:[email protected]',
password : 'superpassword'
};
//使用上述配置建立User Agent
var ua = new JsSIP.UA(configuration);
/**
* 連線到信令伺服器,如果是之前停止則恢復到停止之前的狀態,如果是重新整理操作‘’
* 而且configuration的register引數設定為true則直接註冊到信令伺服器
*/
ua.start();
// 註冊監聽事件監聽各個連線狀態
var eventHandlers = {
'progress': function(e) {
console.log('call is in progress');
},
'failed': function(e) {
console.log('call failed with cause: '+ e.data.cause);
},
'ended': function(e) {
console.log('call ended with cause: '+ e.data.cause);
},
'confirmed': function(e) {
console.log('call confirmed');
}
};
/**
* 撥打參數配置,eventHandlers是註冊事件監聽的回撥;mediaConstraints
* 是多媒體配置,詳細配置可以參考:https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia;
* pcConfig可以配置ICE伺服器地址,適用於需要穿透的網路環境
*/
var options = {
'eventHandlers' : eventHandlers,
'mediaConstraints' : { 'audio': true, 'video': true },
'pcConfig': {
'iceServers': [
{ 'urls': ['stun:a.example.com', 'stun:b.example.com'] },
{ 'urls': 'turn:example.com', 'username': 'foo', 'credential': ' 1234' }
]
}
};
// 撥打音視訊電話給'sip:[email protected]'
var session = ua.call('sip:[email protected]', options);
- JsSIP多媒體裝置呼叫
如果翻看JsSIP原始碼可以發現類似
navigator.mediaDevices.getUserMedia(mediaConstraints).then().catch()
這樣的程式碼,所以不用懷疑JsSIP需要在支援WebRTC協議的瀏覽器上才能執行,所以Apple Mobile要IOS11以上才OK,但是支援也不是很好,需要適配。具體可以檢視MDN web docs
- WebRTC呼叫攝像頭DEMO
<!DOCTYPE html>
<html>
<head>
<title>WebRTC</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Fly" />
<meta name="description" content="WebRTC DEMO" />
<style type="text/css"></style>
</head>
<body>
<div>
<video id="videoView"></video>
</div>
</body>
<script type="text/javascript">
var constraints = {
audio: true,
video: {
faceMode: 'user'
}
};
// API: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
videoView.srcObject = stream;
document.body.addEventListener('click', function() {
videoView.play();
});
// wait until the video stream is ready for IOS 11.* safari
var interval = setInterval(function(){
if(!videoView.videoWidth){
return;
}
clearInterval(interval);
}, 1000 / 50);
}).catch(function(error){
onError({
name: error.name,
message: error.message
});
});
</script>
</html>
本篇只是簡單介紹了使用到的知識,下一篇文章將詳細介紹接聽處理方式