[英]WEBRTC, establish connection if user A to user B. With different Video and Audio constraints
This code, is handling then new User connected.此代码正在处理新用户连接。
User Class用户 Class
class User{
constructor(friendID){
this.friendID = friendID;
this.userName = null;
this.myPeer = new RTCPeerConnection(servers);
this.videoManager = new VideoManager();
this.setup_events();
}
get name(){
return this.userName;
}
get id(){
return this.friendID;
}
setup_events(){
let this_instance = this;
this.myPeer.onicecandidate = function(event){
if (event.candidate !== null){
LOG("ICE CANDIDATE SEND TO " + this_instance.friendID);
LOG_obj(event.candidate);
socket.emit("ice-candidate", event.candidate, this_instance.friendID);
}else{
LOG("EMPTY CANDIDATE");
}
}
this.myPeer.addEventListener('track', async(event) => {
const [remoteStream] = event.streams;
this_instance.videoManager.createVideo();
this_instance.videoManager.setStream(remoteStream);
LOG("ADDED stream to VideoObject");
});
}
add_candidate(candidate){
this.myPeer.addIceCandidate( new RTCIceCandidate(candidate) );
LOG("CANDIDATE ADDED TO PEER");
}
accept_offer(userOffer){
this.myPeer.setRemoteDescription(new RTCSessionDescription(userOffer));
LOG("ACCEPTED OFFER");
}
async create_offer(){
MediaRules.get_MediaRules()
.then( (mediaRules) => {
navigator.mediaDevices.getUserMedia(mediaRules).then( (mediaStream) =>{
let tracks = mediaStream.getTracks();
tracks.forEach( track => { this.myPeer.addTrack(track, mediaStream); });
LOG("ADDED ALL TRACKS");
}).then( () => {
this.myPeer.createOffer(mediaRules).then( (offerObj) => {
this.myPeer.setLocalDescription(offerObj);
socket.emit("user-offer", offerObj, this.friendID);
});
});
});
}
accept_answer(userAnswer){
this.myPeer.setRemoteDescription(new RTCSessionDescription(userAnswer));
LOG("ACCEPTED ANSWER");
}
async create_answer(){
MediaRules.get_MediaRules().then( (mediaRules) => {
navigator.mediaDevices.getUserMedia(mediaRules).then( (mediaStream) => {
let tracks = mediaStream.getTracks();
tracks.forEach( track => { this.myPeer.addTrack(track, mediaStream); });
LOG("ADDED ALL TRACKS");
}).then( () => {
this.myPeer.createAnswer(mediaRules).then( (answerObj) => {
this.myPeer.setLocalDescription(answerObj);
socket.emit("user-answer", answerObj, this.friendID);
});
});
});
}
}
User Pool用户池
class UsersPool{
constructor(){
this.UsersMap = {};
}
addUser(userObj){
this.UsersMap[userObj.id] = userObj;
}
accept_IceCandidate(candidateObject, user_id){
this.UsersMap[user_id].add_candidate(candidateObject);
}
accept_Offer(offerObject, user_id){
LOG("ACCEPT OFFER FROM " + user_id);
this.UsersMap[user_id].accept_offer(offerObject);
}
accept_Answer(answerObject, user_id){
this.UsersMap[user_id].accept_answer(answerObject);
}
async CreateSendOffer(user_id){
await this.UsersMap[user_id].create_offer();
}
async CreateSendAnswer(user_id){
await this.UsersMap[user_id].create_answer();
}
}
Media Constraints媒体限制
class MediaConstraints{
async get_MediaRules(){
let mediaRules = { video: false, audio: false };
let devicesEnum = await navigator.mediaDevices.enumerateDevices();
devicesEnum.forEach( device => {
if ( device.kind == "audioinput" ){
mediaRules["audio"] = true;
}
else if ( device.kind == "videoinput"){
mediaRules["video"] = true;
}
});
return mediaRules;
}
}
Video Manager (creates video element by user)视频管理器(由用户创建视频元素)
class VideoManager {
constructor(){
this.videoObject = null;
}
createVideo(){
let videoObject = document.createElement("video");
let divVideo = document.createElement("div");
videoObject.setAttribute('width', "600");
videoObject.setAttribute('height', "800");
divVideo.appendChild(videoObject);
document.body.appendChild(divVideo);
this.videoObject = videoObject;
}
setStream(stream){
this.videoObject.srcObject = stream;
this.videoObject.play();
}
}
Well, the problem is here.嗯,问题就在这里。 icecandidate is working nice, signaling server is working too.
icecandidate 运行良好,信令服务器也运行良好。 TURN/STUN server works fine.
TURN/STUN 服务器工作正常。
My main question is how to create constraints and setup correctly Offer and Answer if User A don't have webcamera but User B has.我的主要问题是如何创建约束并正确设置如果用户 A 没有网络摄像头但用户 B 有,则提供和回答。 At the moment i get error that STUN server is broken, but this is because peers can't finish establishing connection between each other.
目前我收到 STUN 服务器已损坏的错误,但这是因为对等方无法完成彼此之间的连接建立。
How to make it, if i have only microphone on my Laptop, but on other Laptop i have video and microphone.如何制作,如果我的笔记本电脑上只有麦克风,但在其他笔记本电脑上我有视频和麦克风。
EDIT 0: Well, looks like WebRTC doesn't like if constraints are different, if User A create offer with {video: false, audio: true}, and send it to User B, and User B creates answer with {video: true, audio: true} then it fails to connect because constraints are different.编辑 0:嗯,看起来 WebRTC 不喜欢如果约束不同,如果用户 A 使用 {video: false, audio: true} 创建报价,并将其发送给用户 B,而用户 B 使用 {video: true 创建答案, audio: true} 然后连接失败,因为约束不同。
Still don't understand why this is a problem.仍然不明白为什么这是一个问题。
EDIT 1: Looks like the only way is to use addTransceiver and to control manually media.编辑 1:看起来唯一的方法是使用 addTransceiver 并手动控制媒体。
Well, that's pretty funny.嗯,这很有趣。
The problem was in Firefox (107.0 x64) and Google Chrome browser in Debian 11 Bullseye.问题出在 Firefox (107.0 x64) 和 Google Chrome 浏览器中 Debian 11 Bullseye。
I don't know exactly whats the problem, but using othe operating systems like Windows and MacOS.我不知道到底是什么问题,但使用其他操作系统,如 Windows 和 MacOS。 Everything works fine.
一切正常。
EDIT: I did not fixed the problem, on linux this problem still persist.编辑:我没有解决问题,在 linux 上这个问题仍然存在。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.