philnash / mediadevices-camera-selection

🎥 Examples on how to switch devices with the mediaDevices API

mediaDevices Camera Selection

An example of using the mediaDevices API to choose a user's camera.

This repo now covers a couple of projects showing how to use this.

• The basics
• As part of a video chat

Basics on mediaDevices and camera selection

To see how to use the API with vanilla JavaScript and a basic example. Check out the blog post on choosing cameras in JavaScript with the mediaDevices API.

See it in action

You can test the basic version of this project by visiting it online here.

Run the project yourself

You should run this project on a local web server. I like to use serve for this, but you can do so as you choose.

Clone or download the repo, then change into the directory and host the files.

git clone https://github.com/philnash/mediadevices-camera-selection.git
cd mediadevices-camera-selection

If you want to use serve, you can install and use it with npm like so:

npm install
npm run serve

The page will be available at localhost:5000/index.html.

Selecting cameras during a video chat

This repo contains a modified version of the Twilio Video quickstart application with added camera selection.

Run the project yourself

Clone or download the repo, then change into the directory and install the dependencies.

git clone https://github.com/philnash/mediadevices-camera-selection.git
cd mediadevices-camera-selection
npm install

Copy the .env.template file to .env and fill in the details from your Twilio account.

Run the application with:

npm start

You can now view the application at localhost:3000. Join a room, then use the select element to change your camera. To test this with a mobile device and switch between front and back cameras, I recommend using ngrok as described below.

Viewing on a mobile device.

If you want to test this on a mobile device, you will need to make a tunnel to your local machine. I recommend you use ngrok for this. You can download and install ngrok from ngrok.com. Once you have it installed, run

ngrok http 5000

This will open a tunnel to the locally hosted project. You will get two randomly generated URLs, enter the HTTPS version into the browser in your mobile device.

mediadevices-camera-selection's Issues

Voice issue in ios devices

hello @philnash we have implemented this library but getting sound issue into ios devices like we have tested in iphone 11, iphone 11 pro , iphone 13, And in iphone 8 and 5s its working, We are also getting issue using //sdk.twilio.com/js/video/releases/2.17.1/twilio-video.min.js javascript sdk in our application

camera not off when disconnect video call

using webcam in browser camera light in not off when i disconnect call
here is my code in jquery

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(); }
    })
}

Switching camera in mobile Safari sometimes causes remote side to lose video

Sometimes, not always, when switching cameras the remote side loses video. The issue is intermittently reproducible after a few tries usually. On remote side I get a 'trackUnsubscribed' but then never get the 'trackSubscribed' event that should come right after that for the new camera video. Remote side can be another iOS device or an Android device, only seems to matter that the side switching cameras is iOS Safari. This is reproducible in the quickstart code from the repository running as is with no modifications. I first ran into this with app we're developing based on the quickstart code. Seems like it is either a bug in twilio-video.js or maybe Safari.

Happens in these iOS version so far:
iOS 13.3.1
iOS 13.4.1

mediaDevices API isn't working on Facebook in-app browser

The app works perfectly fine on chrome but when it is accessed from in-app Facebook browser mediaDevices api is not working.

Could not get stream error when unpublish existed tracks

This time, I tried to switch local video track to screen sharing. It seems to be the same logic as this repository. But I could not unpublish existed tracks due not to get stream error.

Could not get stream: TypeError: track must be a LocalAudioTrack, LocalVideoTrack, LocalDataTrack, or MediaStreamTrack

This is React code:

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 });

Tracks fetched successfully like this:

tracks 
 [LocalVideoTrackPublication]
    0: LocalVideoTrackPublication
      isTrackEnabled:(...)
      priority: (...)
      trackName: "XXXXXXXXXXXXX"
      trackSid: "XXXXXXXXXXXX"
      kind: "video"
      track: LocalVideoTrack
          isStarted: (...)
          isEnabled: (...)
          isStopped: (...)
          kind: "video"
          name: "XXXXXXXXXXXXXXXXXX"
          mediaStreamTrack: MediaStreamTrack
...

It does not work in iphone7 Chrome browser

Thank you very much

This problem has been bothering me for a long time. Thank you very much!

unable to switch camera on android devices

Camera selection isn't working on android devices(browser).

Unable to switch camera in Iphone XS

trackSubscribed function is not getting triggered when i try to flip the camera in Iphone XS mobile. Please let me know if i need to update any of this code.

Thanks in advance

NotReadableError: Could not start video source

when try to switch camera from front to rear on chrome 69.0.34 on android produce that error
NotReadableError: Could not start video source

it's working fine on iOS Safari

thanks

Unable to switch camera in react project

Hi @philnash

Thanks for the example.

The example is working fine in all android and ios devices.

But in reactjs project it is not working.