jssip音视频及短信开发demo（中文注释完整版）

完整案例demo下载地址：http://download.csdn.net/download/qq_39421580/10214712

<!DOCTYPE html>

<head>

<title>音视频及短信jssip</title>

</head>

<body>

<span class="font_vta">Vtalk_</span>

</div>

</div>

</div>

短信消息

</div>

</div>

正在与<span id='youVideoIng'></span>视频通话中...

</div>

</div>

</div>

</div>

</body>

</html>

以下是js部分：

$(function () {

var outgoingSession = null;

var incomingSession = null;

var currentSession = null;

// 右侧视频区start

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

meVideo.setAttribute('autoplay', '');

meVideo.setAttribute('playsinline', '');

meVideo.style.width = '212px';

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

youVideo.setAttribute('autoplay', '');

youVideo.setAttribute('playsinline', '');

youVideo.style.width = '531px';

var constraints = {

audio: true,

video: {

faceMode: 'user'

}

};

var localStream = null;

var userAgent = null;

navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {

meVideo.srcObject = stream;

document.body.addEventListener('click', function () {

meVideo.play();

});

// 等到视频流准备好了

var interval = setInterval(function () {

if (!meVideo.videoWidth) {

return;

}

//stage.appendChild(videoView);

clearInterval(interval);

}, 1000 / 50);

}).catch(function (error) {

onError({

name: error.name,

message: error.message

});

//右侧视频区end

//短信息发送

function addToChat(msg, data) {

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

if (msg == '') {

return;

} else {

msg = sanitize(msg);

if (data == undefined) {

msg = '<strong style="position: absolute;right: 15px;">' + msg + '<img src="data:images/me.png" style="width:20px;">' + '</strong>';

} else {

msg = '<span style="position: absolute;left: 15px;">' + '<img src="data:images/you.png"style="width:20px;">' + msg + '</span>';

}

messages.innerHTML = messages.innerHTML + msg + '<br>';

messages.scrollTop = 10000;

}

//视频短信

function addToChatVideo(msg, data) {

var messages = document.getElementById('messages_video');

if (msg == '') {

return;

} else {

msg = sanitize(msg);

if (data == undefined) {

msg = '<strong style="position: absolute;right: 15px;">' + msg + '<img src="data:images/me.png"style="width:20px;">' + '</strong>';

} else {

msg = '<span style="position: absolute;left: 15px;">' + '<img src="data:images/you.png"style="width:20px;">' + msg + '</span>';

}

messages.innerHTML = messages.innerHTML + msg + '<br>';

messages.scrollTop = 10000;

}

function sanitize(msg) {

return msg.replace(/</g, '<');

}

//点击下一步

$('#me_next_step').on('click', function () {

// 进行验证

var me_uri = $('#me_uri').val();

if (me_uri == '') {

toastr.warning('请输入您的电话号码!');

return;

} else if (specialVerificationName(me_uri)) {

toastr.warning('输入号码不能有特殊字符，请输入正确的号码！');

return;

} else if (me_uri < 1000) {

toastr.warning('号码不能小于1000，请重新输入！');

$('#me_uri').val(null)

return;

} else {

// 点击下一步验证自己的号码是否存在或者注册

var me_uri = document.getElementById("me_uri").value.toString();

$.ajax({

url: "http://172.16.250.131:8080/freeswitch/myPhoneNum",

type: "GET",

dataType: "jsonp",

data: {

result: me_uri

success: function (data) {

console.log(data)

if (data.result == "userOnline") {

toastr.warning('用户正在被使用,请使用其他号码！');

return;

} else {

$('.me_uri').css('display', 'none')

$('.you_uri').css('display', 'block')

$('.device_M').css('display', 'block')

$('.device_V').css('display', 'block')

$('.device_C').css('display', 'block')

$('.me_last_step').css('display', 'block')

$('#me_next_step').css('display', 'none')

// 进行号码登录注册

var me_uri = document.getElementById("me_uri").value.toString();

var me_uri_joint = 'sip:' + me_uri + '@172.16.250.131:5060'

var ws_uri = 'ws://172.16.250.131:5066'

// 创建websocket

var socket = new JsSIP.WebSocketInterface(ws_uri);

// 配置参数

var configuration = {

sockets: [socket],

outbound_proxy_set: ws_uri,

uri: me_uri_joint,

password: '5678',

session_timers: false //启用会话定时器,默认值是true。

};

// 配置创建user agent

userAgent = new JsSIP.UA(configuration);

//成功注册成功

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

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

});

//由于注册失败而被解雇

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

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

});

// 在注册期间发射几秒钟，如果应用程序没有为这个事件设置任何监听器，JsSIP将像往常一样重新注册。

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

console.warn("registrationExpiring");

});

//为传入或传出的会话/呼叫。

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

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

if (data.originator == 'remote') {

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

incomingSession = data.session;

data.session.answer({ 'mediaConstraints': constraints, 'mediaStream': null });

if (constraints.video == false) {

//对方打入，显示接听电话按钮

$('.device_module').css('display', 'none')

$('.device_module_call').css('display', 'block')

$('.callPhoneRedColor').css('display', 'block')

$('.callPhoneRedGreen').css('display', 'block')

$('.callPhoneRedGreen').css('opacity', 0.5)

var youCallSlice = data.request.headers.From['0'].raw;

youCallSlice = youCallSlice.substring(youCallSlice.indexOf('sip:'), youCallSlice.indexOf('@'));

youCallSlice = youCallSlice.replace('sip:', '')

$('#you_uri').val(youCallSlice)

constraints = {

audio: true,

video: {

faceMode: 'user'

}

};

} else {

var youCallSlice = data.request.headers.From['0'].raw;

youCallSlice = youCallSlice.substring(youCallSlice.indexOf('sip:'), youCallSlice.indexOf('@'));

youCallSlice = youCallSlice.replace('sip:', '')

$('#youVideoIng').text(youCallSlice)

$('#you_uri').val(youCallSlice)

$('.demo_1').css('display', 'none')

$('#chatbox_video').css('display', 'block')

}

} else {

var youCallSlice = $('#you_uri').val();

$('#youVideoIng').text(youCallSlice)

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);

if (data.originator == 'remote' && currentSession == null) {

currentSession = incomingSession;

incomingSession = null;

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

}

});

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

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

if (data.originator == 'remote' && currentSession == null) {

// alert(1)

currentSession = incomingSession;

incomingSession = null;

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

}

});

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

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

//data.sdp = data.sdp.replace('UDP/TLS/RTP/SAVPF', 'RTP/SAVPF');

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

});

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

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

if (data.originator == 'remote') {

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

}

});

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

