Я пытался сделать трансляцию видео «один ко многим», используя WebRTC
и socket.io
. После вызова createAnswer
событие onicecandidate не вызывается. Это правильный путь для соединения нескольких пиров? и как транслировать по одному на несколько пользователей, используя node
, socket.io
и react
.
Можно ли сделать трансляцию видео один-ко-многим с общим экраном?
componentDidMount() {
this.setState({ clientId: this.props.userId, username: this.props.username }, () => {
const config = { audio: true, video: true };
if(navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(config)
.then(this.getUserMediaSuccess)
.then(this.connectSocket())
}
}
)
}
getUserMediaSuccess = (stream) => {
console.log(stream);
localStream = stream;
this.setState({ localSrc: stream })
}
gotRemoteStream = (stream, id) => {
console.log(stream, id)
var video = document.createElement('video'),
div = document.createElement('div')
video.setAttribute('data-socket', id);
video.srcObject = stream;
video.muted = true;
div.appendChild(video);
document.querySelector('.videos').appendChild(div);
}
mapUsers = (data) => {
data.users.forEach(async (user) => {
if(!connections[user.id]){
connections[user.id] = new RTCPeerConnection(PC_CONFIG);
connections[user.id].onicecandidate = event => {
if(event.candidate != null) {
this.props.socket.emit('call', {
candidate: event.candidate,
socket_id: user.id,
room: this.props.roomID
});
}
}
connections[user.id].ontrack = event => {
let stream = event.streams[0];
stream.getTracks().forEach((track) => {
connections[user.id].addTrack(track, stream);
});
this.gotRemoteStream(stream, user.id)
}
}
});
//Create an offer to connect with your local description
if(data.users.length >= 2){
connections[data.id].createOffer().then(async (description) => {
console.log(description);
await connections[this.props.socket.id].setLocalDescription(description)
if(this.props.socket.id != data.id) {
await this.props.socket.emit('call', {
sdp: description,
socket_id: data.id,
room: this.props.roomID
});
}
}).catch(e => console.log(e));
}
}
connectSocket() {
this.props.socket
.on('init', (data) => {
this.mapUsers(data)
})
.on('call', async (data) => {
if(data.socket_id !== this.props.socket.id) {
if(data.sdp && data.sdp.type == "offer"){
const rtcSdp = new RTCSessionDescription(data.sdp);
connections[data.socket_id].setRemoteDescription(rtcSdp).then(async () => {
if(data.sdp.type == 'offer') {
connections[data.socket_id].createAnswer().then(async (description) => {
await connections[data.socket_id].setLocalDescription(description)
this.props.socket.emit('call', { socket_id: data.socket_id, sdp: description, room: this.props.roomID, data: 'Poguthae....', username: this.props.username });
}).catch(e => console.log(e));
}
}).catch(e => console.log(e));
}
if(data.candidate){
await connections[data.socket_id].addIceCandidate(new RTCIceCandidate(data.candidate)).catch(e => console.log(e));
}
}
})
.emit('init', {
username: this.props.username,
userId: this.props.userId,
room: this.props.roomID,
socket_id: this.props.socket_id
});
}