Coder Social home page Coder Social logo

philnash / mediadevices-camera-selection Goto Github PK

View Code? Open in Web Editor NEW
167.0 6.0 66.0 1.34 MB

๐ŸŽฅ Examples on how to switch devices with the mediaDevices API

License: MIT License

CSS 0.58% HTML 0.13% JavaScript 99.30%
getusermedia webrtc mediadevices camera

mediadevices-camera-selection's Introduction

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.

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 People

Contributors

dependabot[bot] avatar philnash avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

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
room

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

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
...

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.