console.info('onPeerconnection - ', data.peerconnection);

data.peerconnection.onaddstream = function (ev) {

console.info('onaddstream from remote - ', ev);

youVideo.srcObject = ev.stream;

document.body.addEventListener('click', function () {

meVideo.play();

});

// 等到视频流准备好了

var interval = setInterval(function () {

if (!meVideo.videoWidth) {

return;

}

//stage.appendChild(videoView);

clearInterval(interval);

}, 1000 / 50);

};

});

//新消息

//为传入或传出的MESSAGE请求而开火。

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

if (data.originator == 'local') {

console.info('onNewMessage , OutgoingRequest - ', data.request);

} else {

console.info('onNewMessage , IncomingRequest - ', data.request);

if (data.message.content != undefined) {

//短信

addToChat(data.message.content,data)

//短信和视频

addToChatVideo(data.message.content,data)

} else {

//短信

addToChat(data.request.body,data)

//短信和视频

addToChatVideo(data.request.body,data)

}

});

console.info("call register");

/**

* 连接到信令服务器，如果是之前停止则恢复到停止之前的状态，如果是刷新操作‘’

* 而且configuration的register参数设置为true则直接注册到信令服务器

userAgent.start();

}

error: function (err) {

toastr.error('连接失败!')

}

});

}

//点击视频左边短信进行一对一发送消息

//发送即时消息

var contentType = "text/plain";

var text = document.getElementById("chatinput_video");

// 消息发送sendMessage（）

text.addEventListener('keydown', function (event) {

var you_uri = document.getElementById("you_uri").value.toString();

var you_uri_joint = 'sip:' + you_uri + '@172.16.250.131:5060';

var key = event.which || event.keyCode;

if (key === 13) {

var options = {

'eventHandlers': eventHandlers

};

userAgent.sendMessage(you_uri_joint, text.value, options);

addToChatVideo(text.value);

text.value = "";

}

}, false);

//点击发送功能

$('#chatbutton_video').on('click', function () {

var you_uri = document.getElementById("you_uri").value.toString();

var you_uri_joint = 'sip:' + you_uri + '@172.16.250.131:5060';

var options = {

'eventHandlers': eventHandlers

};

userAgent.sendMessage(you_uri_joint, text.value, options);

addToChatVideo(text.value);

text.value = "";

})

//左侧短信发送功能end

// 点击静音按钮

$('.glyphicon-volume-down').on('click',function(){

var options = {

audio:true

}

userAgent.mute(options)

})

// 注册监听事件监听各个连接状态

var eventHandlers = {

'progress': function (e) {

console.log('call is in progress');

'failed': function (e) {

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

alert('呼叫失败');

'ended': function (e) {

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

$('#chatbox_video').css('display', 'none');

$('.demo_1').css('display', 'block');

toastr.warning('已挂断！');

'confirmed': function (e) {

console.log('call confirmed' + 'yunfei');

'succeeded': function (e) { // Your code here

console.log('发送成功！')

'failed': function (e) { // Your code here

console.log('发送失败！')

}

};

//点击M发短信

$('.device_M').on('click', function () {

//点击M进行验证查询

var you_uri = $('#you_uri').val();

var me_uri = $('#me_uri').val();

if (you_uri == '') {

toastr.warning('请输入对方电话号码!');

return;

} else if (you_uri < 1000) {

toastr.warning('号码不能小于1000，请重新输入！');

$('#you_uri').val(null)

return;

} else if (specialVerificationName(you_uri)) {

toastr.warning('输入号码不能有特殊字符，请输入正确的号码！');

return;

} else if (you_uri == me_uri) {

toastr.warning('不能输入自己的电话号码!');

return;

} else {

var you_uri = document.getElementById("you_uri").value.toString();

$.ajax({

url: "http://172.16.250.131:8080/freeswitch/youPhoneNum",

type: "GET",

dataType: "jsonp",

data: {

result: you_uri

success: function (data) {

console.log(data)

if (data.result == "userNotOnline") {

toastr.warning('用户不在线');

return;

} else if (data.result == "userNotExist") {

toastr.warning('用户不存在');

return;

} else if (data.result == "busy") {

toastr.warning('用户正在通话中...');

return;

} else {

$('.demo_1').css('display', 'none');

$('#chatbox_message').css('display', 'block');

//发送即时消息

var contentType = "text/plain";

var text = document.getElementById("chatinput");

// 消息发送sendMessage（）

text.addEventListener('keydown', function (event) {

var you_uri = document.getElementById("you_uri").value.toString();

var you_uri_joint = 'sip:' + you_uri + '@172.16.250.131:5060';

var key = event.which || event.keyCode;

if (key === 13) {

var options = {

'eventHandlers': eventHandlers

};

userAgent.sendMessage(you_uri_joint, text.value, options);

addToChat(text.value);

text.value = "";

}

}, false);

//点击发送功能

$('#chatbutton').on('click', function () {

var you_uri = document.getElementById("you_uri").value.toString();

var you_uri_joint = 'sip:' + you_uri + '@172.16.250.131:5060';

var options = {

'eventHandlers': eventHandlers

};

userAgent.sendMessage(you_uri_joint, text.value, options);

addToChat(text.value);

text.value = "";

})

}

error: function () {

toastr.error('连接失败!')

}

})

}

})

//点击短信关闭按钮返回页面

$('.deaderMessages_symbol').on('click', function () {

$('.demo_1').css('display', 'block');

$('#chatbox_message').css('display', 'none');

var me_uri = document.getElementById("me_uri").value.toString();

$.ajax({

url: 'http://172.16.250.131:8080/freeswitch/killCallByNum?command=' + me_uri,

type: "post",

dataType: 'jsonp'

});

$('#messages_video').text('');

$('#messages').text('');

})

//点击V视频

$('.device_V').on('click', function () {

//点击V进行验证查询

var you_uri = $('#you_uri').val();

var me_uri = $('#me_uri').val();

if (you_uri == '') {

toastr.warning('请输入对方电话号码!');

return;

} else if (you_uri == me_uri) {

toastr.warning('不能输入自己的电话号码!');

return;

} else if (you_uri < 1000) {

toastr.warning('号码不能小于1000，请重新输入！');

$('#you_uri').val(null)

return;

} else if (specialVerificationName(you_uri)) {

toastr.warning('输入号码不能有特殊字符，请输入正确的号码！');

return;

} else {

var you_uri = document.getElementById("you_uri").value.toString();

$.ajax({

url: "http://172.16.250.131:8080/freeswitch/youPhoneNum",

type: "GET",

dataType: "jsonp",

data: {

result: you_uri

success: function (data) {

if (data.result == "userNotOnline") {

toastr.warning('用户不在线');

return;

} else if (data.result == "userNotExist") {

toastr.warning('用户不存在');

return;

} else if (data.result == "busy") {

toastr.warning('用户正在通话中...');

return;

} else {

$('.demo_1').css('display', 'none');

$('#chatbox_video').css('display', 'block');

//左侧短信发送功能start

//右侧视频功能start

//视频

var you_uri = document.getElementById("you_uri").value.toString();

var you_uri_joint = 'sip:' + you_uri + '@172.16.250.131:5060';

/**

* 拨打参数配置，eventHandlers是注册事件监听的回调；mediaConstraints

* 是多媒体配置，详细配置可以参考：https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia；

* pcConfig可以配置ICE服务器地址，适用于需要穿透的网络环境

var options = {

'eventHandlers': eventHandlers,

'mediaConstraints': constraints,

'mediaStream': null,

};

// 拨打音视频电话给'sip:bob@example.com'

outgoingSession = userAgent.call(you_uri_joint, options);

//右侧视频功能end

}

error: function () {

toastr.error('连接失败!')

}

})

}

})

//点击短信与视频通话关闭按钮返回页面

$('.deaderMessages_symbol_video').on('click', function () {

$('.demo_1').css('display', 'block');

$('#chatbox_video').css('display', 'none');

var me_uri = document.getElementById("me_uri").value.toString();

$.ajax({

url: 'http://172.16.250.131:8080/freeswitch/killCallByNum?command=' + me_uri,

type: "post",

dataType: 'jsonp'

});

$('#messages_video').text('');

$('#messages').text('');

})

//点击C通话

$('.device_C').on('click', function () {

var you_uri = $('#you_uri').val();

var me_uri = $('#me_uri').val();

if (you_uri == '') {

toastr.warning('请输入对方电话号码!');

return;

} else if (you_uri == me_uri) {

toastr.warning('不能输入自己的电话号码!');

return;

} else if (you_uri < 1000) {

toastr.warning('号码不能小于1000，请重新输入！');

$('#you_uri').val(null)

return;

} else if (specialVerificationName(you_uri)) {

toastr.warning('输入号码不能有特殊字符，请输入正确的号码！');

return;

} else {

//点击C进行验证查询

var you_uri = document.getElementById("you_uri").value.toString();

$.ajax({

url: "http://172.16.250.131:8080/freeswitch/youPhoneNum",

type: "GET",

dataType: "jsonp",

data: {

result: you_uri

success: function (data) {

if (data.result == "userNotOnline") {

toastr.warning('用户不在线');

return;

} else if (data.result == "userNotExist") {

toastr.warning('用户不存在');

return;

} else if (data.result == "busy") {

toastr.warning('用户正在通话中...');

return;

} else {

var me_uri = document.getElementById("me_uri").value.toString()

$.ajax({

url: "http://172.16.250.131:8080/freeswitch/showPhoneStatus",

type: "GET",

dataType: "jsonp",

data: {

result: me_uri

success: function (data) {

if (data.result == "busy") {

toastr.warning('对方正在通话...')

} else {

$('.you_uri_call').css('display', 'block')

$('.device_module').css('display', 'none')

$('.me_last_step').css('display', 'none')

$('.device_module_call').css('display', 'block')

$('.callPhoneRedColor').css('display', 'block')

$('.callPhoneRedGreen').css('display', 'block')

//拨打电话隐藏接听按钮

$('.callPhoneRedGreen').css('opacity', 0.5)

//点击C按钮，拨打语音电话

var callYouUri = document.getElementById("you_uri").value.toString();

var callYouUri_joint = 'sip:' + callYouUri + '@172.16.250.131:5060';

var constraints = {

audio: true,

video: false

};

var options = {

'eventHandlers': eventHandlers,

'mediaConstraints': constraints,

'mediaStream': null

};

outgoingSession = userAgent.call(callYouUri_joint, options);

}

error: function (err) {

toastr.error('连接失败!')

}

});

}

error: function () {

toastr.error('连接失败!')

}

})

}

})

//点击电话通话挂断返回上一层

$('.callPhoneRedColor').on('click', function () {

$('.you_uri').css('display', 'block')

$('.you_uri_call').css('display', 'none')

$('.device_module').css('display', 'block')

$('.me_last_step').css('display', 'block')

$('.device_module_call').css('display', 'none')

$('.callPhoneRedColor').css('display', 'none')

$('.callPhoneRedGreen').css('display', 'none')

})

//点击视频挂断

$('.glyphicon-off').on('click', function () {

var me_uri = document.getElementById("me_uri").value.toString();

$.ajax({

url: 'http://172.16.250.131:8080/freeswitch/killCallByNum?command=' + me_uri,

type: "post",

dataType: 'jsonp'

});

//点击挂断按钮清空左侧信息

$('#messages_video').text('');

$('#messages').text('');

$('#chatbox_video').css('display', 'none');

$('.demo_1').css('display', 'block');

})

//点击语音进行挂断，获取本地输入的uri

$('.callPhoneRedColor').on('click', function () {

var me_uri = document.getElementById("me_uri").value.toString();

$.ajax({

url: 'http://172.16.250.131:8080/freeswitch/killCallByNum?command=' + me_uri,

type: "post",

dataType: 'jsonp'

});

})

/**

* 过滤所有特殊字符串和空格

* @param s

* @returns {boolean}

function specialVerificationName(s) {

var pattern = new RegExp("[`~ !@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")

return pattern.test(s)

}

})

jssip音视频及短信开发demo（中文注释完整版）的更多相关文章

2018阿里云短信发送DEMO接入简单实例
以下更新2018-04-2309:57:54 后续不再更新, 基本类: app/SignatureHelper.php <?php namespace aliyun_mns; /** * 签名助 ...
百度api短信开发
公司原来有一个短信发送的功能,是调用第三方的,但是很不稳定,时不时就收不到短信,但是钱已经扣了.对于这样的事,谁都忍受不了的.于是想找一个稳定短信发送平台,第一想到的是阿里云,百度.在这两个平台上公司 ...
PHP接入阿里云市场阿里短信服务DEMO
阿里短信服务:支持三大运营商短信.智能管道等优质能力,产品特点:3秒可达.99%到达率.超低资费. 使用阿里短信服务步骤: 1.购买服务到https://market.aliyun.com/prod ...
ASP版_阿里大于短信API Demo
阿里大于申请地址:http://www.alidayu.com 阿里大于短信发送Demo: ******index.asp************* <%@LANGUAGE="VBSC ...
电子书下载：Delphi XE 5 移动开发入门手册（完整版）
更多电子书请到: http://maxwoods.400gb.com 下载:Delphi XE5移动开发入门手册(完整版)
android音视频点/直播模块开发
音视频版权声明:本文为博主原创文章,未经博主允许不得转载. 前言随着音视频领域的火热,在很多领域(教育,游戏,娱乐,体育,跑步,餐饮,音乐等)尝试做音视频直播/点播功能,那么作为开发一个小白, ...
Android音视频点/直播模块开发实践总结-zz
随着音视频领域的火热,在很多领域(教育,游戏,娱乐,体育,跑步,餐饮,音乐等)尝试做音视频直播/点播功能.那么作为开发一个小白,如何快速学习音视频基础知识,了解音视频编解码的传输协议,编解码方式,以及 ...
C#.NET 大型信息化系统集成快速开发平台 - 手机短信开发接口 4.0
可以批量发信息给手机,相同的信息发给多个手机号码的效果图已发送手机短信列表可以批量发手机的功能,可以把先有的待发信息列表,直接通过批量发送功能发出这个是设置发送模板公式的功能展示,可以设置发送的 ...
android 短信助手demo
关于意图Intent: 显式意图:必须指定要激活的组件的完整包名和类名(应用程序之间耦合在一起) 一般激活自己应用的组件的时候采用显式意图隐式意图:只需要指定动作和数据就可以(好处是应用程序之间没有 ...

随机推荐

Python 中的 if __name__ == '__main__'
__name__ 是当前模块名,当模块被直接运行时模块名为 __main__ .这句话的意思就是,当模块被直接运行时,以下代码块将被运行,当模块是被导入时,代码块不被运行. 先来个小栗子: 先创建一个 ...
autoconf / automake工具使用介绍
本文转自:http://blog.csdn.net/gulansheng/article/details/42683809 一.简介作为Linux下的程序开发人员,一定都遇到过Makefile,用m ...
java 实现共享锁和排它锁
一直对多线程有恐惧,在实现共享锁和排它锁之后,感觉好了很多. 共享锁就是查询的时候,如果没有修改,可以支持多线程查询: 排它锁就是修改的时候,锁定共享锁,停止查询,同时,锁定排它锁,只 ...
Jmter-Test Fragment、Include Controller和Module Controller
Test Fragment--测试片段 The Test Fragment is used in conjunction with the Include Controller and Module ...
linux自学（七）之开始ccentos学习,安装jdk
上一篇:linux自学(六)之开始centos学习,更换yum源如果你认真跟着前面操作那么一定都完成相关配置及下载,我们的目的是部署Javaweb项目,需要jdk,mysql,tomcat.那么接下 ...
log4j的使用配置
1.与spring整合,web.xml中配置详情  <context-param> <param ...
Java并发--volatile详情
volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...
Mac上获取文件md5 值
mac 上获取一个文件的md5值如下在terminal 上输入下面命令行即可: 方法一: //备注 AccountPassword/check 是全路径也可以相对路径,我这里是相对路径,用来测试用 ...
《DSP using MATLAB》示例Example 8.15
在使用windows调用Hadoop 错误 /bin/bash: line 0: fg: no job control一般解决方法
在使用windows调用Hadoop yarn平台的时候,一般都会遇到如下的错误: 2014-05-28 17:32:19,761 WARN org.apache.hadoop.yarn.server ...

jssip音视频及短信开发demo（中文注释完整版）

jssip音视频及短信开发demo（中文注释完整版）的更多相关文章

随机推荐

热门专题