修改webrtc
This commit is contained in:
lilong@dgg.net
parent
cef329a79d
commit
f72f7e5fcf
|
|
@ -0,0 +1,193 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
|
||||
<script src="/layuiadmin/layui/layui.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md4 layui-col-lg-offset4">
|
||||
<form class="layui-form">
|
||||
<video autoplay style="display: none" id="myVideo"></video>
|
||||
<div class="layui-form-item">
|
||||
<label for="" class="layui-form-label">WSS</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" class="layui-input" value="testcall.shupian.cn:7443" id="wss">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label for="" class="layui-form-label">uri</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" class="layui-input" value="192.168.254.216:2088" id="uri">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label for="" class="layui-form-label">外呼号</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" class="layui-input" value="" id="username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label for="" class="layui-form-label">密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" class="layui-input" value="" id="password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label for="" class="layui-form-label"></label>
|
||||
<div class="layui-input-block">
|
||||
<button type="button" class="layui-btn layui-btn-sm" id="regBtn">注册</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm" id="unRegBtn">注销</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="hupBtn">挂断
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label for="" class="layui-form-label">注册状态</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-word-aux layui-form-mid">
|
||||
<span class="layui-badge layui-bg-green" id="regStatus">未注册</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label for="" class="layui-form-label">呼叫状态</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-word-aux layui-form-mid">
|
||||
<span class="layui-badge layui-bg-cyan" id="callStatus">空闲</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./jssip-3.7.4.min.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '/layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index', //主入口模块
|
||||
}).use(['element', 'form', 'layer', 'table', 'upload', 'laydate', 'jquery'], function () {
|
||||
var $ = layui.jquery;
|
||||
var form = layui.form;
|
||||
var table = layui.table;
|
||||
|
||||
|
||||
var currentSession = null
|
||||
var userAgent
|
||||
var conf
|
||||
|
||||
$("#regBtn").click(function () {
|
||||
conf = {
|
||||
"wss": $("#wss").val(),
|
||||
"uri": $("#uri").val(),
|
||||
"username": $("#username").val(),
|
||||
"password": $("#password").val(),
|
||||
}
|
||||
var socket = new JsSIP.WebSocketInterface('wss://' + conf.wss);
|
||||
var configuration = {
|
||||
sockets: [socket],
|
||||
uri: 'sip:' + conf.username + '@' + conf.uri,
|
||||
password: conf.password
|
||||
};
|
||||
userAgent = new JsSIP.UA(configuration);
|
||||
|
||||
// websocket
|
||||
userAgent.on('connected', function (e) {
|
||||
console.log('jssip websocket已连接')
|
||||
});
|
||||
userAgent.on('disconnected', function (e) {
|
||||
console.log('jssip websocket已断开')
|
||||
});
|
||||
|
||||
// 来电监听
|
||||
userAgent.on('newRTCSession', function (data) {
|
||||
// 服务器呼叫该分机
|
||||
if (data.originator === 'remote') {
|
||||
layer.msg('有新的来电，系统为您自动接听')
|
||||
currentSession = data.session
|
||||
currentSession.answer({
|
||||
'mediaConstraints': {'audio': true, 'video': true}
|
||||
})
|
||||
//Fired when the call is accepted (2XX received/sent).
|
||||
currentSession.on('accepted', function () {
|
||||
console.log('已接听')
|
||||
$("#callStatus").text('通话中')
|
||||
})
|
||||
//Fired when the call is confirmed (ACK received/sent).
|
||||
currentSession.on('confirmed', function () {
|
||||
console.log('ACK确认')
|
||||
const stream = new MediaStream();
|
||||
const receivers = currentSession.connection.getReceivers();
|
||||
if (receivers) {
|
||||
receivers.forEach(function (receiver,index) {
|
||||
stream.addTrack(receiver.track)
|
||||
})
|
||||
}
|
||||
|
||||
document.getElementById("myVideo").srcObject = stream;
|
||||
})
|
||||
//Fired when an established call ends.
|
||||
currentSession.on('ended', function () {
|
||||
console.log('呼叫结束')
|
||||
$("#callStatus").text('结束')
|
||||
currentSession = null
|
||||
})
|
||||
//Fired when the session was unable to establish.
|
||||
currentSession.on('failed', function () {
|
||||
console.log('通话失败')
|
||||
$("#callStatus").text('通话失败')
|
||||
currentSession = null
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 注册信息
|
||||
userAgent.on('registered', function (e) {
|
||||
$("#regStatus").text('已注册')
|
||||
});
|
||||
userAgent.on('unregistered', function (e) {
|
||||
$("#regStatus").text('未注册')
|
||||
});
|
||||
userAgent.on('registrationFailed', function (e) {
|
||||
$("#regStatus").text('注册失败')
|
||||
console.log(e)
|
||||
});
|
||||
userAgent.start()
|
||||
})
|
||||
|
||||
$("#unRegBtn").click(function () {
|
||||
if (userAgent !== undefined) {
|
||||
userAgent.unregister({
|
||||
all: true
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
$("#hupBtn").click(function () {
|
||||
if (currentSession !== null) {
|
||||
currentSession.terminate()
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -33,19 +33,18 @@
|
|||
</li>
|
||||
<li class="layui-nav-item" lay-unselect>
|
||||
<a href="javascript:;" >
|
||||
<video id="remoteVideo" style="display: none" ></video>
|
||||
<video id="localVideo" style="display: none" muted="muted"></video>
|
||||
<video id="myVideo" autoplay style="display: none" ></video>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
|
||||
<li class="layui-nav-item" lay-unselect >
|
||||
<a href="javascript:;" id="call-status" style="width: 50px" ></a>
|
||||
<a href="javascript:;" id="callStatus" style="width: 50px" ></a>
|
||||
</li>
|
||||
<li class="layui-nav-item" lay-unselect>
|
||||
<a href="javascript:;">
|
||||
<cite id="sip-status">
|
||||
<cite id="regStatus">
|
||||
@if($data['sip_id'])
|
||||
外呼号：{{$data['username']}}
|
||||
@else
|
||||
|
|
@ -215,7 +214,7 @@
|
|||
</div>
|
||||
|
||||
<script src="/layuiadmin/layui/layui.js"></script>
|
||||
<script src="/webrtc/sip-0.7.0.js"></script>
|
||||
<script src="/webrtc/jssip-3.7.4.min.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '/layuiadmin/' //静态资源所在路径
|
||||
|
|
@ -252,91 +251,99 @@
|
|||
})
|
||||
|
||||
@if(isset($data['sip_id'])&&$data['sip_id'])
|
||||
//获取浏览器麦克风权限
|
||||
navigator.mediaDevices.getUserMedia({audio: true, video: true});
|
||||
var userAgentSession;
|
||||
var userAgent;
|
||||
function initUserAgent(){
|
||||
userAgent = new SIP.UA({
|
||||
uri: '{{$data["uri"]}}',
|
||||
wsServers: ['wss://{{$data["wss_url"]}}:7443'],
|
||||
authorizationUser: '{{$data["username"]}}',
|
||||
password: '{{$data["password"]}}',
|
||||
displayName: '{{$data["username"]}}',
|
||||
hackIpInContact: true,
|
||||
rtcpMuxPolicy: 'negotiate',
|
||||
hackWssInTransport: true,
|
||||
rel100: SIP.C.supported.SUPPORTED,
|
||||
log: {
|
||||
level: 0, //日志等级
|
||||
},
|
||||
/**
|
||||
* sip.js生成的随机contact字符串 设置后会以此为后缀 可以搭配 cusContactName使用,根据自身业务进行使用
|
||||
* 设置前: sofia/internal/sip:admin10@df7jal23ls0d.invalid;
|
||||
* 设置后: sofia/internal/sip:admin10@192.168.0.253;
|
||||
*
|
||||
*
|
||||
hackIpInContact: "106.13.223.129",
|
||||
userAgentString: "myAwesomeApp",
|
||||
registerOptions: {
|
||||
expires: 300,
|
||||
registrar: 'sip:xdwh.dgg.net',
|
||||
},
|
||||
**
|
||||
* 此处是笔者自定义的参数,因为注册到fs时,sip.js会随机生成contact字符串,如:sofia/internal/sip:admin10@df7jal23ls0d.invalid;
|
||||
* 笔者自己添加了一个参数,对sip.js的源码进行了修改 ,修改后效果 sofia/internal/sip:1012@192.168.0.253 不需要的可以不理会此参数
|
||||
* 此处纠正问题,官方提供了一个参数[contactName],使用此参数即可,sip.js使用官方的即可
|
||||
* contactName:"1012"
|
||||
*/
|
||||
contactName:"1001"
|
||||
var currentSession = null
|
||||
var userAgent
|
||||
var conf = {
|
||||
"wss": '{{$data["wss_url"]}}:7443',
|
||||
"uri": '{{$data["uri"]}}',
|
||||
"username": '{{$data["username"]}}',
|
||||
"password": '{{$data["password"]}}',
|
||||
}
|
||||
$("#regBtn").click(function () {
|
||||
var socket = new JsSIP.WebSocketInterface('wss://' + conf.wss);
|
||||
var configuration = {
|
||||
sockets: [socket],
|
||||
uri: 'sip:' + conf.uri,
|
||||
password: conf.password
|
||||
};
|
||||
userAgent = new JsSIP.UA(configuration);
|
||||
|
||||
// websocket
|
||||
userAgent.on('connected', function (e) {
|
||||
console.log('jssip websocket已连接')
|
||||
});
|
||||
//注册成功
|
||||
userAgent.on('disconnected', function (e) {
|
||||
console.log('jssip websocket已断开')
|
||||
});
|
||||
|
||||
// 来电监听
|
||||
userAgent.on('newRTCSession', function (data) {
|
||||
// 服务器呼叫该分机
|
||||
if (data.originator === 'remote') {
|
||||
layer.msg('有新的来电，系统为您自动接听')
|
||||
currentSession = data.session
|
||||
currentSession.answer({
|
||||
'mediaConstraints': {'audio': true, 'video': true}
|
||||
})
|
||||
//Fired when the call is accepted (2XX received/sent).
|
||||
currentSession.on('accepted', function () {
|
||||
console.log('已接听')
|
||||
$("#callStatus").text('通话中')
|
||||
})
|
||||
//Fired when the call is confirmed (ACK received/sent).
|
||||
currentSession.on('confirmed', function () {
|
||||
console.log('ACK确认')
|
||||
const stream = new MediaStream();
|
||||
const receivers = currentSession.connection.getReceivers();
|
||||
if (receivers) {
|
||||
receivers.forEach(function (receiver,index) {
|
||||
stream.addTrack(receiver.track)
|
||||
})
|
||||
}
|
||||
document.getElementById("myVideo").srcObject = stream;
|
||||
//添加挂机
|
||||
$("#callStatus").html('<span class="layui-badge">挂断</span>')
|
||||
$("#callStatus span").click(function () {
|
||||
currentSession.terminate()
|
||||
})
|
||||
})
|
||||
//Fired when an established call ends.
|
||||
currentSession.on('ended', function () {
|
||||
console.log('呼叫结束')
|
||||
$("#callStatus").text('通话结束')
|
||||
currentSession = null
|
||||
})
|
||||
//Fired when the session was unable to establish.
|
||||
currentSession.on('failed', function () {
|
||||
console.log('通话失败')
|
||||
$("#callStatus").text('通话失败')
|
||||
currentSession = null
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// 注册信息
|
||||
userAgent.on('registered', function (e) {
|
||||
$('#sip-status').text($("#regBtn").text());
|
||||
$("#regStatus").text('在线')
|
||||
});
|
||||
//未注册成功
|
||||
userAgent.on('unregistered', function () {
|
||||
$('#sip-status').text($("#unregBtn").text());
|
||||
$('#sip-status').click(function () {
|
||||
return;
|
||||
})
|
||||
userAgent.on('unregistered', function (e) {
|
||||
$("#regStatus").text('离线')
|
||||
});
|
||||
//监听来电
|
||||
userAgent.on('invite', function (session) {
|
||||
userAgentSession = session;
|
||||
userAgentSession.on('terminated', function (message, cause) {//结束
|
||||
$("#call-status").html("")
|
||||
layer.msg("通话结束");
|
||||
});
|
||||
userAgentSession.accept({
|
||||
media: {
|
||||
render: {
|
||||
remote: document.getElementById('remoteVideo'),
|
||||
local: document.getElementById('localVideo')
|
||||
},
|
||||
constraints: {
|
||||
audio: true,
|
||||
video: false
|
||||
}
|
||||
}
|
||||
});
|
||||
layer.msg("新的来电系统已为您自动接听");
|
||||
$("#call-status").html('<span class="layui-badge">挂断</span>')
|
||||
$("#call-status span").click(function () {
|
||||
if(userAgent){
|
||||
userAgentSession.terminate()
|
||||
}
|
||||
})
|
||||
userAgent.on('registrationFailed', function (e) {
|
||||
$("#regStatus").text('注册失败')
|
||||
console.log(e)
|
||||
});
|
||||
userAgent.start()
|
||||
}
|
||||
|
||||
$("#regBtn").click(function () {
|
||||
initUserAgent();
|
||||
userAgent.register();
|
||||
})
|
||||
|
||||
$("#unregBtn").click(function () {
|
||||
if(userAgent){
|
||||
userAgent.unregister()
|
||||
if (userAgent !== undefined) {
|
||||
userAgent.unregister({
|
||||
all: true
|
||||
})
|
||||
}
|
||||
})
|
||||
@endif
|
||||
|
|
|
|||
Loading…
Reference in New Issue