<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>GetUserMedia实例</title>
<script src="/lib/ligerui/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/socket.io/1.7.3/socket.io.js"></script>
</head>
<body>
<video autoplay="autoplay" id="myvideo"></video>
<video autoplay="autoplay" id="remotevideo"></video>
</body>
<script type="text/javascript">
var RTCPeerConnection = (window.PeerConnection || window.webkitPeerConnection00 || window.webkitRTCPeerConnection || window.mozRTCPeerConnection);
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var nativeRTCIceCandidate = (window.mozRTCIceCandidate || window.RTCIceCandidate);
var nativeRTCSessionDescription = (window.mozRTCSessionDescription || window.RTCSessionDescription);
//使用Google的stun服务器
var iceServer = {
"iceServers": [{
"urls": "stun:stun.voipstunt.com"
}]
};
var pc = new RTCPeerConnection(iceServer);
/*var p = navigator.mediaDevices.getUserMedia({ audio: true, video: { width: 1280, height: 720 }});
p.then(function(mediaStream) {
var video = document.querySelector('#myvideo');
video.src = window.URL.createObjectURL(mediaStream);
pc.addStream(mediaStream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
});
p.catch(function(err) { console.log(err.name); }); // always check for errors at the end.*/
navigator.getUserMedia( {audio: true, video:true}, successCallback, logError);
function successCallback(stream) {
pc.addStream(stream);
var video = document.querySelector('#myvideo');
window.stream = stream; // 这就是上面提到的 mediaStream 实例
if (window.URL) {
video.src = window.URL.createObjectURL(stream); // 用来创建 video 可以播放的 src
} else {
video.src = stream;
}
}
pc.onicecandidate = function (evt) {
var name;
if("${name}"=="called"){
name="caller";
}else{
name="called";
}
if (evt.candidate) {
$.ajax({
type: 'POST',
url: "/upload",
data:{name:name,data:JSON.stringify({type:"candidate",data:evt.candidate})},
success: function (data) {
},
error:function (data) {
//alert(data);
}
})
}
};
pc.onaddstream = function(event){
console.log("datacoming");
var remotevideo = document.querySelector('#remotevideo');
window.stream = event.stream; // 这就是上面提到的 mediaStream 实例
if (window.URL) {
remotevideo.src = window.URL.createObjectURL(event.stream); // 用来创建 video 可以播放的 src
} else {
remotevideo.src = event.stream;
}
//remotevideo.src = URL.createObjectURL(event.stream);
};
//向PeerConnection中加入需要发送的流
var mediaConstraints = {
mandatory: {
'OfferToReceiveAudio': true,
'OfferToReceiveVideo': true
},
'offerToReceiveAudio': true,
'offerToReceiveVideo': true
};
//pc.createOffer(function(offer) {
//pc.setLocalDescription(offer);
//alert(123);
//signalingChannel.send(offer.sdp);
//},logError);
if("${name}"=="caller"){
if(navigator.userAgent.indexOf("Chrome") && window.chrome){
pc.createOffer(function(offer) {
console.log("offer");
pc.setLocalDescription(offer);
$.ajax({
type: 'POST',
url: "/upload",
data:{name:"called",data:JSON.stringify({type:"offer",data:offer})},
success: function (data) {
//context1.drawImage(document.getElementById("img"),0,0);
},
error:function (data) {
//alert(data);
}
})
},logError,mediaConstraints);
}else if(navigator.userAgent.indexOf("Firefox") != -1){
pc.createOffer(function(offer) {
console.log("offer");
pc.setLocalDescription(offer);
$.ajax({
type: 'POST',
url: "/upload",
data:{name:"called",data:JSON.stringify({type:"offer",data:offer})},
success: function (data) {
//context1.drawImage(document.getElementById("img"),0,0);
},
error:function (data) {
//alert(data);
}
})
},logError,mediaConstraints);
}
}
function logError(error) {
console.log(error.name + ': ' + error.message);
}
var socket = io.connect('http://192.168.19.45:8099/?name=${name}');
socket.on('connect', function() {alert("连接成功")});
socket.on("video", function(data) {
var json=JSON.parse(data);
if(json.type=="offer"){
console.log("receive offer");
pc.setRemoteDescription(new RTCSessionDescription(json.data));
pc.createAnswer(function(offer) {
console.log("send answer");
pc.setLocalDescription(offer);
$.ajax({
type: 'POST',
url: "/upload",
data:{name:"caller",data:JSON.stringify({type:"answer",data:offer})},
success: function (data) {
},
error:function (data) {
}
})
},logError,mediaConstraints);
}else if(json.type=="answer"){
console.log("receive answer");
pc.setRemoteDescription(new RTCSessionDescription(json.data));
}else if( json.type == "candidate" ){
console.log("receive candidate");
pc.addIceCandidate(new RTCIceCandidate(json.data));
}
});
</script>
</html>
接收方的收到信息
发起方收到的信息
