philnash / mediadevices-camera-selection Goto Github PK
View Code? Open in Web Editor NEW๐ฅ Examples on how to switch devices with the mediaDevices API
License: MIT License
๐ฅ Examples on how to switch devices with the mediaDevices API
License: MIT License
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
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
...
Camera selection isn't working on android devices(browser).
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
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>> ' + 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(); }
})
}
This problem has been bothering me for a long time. Thank you very much!
The app works perfectly fine on chrome but when it is accessed from in-app Facebook browser mediaDevices api is not working.
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
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.