<script>
var
socket = io.connect('http://192.168.1.63:8000');
//針對moliza 有些仍未整合統一規格，所以針對各家瀏覽器，仍需特殊處理
var
RTCSessionDescription = window.mozRTCSessionDescription
||
window.webkitRTCSessionDescription || window.RTCSessionDescription;
var
RTCIceCandidate = window.mozRTCIceCandidate || window.webkitRTCIceCandidate
||
window.RTCIceCandidate;
var
mediaConstraints = {
"mandatory":
{
"OfferToReceiveAudio":
true,
"OfferToReceiveVideo":
true
}
};
var
localStream;
var
localPeerConnection;
var
remotePeerConnection;
var
localVideo = document.getElementById('localVideo');
var
remoteVideo = document.getElementById('remoteVideo');
var
startButton = document.getElementById('startButton');
var
callButton = document.getElementById('callButton');
var
hangupButton = document.getElementById('hangupButton');
startButton.disabled = false;
callButton.disabled = true;
hangupButton.disabled = true;
startButton.onclick = start;
callButton.onclick = call;
hangupButton.onclick = hangup;
function
gotStream(stream) {
localVideo.src =
URL.createObjectURL(stream);
localStream = stream;
callButton.disabled = false;
}
//針對moliza 的規格，所以要特殊處理
function
getPeerConnection() {
if(navigator.userAgent.indexOf("Chrome") != -1 )
{
localPeerConnection = new
webkitRTCPeerConnection(null);
remotePeerConnection = new
webkitRTCPeerConnection(null);
}
else
if(navigator.userAgent.indexOf("Firefox") != -1 )
{
localPeerConnection = new
mozRTCPeerConnection(null);
remotePeerConnection = new
mozRTCPeerConnection(null);
}
}
function
start() {
startButton.disabled = true;
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
navigator.getUserMedia({
video: true
}, gotStream,
function
(error) {
trace('navigator.getUserMedia
error: ', error);
});
}
function
call() {
callButton.disabled = true;
hangupButton.disabled = false;
getPeerConnection();
//建立RTCPeerConnection
的函式(fireFox
瀏覽器另外處理)
remotePeerConnection.onaddstream =
gotRemoteStream; //產生串流
localPeerConnection.addStream(localStream);
//準備訊息交換的訊息
localPeerConnection.createOffer(function
(sdp) {
localPeerConnection.setLocalDescription(sdp, function
() {
socket.emit('offer', { sdp: sdp }); ，建立 offer 訊號, 等待socket 回傳offer
},Error);
}, function
() {
console.log('create offer error.');
}, mediaConstraints);
}
function
gotRemoteIceCandidate(event) {
if
(!!event.candidate) {
socket.emit('ice', { candidate: e.candidate });
}
}
function
hangup() {
localPeerConnection.close();
remotePeerConnection.close();
localPeerConnection = null;
remotePeerConnection = null;
hangupButton.disabled = true;
callButton.disabled = false;
}
function
gotRemoteStream(event) {
remoteVideo.src =
URL.createObjectURL(event.stream);
}
// 建立 ice ，準備連線的前置作業
socket.on('offer',
function (data) {
remotePeerConnection.onicecandidate
= function (e) {
if
(!!e.candidate) {
socket.emit('ice', { candidate: e.candidate }); // 發送出ice 訊息… 等待socket回傳ice訊息
}
};
var
offer = new
RTCSessionDescription(data.sdp); //
預備要交換的訊息
remotePeerConnection.setRemoteDescription(offer, function
() {
// 遠端電腦接收offer訊息後，要回傳answer訊息，並開始進始多媒體的傳輸作業
remotePeerConnection.createAnswer(function
(sdp) {
remotePeerConnection.setLocalDescription(sdp, function
() {
socket.emit('answer', { sdp: sdp }); //送出socket 的answer 等待，socket 回傳answer 訊息
}, function
(e) {
console.log('set local description error: ' + e);
});
}, function
(e) {
console.log('create answer error: ' + e);
}, mediaConstraints);
}, function
(e) {
console.log('set remote description error: ' + e);
});
});
// 接收遠端電腦回傳的answer 訊息
socket.on('answer',
function (data) {
localPeerConnection.setRemoteDescription(new
RTCSessionDescription(data.sdp)); //準備多媒體傳輸通道
});
//
接收回傳ice
訊息，將自己本地端的ICE
訊息回傳
socket.on('ice',
function (data) {
localPeerConnection.addIceCandidate(new
RTCIceCandidate(data.candidate));
});
}
</script>
|
