createOffer 报undefined

demo

#1

发起视频的时候报 createOffer undefined 包是下载的demo里面已经有的 各位大神帮忙看看是啥问题 感谢!!!!


#2

你的peerconnnection怎么创建的,可能是这个创建的有问题


#3

var name = ‘’, connectedUser;

var loginPage = document.querySelector(’#login-page’),
usernameInput = document.querySelector(’#username’),
loginButton = document.querySelector(’#login’),
callPage = document.querySelector(’#call-page’),
theirUsernameInput = document.querySelector(’#their-username’),
callButton = document.querySelector(’#call’),
hangUpButton = document.querySelector(’#hang-up’);
callPage.style.display = ‘none’;
loginButton.addEventListener(‘click’, function(){
name = usernameInput.value;
if(name.length>0){
send({
type: “login”,
name: name
});
}
});

console.log(“document.domain===”,document.domain);
var connection = new WebSocket(‘ws://192.168.2.222:8888’);
connection.onopen = function(){
console.log(‘Connected.’);
};
connection.onmessage = function(message){
console.log(‘Got message’, message.data);
var data = JSON.parse(message.data);
switch(data.type){
case ‘login’:
onLogin(data.success);
break;
case ‘offer’:
onOffer(data.offer, data.name);
break;
case ‘answer’:
onAnswer(data.answer);
break;
case ‘candidate’:
onCandidate(data.candidate);
break;
case ‘leave’:
onLeave();
break;
default:
break;
}
};
connection.onerror = function(err){
console.log(“Got error”, err);
};

function send(message){
if(connectedUser){
message.name = connectedUser;
}
connection.send(JSON.stringify(message));
}

function onLogin(success){
if(success = false){
alert(‘Login failed, Please try a different name,’);
}else{
loginPage.style.display = ‘none’;
callPage.style.display = ‘block’;
startConnection();
}
};

callButton.addEventListener(‘click’, function(){
var theirUsername = theirUsernameInput.value;
if(theirUsername.length>0){
startPeerConnection(theirUsername);
}
});

hangUpButton.addEventListener(‘click’, function(){
send({
type: “leave”
});
onLeave();
});

function onOffer(offer, name){
connectedUser = name;
yourConnection.setRemoteDescription(new RTCSessionDescription(offer));
yourConnection.createAnswer(function(_answer){
yourConnection.setLocalDescription(_answer);
send({
type: ‘answer’,
answer: _answer
});
}, function(err){
console.log(‘An error occur on onOffer.’);
});
};

function onAnswer(answer){
yourConnection.setRemoteDescription(new RTCSessionDescription(answer));
};

function onCandidate(candidate){
yourConnection.addIceCandidate(new RTCIceCandidate(candidate));
};

function onLeave(){
connectedUser = null;
theirConnection = null;
yourConnection.close();
yourConnection.onicecandidate = null;
yourConnection.onaddstream = null;
setupPeerConnection(stream);
};

function hasUserMedia(){
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia || navigator.mediaDevices.getUserMedia || navigator.mozGetUserMedia);
}

function hasRTCPeerConnection(){
window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
window.RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription || window.mozRTCSessionDescription;
window.RTCIceCandidate = window.RTCIceCandidate || window.webkitRTCIceCandidate || window.mozRTCIceCandidate;
return !!window.RTCPeerConnection;
}
var yourVideo = document.querySelector(’#yours’),
theirVideo = document.querySelector(’#theirs’),
yourConnection,
theirConnection,
stream;
function startConnection(){
if(hasUserMedia()){
navigator._getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia || navigator.mozGetUserMedia || navigator.mediaDevices.getUserMedia);
navigator._getUserMedia(
{
video: true,
audio: false
},
function(myStream){
stream = myStream;
yourVideo.src = window.URL.createObjectURL(stream);
if(hasRTCPeerConnection()){
setupPeerConnection(stream);
}
else{
alert(‘Sorry, your browser does not support WebRTC.’);
}
},
function(error){
console.log(error);
}
);
}
};

function setupPeerConnection(stream){
var configuration = { //stun.1.google.com:19302"
“iceServers”: [{
“url”: “stun:173.194.202.127:19302”
}]
};
yourConnection = new RTCPeerConnection(configuration);
yourConnection.addStream(stream);
yourConnection.onaddstream = function(e){
theirVideo.src = window.URL.createObjectURL(e.stream);
};
yourConnection.onicecandidate = function(e){
if(e.candidate){
send({
type: “candidate”,
candidate: e.candidate
});
}
};

};

function startPeerConnection(user){
connectedUser = user;
yourConnection.createOffer(function(_offer){
send({
type: “offer”,
offer: _offer
});
yourConnection.setLocalDescription(_offer);
}, function(error){
alert(‘An error on startPeerConnection:’, error);
});
};


#4

这代码复制的好乱,贴个w3c的标准example,供参考
EXAMPLE 10
const signaling = new SignalingChannel(); // handles JSON.stringify/parse
const constraints = {audio: true, video: true};
const configuration = {iceServers: [{urls: ‘stuns:stun.example.org’}]};
const pc = new RTCPeerConnection(configuration);

// send any ice candidates to the other peer
pc.onicecandidate = ({candidate}) => signaling.send({candidate});

// let the “negotiationneeded” event trigger offer generation
pc.onnegotiationneeded = async () => {
try {
await pc.setLocalDescription(await pc.createOffer());
// send the offer to the other peer
signaling.send({desc: pc.localDescription});
} catch (err) {
console.error(err);
}
};

// once media for a remote track arrives, show it in the remote video element
pc.ontrack = (event) => {
// don’t set srcObject again if it is already set.
if (remoteView.srcObject) return;
remoteView.srcObject = event.streams[0];
};

// call start() to initiate
async function start() {
try {
// get a local stream, show it in a self-view and add it to be sent
const stream = await navigator.mediaDevices.getUserMedia(constraints);
stream.getTracks().forEach((track) => pc.addTrack(track, stream));
selfView.srcObject = stream;
} catch (err) {
console.error(err);
}
}

signaling.onmessage = async ({desc, candidate}) => {
try {
if (desc) {
// if we get an offer, we need to reply with an answer
if (desc.type == ‘offer’) {
await pc.setRemoteDescription(desc);
const stream = await navigator.mediaDevices.getUserMedia(constraints);
stream.getTracks().forEach((track) => pc.addTrack(track, stream));
await pc.setLocalDescription(await pc.createAnswer());
signaling.send({desc: pc.localDescription});
} else if (desc.type == ‘answer’) {
await pc.setRemoteDescription(desc);
} else {
console.log(‘Unsupported SDP type. Your code may differ here.’);
}
} else if (candidate) {
await pc.addIceCandidate(candidate);
}
} catch (err) {
console.error(err);
}
};


#5

这是在网上找的一个demo 我刚才在火狐浏览器上跑 报了yourConnection 未定义错误 摄像头能调 但是没画面 刚开始学 多多指教