philnash / mediadevices-camera-selection Goto Github PK

const screenTracks = returnedStream.getVideoTracks()[0];

const tracks = Array.from(localParticipant.videoTracks.values());
console.log("tracks", tracks);
localParticipant.unpublishTracks(tracks);
// Error occurs here

activeRoom.localParticipant.publishTrack(screenTracks);
screenVideo.srcObject = returnedStream;
self.setState({ turnScreen: true, screenTracks: returnedStream });

const connect = Twilio.Video;
window.addEventListener('beforeunload', leaveRoomIfJoined);
// Leave Room.
function leaveRoomIfJoined() {
    if (activeRoom) {
        activeRoom.disconnect();
    }
}

function setupVideoClient() {

    $.post(APP_URL + "/token-video", {
            forPage: window.location.pathname,
            _token: $('meta[name="csrf-token"]').attr("content"),
            user_id: 3779,
            to_uid: 25
        })
        .done(function(data) {

            var room1;
            Twilio.Video.createLocalTracks({
                audio: true,
                video: { height: 700 }

            }).then(function(localTracks) {

                return Twilio.Video.connect(data.token, {
                    name: data.roomName,
                    tracks: localTracks,
                    //    logLevel: 'debug',
                    video: { height: 700 }
                });
            }).then(function(room) {
                if (previewTracks) {
                    connectOptions.tracks = previewTracks;
                }
                window.room = activeRoom = room;


                log("Joined as '" + identity + "'");


                // Attach LocalParticipant's Tracks, if not already attached.
                var previewContainer = document.getElementById('media-div');
                if (!previewContainer.querySelector('video')) {
                    attachParticipantTracks(room.localParticipant, previewContainer);
                }

                // Attach the Tracks of the Room's Participants.
                room.participants.forEach(function(participant) {
                    log("Already in Room: '" + participant.identity + "'");
                    var previewContainer = document.getElementById('media-div2');
                    attachParticipantTracks(participant, previewContainer);
                });

                // When a Participant joins the Room, log the event.
                room.on('participantConnected', function(participant) {
                    log("Joining: '" + participant.identity + "'");
                });

                // When a Participant adds a Track, attach it to the DOM.
                room.on('trackSubscribed', function(track, trackPublication, participant) {
                    log(participant.identity + ' added track: ' + track.kind);
                    var previewContainer = document.getElementById('media-div2');
                    attachTracks([track], previewContainer);
                });

                // When a Participant removes a Track, detach it from the DOM.
                room.on('trackUnsubscribed', function(track, trackPublication, participant) {
                    log(participant.identity + ' removed track: ' + track.kind);
                    detachTracks([track]);
                });

                // When a Participant leaves the Room, detach its Tracks.
                room.on('participantDisconnected', function(participant) {
                    log("Participant '" + participant.identity + "' left the room");
                    detachParticipantTracks(participant);
                });

                // Once the LocalParticipant leaves the room, detach the Tracks
                // of all Participants, including that of the LocalParticipant.
                room.on('disconnected', function() {
                    log('Left');

                    if (previewTracks) {
                        previewTracks.forEach(function(track) {
                            track.stop();
                        });
                    }
                    detachParticipantTracks(room.localParticipant);
                    room.participants.forEach(detachParticipantTracks);
                    activeRoom = null;

                });
            }, function(result) {
                // Reject callback.
                console.log('error: ' + result);
                //alert(result);
                DialScreenOn();
            });

        })
        .fail(function() {

            updateCallStatus("Could not get a token from server!");
        });
}
// Activity log.
function log(message) {
    console.log(message);
    // var logDiv = document.getElementById('log');
    // logDiv.innerHTML += '<p>&gt;&nbsp;' + message + '</p>';
    // logDiv.scrollTop = logDiv.scrollHeight;
}

// Leave Room.
function leaveRoomIfJoined() {
    if (activeRoom) {
        activeRoom.disconnect();
    }
}
// Attach the Tracks to the DOM.
function attachTracks(tracks, container) {
    tracks.forEach(function(track) {
        if (track) {
            container.appendChild(track.attach());
        }
    });
}
// Attach the Participant's Tracks to the DOM.
function attachParticipantTracks(participant, container) {
    var tracks = Array.from(participant.tracks.values()).map(function(
        trackPublication
    ) {
        return trackPublication.track;
    });
    attachTracks(tracks, container);
}

// Detach the Tracks from the DOM.
function detachTracks(tracks) {
    tracks.forEach(function(track) {
        if (track) {
            track.detach().forEach(function(detachedElement) {
                detachedElement.remove();
            });
        }
    });
}

// Detach the Participant's Tracks from the DOM.
function detachParticipantTracks(participant) {

    var tracks = Array.from(participant.tracks.values()).map(function(
        trackPublication
    ) {
        return trackPublication.track;
    });
    detachTracks(tracks);
}

function stopTracks(tracks) {
    tracks.forEach(function(track) {
        if (track) { track.stop(); }
    })
}