我使用了Angular JS： - 从服务器端获取房间ID /令牌以连接网络套接字 以下代码中使用的代码 -
app.controller("videoCallingController",
["$scope", "$location", "$rootScope", "$localStorage", 'AuthenticationService', "CommonService", "videoService",
function ($scope, $location, $rootScope, $localStorage, AuthenticationService, CommonService, videoService) {
$scope.UserInfo = getLoggedInUserDetails();
if ($scope.UserInfo == null) {
window.location.replace("/login.html#/");
}
$scope.offerConversationDetails = JSON.parse(localStorage.getItem('offerConversationDetails')); //$rootScope.offerConversationDetails;
$scope.IsCallBtn = false;
$scope.IsCallEnd = false;
$scope.IsRemoteStreaming = false;
//------- start custom Web socket ----------------
var ws;
function initWS(groupname) {
// var groupname = "TestRoom";
ws = new WebSocket("wss://" + location.host + "/api/" + "api/Values/Get?id=" + groupname);
ws.onopen = function () { };
ws.onmessage = function (evt) {
var signal = null;
if (!pc1) { answerCall(); }
signal = JSON.parse(evt.data);
if (signal.sdp) {
console.log("Received SDP from remote peer.");
pc1.setRemoteDescription(new RTCSessionDescription(signal.sdp));
createAndSendAnswer(signal.sdp);
}
else if (signal.candidate) {
console.log("Received ICECandidate from remote peer.");
//pc1.addIceCandidate(new RTCIceCandidate(signal.candidate));
addIceCandidate(signal);
} else if (signal.closeConnection) {
console.log("Received 'close call' signal from remote peer.");
//endCall();
}
};
ws.onerror = function (evt) {
console.log(evt.message);
};
ws.onclose = function () {
console.log("disconnected");
};
}
function sendWS(msg) {
if (ws.readyState == WebSocket.OPEN) {
ws.send(msg);
}
}
function closeWS() {
ws.close();
}
//------- end custom Web socket ----------------
//---- start Html element selectors ------------
//var callButton = document.getElementById('callButton');
//callButton.onclick = initiateCall;
var startTime;
var localVideo = document.getElementById('localVideo');
var remoteVideo = document.getElementById('remoteVideo');
localVideo.addEventListener('loadedmetadata', function () {
trace('Local video videoWidth: ' + this.videoWidth +
'px, videoHeight: ' + this.videoHeight + 'px');
});
remoteVideo.addEventListener('loadedmetadata', function () {
trace('Remote video videoWidth: ' + this.videoWidth +
'px, videoHeight: ' + this.videoHeight + 'px');
});
remoteVideo.onresize = function () {
trace('Remote video size changed to ' +
remoteVideo.videoWidth + 'x' + remoteVideo.videoHeight);
// We'll use the first onsize callback as an indication that video has started
// playing out.
if (startTime) {
var elapsedTime = window.performance.now() - startTime;
trace('Setup time: ' + elapsedTime.toFixed(3) + 'ms');
startTime = null;
}
};
//---- end Html element selectors ------------
var localStream;
var pc1;
// var pc2;
var offerOptions = {
offerToReceiveAudio: 1,
offerToReceiveVideo: 1
};
function getName(pc) {
return 'pc1'; //(pc === pc1) ? 'pc1' : 'pc2';
}
function getOtherPc(pc) {
return pc1; //(pc === pc1) ? pc2 : pc1;
}
function gotStream(stream) {
trace('Received local stream');
//localVideo = attachMediaStream(localVideo, stream);
// attachMediaStream(localVideo, stream);
console.log(attachMediaStream(localVideo, stream));
localStream = stream;
// callButton.disabled = false;
muteAudio(stream);
}
function muteAudio(stream) {
var AudioTrack = stream.getAudioTracks()[0];
//var localAudioBtn = document.getElementById('localAudioBtn');
var muteBtn = document.getElementById('localAudioMuteBtn');
var unMuteBtn = document.getElementById('localAudioUnMuteBtn');
//localAudioBtn.style.visibility = 'visible';
unMuteBtn.onclick = MuteUnMute;
muteBtn.onclick = MuteUnMute;
function MuteUnMute() {
AudioTrack.enabled = !AudioTrack.enabled;
muteBtn.className = 'btn btn-info btn-lg' + (AudioTrack.enabled ? '' : ' hidden');
unMuteBtn.className = 'btn btn-warning btn-lg' + (AudioTrack.enabled ? ' hidden' : '');
//localAudioBtn.className = 'button button-mute' + (AudioTrack.enabled ? '' : ' muted');
};
}
function gumFailed(e) {
alert('getUserMedia() error: ' + e.name);
}
function start() {
trace('Requesting local stream');
// startButton.disabled = true;
var constraints = {
audio: true,
video: { width: 1280, height: 720 } //true
};
if (typeof Promise === 'undefined') {
navigator.getUserMedia(constraints, gotStream, gumFailed);
} else {
navigator.mediaDevices.getUserMedia(constraints)
.then(gotStream)
.catch(gumFailed);
}
}
var Room = {};
Room.createNewRoom = function () {
if ($scope.offerConversationDetails.type == 'owner') {
videoService.CreateNewRoom($scope.offerConversationDetails.offerId, function (resp) {
if (resp.status === iresponseStatus.success) {
console.log("CreateNewRoom");
console.log(resp.result);
$scope.roomDetails = resp.result;
$rootScope.offerRoomId = $scope.roomDetails.RoomId;
Room.getRoomStatusById($scope.roomDetails.RoomId);
}
else if (resp.status === iresponseStatus.error) {
if (resp.error.code == 5) {
callDateTimeExpired(resp.error.message);
}
displayNoty("error", resp.error.message);
console.log(resp.error);
setTimeout(function () { Room.createNewRoom(); }, 10000);
}
});
}
}
Room.getRoomToken = function () {
if ($scope.offerConversationDetails.type == 'winner') {
videoService.GetRoomToken($scope.offerConversationDetails.offerId, function (resp) {
if (resp.status === iresponseStatus.success) {
console.log("Get Room Token");
console.log(resp.result);
$scope.roomDetails = resp.result;
$rootScope.offerRoomId = $scope.roomDetails.RoomId;
initWS($scope.roomDetails.RoomToken);
}
else if (resp.status === iresponseStatus.error) {
console.log(resp.error);
if (resp.error.code == 5) {
callDateTimeExpired(resp.error.message);
}
setTimeout(function () { Room.getRoomToken(); }, 1000);
}
});
}
}
Room.getRoomStatusById = function (roomId) {
if ($scope.offerConversationDetails.type == 'owner') {
videoService.GetRoomStatusById(roomId, function (resp) {
if (resp.status === iresponseStatus.success) {
if (resp.result == 2) //Active
{
initWS($scope.roomDetails.RoomToken);
$scope.IsCallBtn = true;
}
else {
//setTimeout(Room.getRoomStatusById(roomId), 100);
setTimeout(function () { Room.getRoomStatusById(roomId); }, 100);
}
}
else if (resp.status === iresponseStatus.error) {
console.log(resp.error);
if (resp.error.code == 5) {
callDateTimeExpired(resp.error.message);
}
//setTimeout(Room.getRoomStatusById(roomId), 100);
setTimeout(function () { Room.getRoomStatusById(roomId); }, 100);
}
});
}
}
Room.updateRoomConsumption = function () {
if ($scope.offerConversationDetails.type == 'owner') {
updateRoomConsumption_interval = setInterval(UpdateRoomConsumption(), 5000);
}
}
var updateRoomConsumption_interval = null;
function UpdateRoomConsumption() {
if ($scope.offerConversationDetails.ChatDurationSeconds > $scope.seconds) {
videoService.UpdateRoomConsumption($scope.roomDetails.RoomId, $scope.seconds, function (resp) {
if (resp.status === iresponseStatus.success) {
// $scope.seconds += 5;
//setTimeout(function () { Room.updateRoomConsumption(); }, 5000);
}
else if (resp.status === iresponseStatus.error) {
console.log(resp.error);
}
});
}
else {
EndCall();
clearInterval(updateRoomConsumption_interval);
}
$scope.seconds = $scope.seconds + 5;
}
//initWS();
start();
Room.createNewRoom();
Room.getRoomToken();
function prepareCall() {
// callButton.disabled = true;
trace('Starting call');
startTime = 4410; //window.performance.now();
var videoTracks = localStream.getVideoTracks();
var audioTracks = localStream.getAudioTracks();
if (videoTracks.length > 0) {
trace('Using video device: ' + videoTracks[0].label);
}
if (audioTracks.length > 0) {
trace('Using audio device: ' + audioTracks[0].label);
}
// var servers = null;
var servers = {
iceServers: [
//{ url: "stun:23.21.150.121" },
{ url: "stun:stun.1.google.com:19302" }
//{ url: !isFirefox ? 'stun:stun.l.google.com:19302' : 'stun:23.21.150.121' }
]
};
pc1 = new RTCPeerConnection(servers);
trace('Created local peer connection object pc1');
pc1.onicecandidate = function (e) {
onIceCandidate(pc1, e);
};
// pc2 = new RTCPeerConnection(servers);
//trace('Created remote peer connection object pc2');
//pc2.onicecandidate = function (e) {
// onIceCandidate(pc2, e);
//};
pc1.oniceconnectionstatechange = function (e) {
onIceStateChange(pc1, e);
};
//pc2.oniceconnectionstatechange = function (e) {
// onIceStateChange(pc2, e);
//};
pc1.onaddstream = gotRemoteStream;
};
// run start(true) to initiate a call
$scope.initiateCall = function () {
prepareCall();
pc1.addStream(localStream);
trace('Added local stream to pc1');
trace('pc1 createOffer start');
pc1.createOffer(onCreateOfferSuccess, onCreateSessionDescriptionError,
offerOptions);
};
function answerCall() {
prepareCall();
pc1.addStream(localStream);
trace('Added local stream to pc1');
//createAndSendAnswer();
};
function onCreateSessionDescriptionError(error) {
trace('Failed to create session description: ' + error.toString());
}
function onCreateOfferSuccess(desc) {
trace('Offer from pc1\n' + desc.sdp);
trace('pc1 setLocalDescription start');
pc1.setLocalDescription(desc, function () {
onSetLocalSuccess(pc1);
sendWS(JSON.stringify({ "sdp": desc }));
}, onSetSessionDescriptionError);
}
function createAndSendAnswer(desc) {
// trace('pc2 setRemoteDescription start');
pc1.setRemoteDescription(desc, function () {
onSetRemoteSuccess(pc1);
}, onSetSessionDescriptionError);
trace('pc2 createAnswer start');
//Since the 'remote' side has no media stream we need
// to pass in the right constraints in order for it to
// accept the incoming offer of audio and video.
pc1.createAnswer(onCreateAnswerSuccess, onCreateSessionDescriptionError);
};
function onSetLocalSuccess(pc) {
trace(getName(pc) + ' setLocalDescription complete');
}
function onSetRemoteSuccess(pc) {
trace(getName(pc) + ' setRemoteDescription complete');
}
function onSetSessionDescriptionError(error) {
trace('Failed to set session description: ' + error.toString());
}
function gotRemoteStream(event) {
// remoteVideo = attachMediaStream(remoteVideo, e.stream);
if (event != null && event != undefined && event.stream != null && event.stream != undefined) {
$scope.offerConversationDetails.ChatDurationSeconds = $scope.offerConversationDetails.ChatDuration * 60;
$scope.IsDisplayTimer = true; $scope.IsRemoteStreaming = true; $scope.IsCallBtn = false;
$scope.$apply();
initializeClock('clockdiv', $scope.offerConversationDetails.ChatDurationSeconds);
$scope.seconds = 0;
Room.updateRoomConsumption($scope.seconds);
//event.stream.oninactive = function ()
//{
// if ($scope.IsCallEnd == false)
// hangup();
// alert("remote streaming get stop");
//}
}
console.log(attachMediaStream(remoteVideo, event.stream));
trace('pc2 received remote stream');
}
function onCreateAnswerSuccess(desc) {
//trace('Answer from pc2:\n' + desc.sdp);
//trace('pc2 setLocalDescription start');
//pc2.setLocalDescription(desc, function () {
// onSetLocalSuccess(pc2);
//}, onSetSessionDescriptionError);
trace('pc1 setRemoteDescription start');
pc1.setLocalDescription(desc, function () {
onSetRemoteSuccess(pc1);
sendWS(JSON.stringify({ "sdp": desc }));
}, onSetSessionDescriptionError);
}
function onIceCandidate(pc, event) {
if (!event || !event.candidate) return;
sendWS(JSON.stringify({ "candidate": event.candidate }));
//var candidate = event.candidate;
//if (candidate) {
// getOtherPc(pc).addIceCandidate(new RTCIceCandidate(event.candidate),
// function () {
// onAddIceCandidateSuccess(pc);
// },
// function (err) {
// onAddIceCandidateError(pc, err);
// }
// );
// trace(getName(pc) + ' ICE candidate: \n' + event.candidate.candidate);
//}
}
function addIceCandidate(event) {
pc1.addIceCandidate(new RTCIceCandidate(event.candidate),
function () {
onAddIceCandidateSuccess(pc1);
},
function (err) {
onAddIceCandidateError(pc1, err);
}
);
trace(pc1 + ' ICE candidate: \n' + event.candidate.candidate);
}
function onAddIceCandidateSuccess(pc) {
trace(getName(pc) + ' addIceCandidate success');
}
function onAddIceCandidateError(pc, error) {
trace(getName(pc) + ' failed to add ICE Candidate: ' + error.toString());
}
function onIceStateChange(pc, event) {
if (pc) {
trace(getName(pc) + ' ICE state: ' + pc.iceConnectionState);
console.log('ICE state change event: ', event);
if (pc.iceConnectionState == 'disconnected' || pc.iceConnectionState == 'failed') {
EndCall();
}
}
}
function EndCall() {
hangup();
console.log("chatduration =" + $scope.offerConversationDetails.ChatDurationSeconds);
console.log("consumption =" + $scope.seconds);
//if ($scope.IsManuallyEnded != true)
//{
alertify.alert('Mepleez Conversation', 'Your conversation got finished. Please give conversation feedback to us.',
function () {
//hangup();
window.location.replace("/video.html#/experience");
});
//}
}
function callDateTimeExpired(message) {
alertify.alert('Mepleez Conversation', message,
function () {
// window.location.replace("/video.html#/experience");
window.location.replace("/index.html#/");
});
}
$scope.onEndCallBtnClick = function () {
//alertify.prompt('Cancel call', 'Please enter the reason for cancelling call', 'Busy with other stuff '
// , function (evt, value) {
// }
// , function () { });
alertify.confirm('End Call', 'Are you sure?', function () {
$scope.IsManuallyEnded = true;
hangup();
window.location.replace("/video.html#/experience");
}
, function () { });
}
function hangup() {
$scope.IsCallEnd = true;
trace('Ending call');
pc1.close();
// pc2.close();
pc1 = null;
// pc2 = null;
//hangupButton.disabled = true;
// callButton.disabled = false;
localStream.getTracks().forEach(function (track) {
track.stop();
});
localVideo.src = "";
remoteVideo.src = "";
closeWS();
// window.location.replace("/video.html#/experience");
}
$scope.dragOptions = {
start: function (e) {
console.log("STARTING");
},
drag: function (e) {
console.log("DRAGGING");
},
stop: function (e) {
console.log("STOPPING");
},
container: 'container'
}
答案 0 :(得分：0)
在对其进行血清化后，SDP中会有一些特殊字符。 所以要删除它使用下面的代码
// Workaround
function maybeAddLineBreakToEnd(sdp) {
var endWithLineBreak = new RegExp(/\n$/);
if (!endWithLineBreak.test(sdp)) {
return sdp + '\n';
}
return sdp;
}
function gotDescription(desc) {
var offer = desc;
offerSdpTextarea.value = desc.sdp;
var sdp = offerSdpTextarea.value;
sdp = maybeAddLineBreakToEnd(sdp);
console.log(sdp);
sdp = sdp.replace(/\n/g, '\r\n');
offer.sdp = sdp;
pc1.setLocalDescription(offer,
onSetOfferSDPSuccess,
onSetSDPError);
trace('Modified Offer from localPeerConnection \n' + sdp);
// sendWS(JSON.stringify({ "sdp": desc }));
sendWS(JSON.stringify(offer));
}