Skip to content

Commit

Permalink
feat: progress made with screen share
Browse files Browse the repository at this point in the history
  • Loading branch information
jvJUCA committed Jun 12, 2024
1 parent 739ff52 commit 2d9d3f4
Showing 1 changed file with 41 additions and 35 deletions.
76 changes: 41 additions & 35 deletions src/components/molecules/VideoCall.vue
Original file line number Diff line number Diff line change
Expand Up @@ -99,50 +99,48 @@ export default {
},
async createRoom() {
// Inicialização e configuração
this.createBtnDisabled = true
this.joinBtnDisabled = true
this.roomCollection = collection(db, 'rooms')
const roomRef = doc(this.roomCollection, this.roomTestId)
this.peerConnection = new RTCPeerConnection(this.configuration)
// Adição das tracks da câmera
this.localCameraStream.getTracks().forEach((track) => {
this.peerConnection.addTrack(track, this.localCameraStream)
})
this.localScreenStream.getTracks().forEach((track) => {
this.peerConnection.addTrack(track, this.localScreenStream)
})
// Configuração do ICE
const callerCandidatesCollection = collection(roomRef, 'callerCandidates')
this.peerConnection.addEventListener('icecandidate', (event) => {
if (!event.candidate) {
return
}
addDoc(callerCandidatesCollection, event.candidate.toJSON())
})
// Criação da oferta e configuração
const offer = await this.peerConnection.createOffer()
await this.peerConnection.setLocalDescription(offer)
const roomWithOffer = {
offer: {
type: offer.type,
sdp: offer.sdp,
},
}
await setDoc(roomRef, roomWithOffer) // Setting room details in document
await setDoc(roomRef, roomWithOffer)
this.roomId = roomRef.id
this.currentRoom = `Current room is ${roomRef.id} - You are the caller!`
this.peerConnection.addEventListener('track', (event) => {
console.log('Track received in CreateRoom:', event.track) // por enquanto so estou conseguindo logar o da camera, tenho que revisar mais o codigo
event.streams[0].getTracks().forEach((track) => {
this.remoteCameraStream.addTrack(track)
})
})
// Observação das mudanças na sala
onSnapshot(roomRef, async (snapshot) => {
const data = snapshot.data()
if (
Expand All @@ -166,25 +164,27 @@ export default {
},
async joinRoomById(roomId, streamType) {
// Inicialização e configuração
const roomRef = doc(collection(db, 'rooms'), roomId)
const roomSnapshot = await getDoc(roomRef)
if (roomSnapshot.exists) {
this.peerConnection = new RTCPeerConnection(this.configuration)
if (streamType == 'camera') {
// Adição das tracks com base no tipo de stream
if (streamType === 'camera') {
this.localCameraStream.getTracks().forEach((track) => {
track.identifier = 'camera'
track.contentHint = 'camera'
this.peerConnection.addTrack(track, this.localCameraStream)
})
} else if (streamType == 'screen') {
} else if (streamType === 'screen') {
this.localScreenStream.getTracks().forEach((track) => {
track.identifier = 'screen'
track.contentHint = 'screen'
this.peerConnection.addTrack(track, this.localScreenStream)
})
}
// Configuração do ICE
const calleeCandidatesCollection = collection(
roomRef,
'calleeCandidates',
Expand All @@ -196,23 +196,21 @@ export default {
addDoc(calleeCandidatesCollection, event.candidate.toJSON())
})
// Recebimento das tracks remotas
this.peerConnection.addEventListener('track', (event) => {
console.log('Track received in JoinWithId:', event.track)
event.streams[0].getTracks().forEach((track) => {
if (streamType == 'camera') {
this.remoteCameraStream.addTrack(track)
} else if (streamType == 'screen') {
this.remoteScreenStream.addTrack(track)
}
this.remoteCameraStream.addTrack(track)
})
})
// Configuração da resposta
const offer = roomSnapshot.data().offer
await this.peerConnection.setRemoteDescription(
new RTCSessionDescription(offer),
)
const answer = await this.peerConnection.createAnswer()
await this.peerConnection.setLocalDescription(answer)
const roomWithAnswer = {
answer: {
type: answer.type,
Expand Down Expand Up @@ -259,22 +257,30 @@ export default {
},
async openUserScreen() {
try {
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true,
})
if (stream) {
this.emitConfirm()
this.$store.commit('SET_LOCAL_SCREEN_STREAM', stream)
this.$store.commit('SET_REMOTE_SCREEN_STREAM', new MediaStream())
this.createBtnDisabled = false
this.joinBtnDisabled = false
this.hangupBtnDisabled = false
this.joinRoomById(this.roomTestId, 'screen')
if (this.isAdmin) {
this.emitConfirm()
this.$store.commit('SET_REMOTE_SCREEN_STREAM', new MediaStream())
this.createBtnDisabled = false
this.joinBtnDisabled = false
this.hangupBtnDisabled = false
}
if (!this.isAdmin) {
try {
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true,
})
if (stream) {
this.emitConfirm()
this.$store.commit('SET_LOCAL_SCREEN_STREAM', stream)
this.createBtnDisabled = false
this.joinBtnDisabled = false
this.hangupBtnDisabled = false
this.joinRoomById(this.roomTestId, 'screen')
}
} catch (e) {
this.$toast.error('Error in capturing your media device:' + e.message)
}
} catch (e) {
this.$toast.error('Error in capturing your media device:' + e.message)
}
},
Expand Down

0 comments on commit 2d9d3f4

Please sign in to comment.