I am using ionic 2 with webrtc to get a video stream from both front and rear camera.
Please see my typescript code below:
if (this.isFrontCam) {
constraints = {
mandatory: {},
optional: [{sourceId: this.cameras[0]}]
};
} else {
constraints = {
mandatory: {},
optional: [{sourceId: this.cameras[1]}]
};
}
if (this.currentVideoStream && this.currentVideoStream !=null) {
this.currentVideoStream.getTracks().forEach(function (track) {
track.stop();
});
this.currentVideoStream.release();
this.currentVideoStream = null;
}
var n = <any>navigator;
n.getUserMedia = n.getUserMedia || n.webkitGetUserMedia || n.mozGetUserMedia || n.msGetUserMedia;
//getting local video stream
n.getUserMedia({
audio: true,
video: constraints
}, function (myStream) {
alert("Current Video stream " + self.currentVideoStream);
self.currentVideoStream = myStream;
alert("New Stream"+ myStream);
//displaying local video stream on the page
(<HTMLVideoElement>document.getElementById('localVideo')).src = window.URL.createObjectURL(myStream);
I am getting 2 different (front and rear) cameras device ids (this.cameras) and if I use them individually both cameras are working as expected but when I flip them using the above code(button click from UI calls this function) like above they are not working. It simply shows black screen.
I was able to solve this by removing the below 2 lines:
this.currentVideoStream.release();
this.currentVideoStream = null;
and adding (<HTMLVideoElement>document.getElementById('localVideo')).play();
Related
I am using Agora, and it has some issues. One of them is the speaker's voice comes out to the media sound.
On the browser, it can't control the media volume, So, I created an app to handle this. In the app, I dispatch the volume up/down button to control media volume.
However, this method created howling issue. So, I'd like to send the sound to STREAM_VOICE_CALL and use AEC(Acoustic Echo Cancellation) API on Android so that the sound comes out to the right stream and it can handle the echo problem.
what I wrote,
private fun enableVoiceCallMode() {
with(audioManager) {
volumeControlStream = AudioManager.STREAM_VOICE_CALL
setStreamVolume(
AudioManager.STREAM_VOICE_CALL,
audioManager.getStreamVolume(AudioManager.STREAM_VOICE_CALL),
0
)
}
}
But this didn't work.
And also, I tried to apply AEC like this:
private fun enableEchoCanceler() {
if (AcousticEchoCanceler.isAvailable() && aec == null) {
aec = AcousticEchoCanceler.create(audioManager.generateAudioSessionId())
aec?.enabled = true
} else {
aec!!.enabled = false
aec!!.release()
aec = null
}
}
private fun releaseEchoCanceler() {
aec!!.enabled = false
aec?.release()
aec = null
}
However, I don't know if AcousticEchoCanceler.create(audioManager.generateAudioSessionId()) is correct way or not.
please help me out.
This was all working just fine until the Chrome 84 update, with 85 not fixing it either. Disabling chrome altogether on the impacted devices is my only current workaround. I am trying to render the camera preview from a Samsung Galaxy Tab A inside a cordova app.
First, I fetch the devices and select the rear facing camera if there are multiple:
navigator.mediaDevices.enumerateDevices().then(function(dev) {
ctrl.devices = dev.filter(function(el) { return el.kind == "videoinput"; });
if (ctrl.devices.length > 1) {
// default to the back facing camera
ctrl.selectedDevice = ctrl.devices[1];
ctrl.startCamera();
}
else if (ctrl.devices.length == 1) {
ctrl.selectedDevice = ctrl.devices[0];
ctrl.startCamera();
}
else {
ctrl.NoDeviceFound = true;
console.log("No camera found!");
}
});
Once I have a device selected, I start the camera up with this function:
ctrl.startCamera = function startCamera() {
ctrl.stopCamera(); //this function just stops the stream if one was already open
if (ctrl.selectedDevice) {
var constraints = {video: { deviceId: { exact: ctrl.selectedDevice.deviceId } }};
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
}
}
My success handler is where the stream then gets injected into the video element and rendered:
function handleSuccess(stream) {
ctrl.stream = stream;
window.stream = stream; // make stream available to browser console
window.video = angular.element("video")[0];
if (window.screen.orientation.type.indexOf('landscape') == 0) {
video.width = angular.element("div.modal-body").width();
video.height = video.width / 1.33;
}
else {
video.height = angular.element("div.modal-body").height();
video.width = video.height * .75
}
if (typeof video.srcObject != "undefined") {
video.srcObject = stream;
}
else {
video.src = window.URL.createObjectURL(stream);
}
video.play();
}
I have a simple <video autoplay></video> element as my target.
Here's a video of what the preview looks like
It ends up just being the preview that is broken though. You can see that it's stuck on the first frame there, however if I go ahead and capture an image it will accurately reflect where the camera is pointed despite the rendered stream being broken. Occasionally instead of getting stuck on that first frame, it will sort of 'boomerang' between the first few frames.
Edit: I believe this issue is being tracked here
It was in fact this chromium bug, which has been fixed for Chrome 86 and confirmed working on my devices.
I use navigator.mediaDevices.enumerateDevices to retrieve list of all video devices (element.kind === 'videoinput') and then call navigator.mediaDevices.getUserMedia(constraints) call to rotate video devices (using deviceId as constraint). Everything works fine on Windows Chrome / Firefox, but on android phone (tried Samsung, Asus, Huawei with Android 8/9) this call fails for back camera with NotReadableError / Could not start video source (for Chrome) or AbortError / Starting video failed (for Firefox).
Strangely same code works ok in iOS / Safari.
Also this only happens when WebRTC call is present in browser. If there is no call I can select any video device.
Also if I select back camera first and try to establish the call, it does not work, I get similar error.
I know it's far-fetched but maybe someone had same/similar issue?
All browser versions are up-to-date.
[UPDATE - code snippet and log]
switchCamera() {
try {
if (this.localStream) {
const tracks = this.localStream.getTracks();
console.log('switchCamera stopping this.localStream tracks', tracks);
tracks.forEach((track: MediaStreamTrack) => {
console.log('switchCamera stopping track', track);
track.stop();
});
console.log('switchCamera stop stream');
}
const constraints = {
audio: true,
video: { facingMode: this.faceCamera ? 'environment' : 'face' }
};
this.faceCamera = !this.faceCamera;
console.log('switchCamera constraints: ', constraints);
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
console.log('getUserMedia:', stream);
this.logText('got stream');
this.localVideo.srcObject = stream;
const videoTracks = stream.getVideoTracks();
const audioTracks = stream.getAudioTracks();
console.log('videoTracks', videoTracks);
if (videoTracks.length > 0) {
console.log(`Using video device: ${videoTracks[0].label}`);
}
const videoTrack = videoTracks[0];
const audioTrack = audioTracks[0];
console.log('Replacing track for pc', videoTrack, audioTrack);
const pc = this.session.sessionDescriptionHandler.peerConnection;
const videoSender = pc.getSenders().find(s => {
return s.track && s.track.kind === videoTrack.kind;
});
const audioSender = pc.getSenders().find(s => {
return s.track && s.track.kind === audioTrack.kind;
});
if (videoSender) {
console.log('videoSender.replaceTrack', videoTrack);
videoSender.replaceTrack(videoTrack);
}
if (audioSender) {
console.log('audioSender.replaceTrack', audioTrack);
audioSender.replaceTrack(audioTrack);
}
})
.catch(e => {
console.log('getUserMedia error:', e.name, e.code, e.message);
});
} catch (e) {
window.alert(e);
}
}
this is the log from chrome remote device debug:
The error is "NotReadableError", "Could not start video source" which means that the underlying device handle could not be obtained by chrome.
Again, safari/ios works ok.
For mobile devices, there is a dedicated way of how to select between front & back camera.
VideoFacingMode - https://www.w3.org/TR/mediacapture-streams/#dom-videofacingmodeenum
TL;DR
window.navigator.mediaDevices.enumerateDevices().then(devices => {
if (devices.filter(device => device.kind === 'videoinput').length > 1) {
navigator.mediaDevices.getUserMedia({video: {facingMode: 'user' /*'environment'*/}}).then(console.log.bind(this))
}
})
It works for mobile Safari, Chrome and FF.
NOTE
Remember, to stop the previous video track before calling the
getUserMedia with video again, otherwise, you will get an
exception.
Ok, so I narrowed it down to calling navigator.mediaDevices.getUserMedia() in ngInit() (this is Angular app).
Even if I remove all code in .then() handler function, the effect is the same.
Only removing this call solves the issue.
Not sure at this time why such behavior, will investigate it more thoroughly and update.
To switch between front and back cameras on mobile, you need to stop the previous stream before opening a new stream.
if (videoIn.srcObject) {
videoIn.srcObject.getTracks().forEach((track) => {
track.stop();
});
I came across several questions on this subject. I'm trying to select the rear camera on an Android device running Chrome.
So, after some reading :
var selector = document.getElementById('video-source-selector');
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
var videoDevices = devices.map(function (item) {
if(item.kind === 'videoinput'){
return item;
}
}).filter(function( element ) {
return element !== undefined;
});
var max = videoDevices.length;
videoDevices.forEach(function(device, i) {
var html = '';
var div = document.createElement('div');
if(i === max-1){ // last element reached
html += '<option value="'+device.deviceId+'" selected>'+ device.label +'</option>';
}
else {
html += '<option value="'+device.deviceId+'">'+ device.label +'</option>';
}
div.innerHTML = html;
selector.appendChild(div.childNodes[0]);
console.log(device.kind + ": " + device.label +
" id = " + device.deviceId);
});
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
selector.addEventListener("change", function(){
console.log(selector.value); // Works as supposed : returns the ID of the selected device
});
Then, as I'm using Three.js in this app, I'm binding this ID to Jerome Etienne three extension WebcamGrabbing (https://github.com/jeromeetienne/threex.webar):
var videoGrabbing = new THREEx.WebcamGrabbing(selector.value);
Then I had to modify THREEx.WebcamGrabbing class this way (I removed the irrelevant parts):
THREEx.WebcamGrabbing = function(sourceDeviceId){
...
console.log('webcamgrabbing : ', sourceDeviceId); // returns the expected ID
var constraints = {
video: {
optional: [{
sourceId: sourceDeviceId
}]
}
}
// try to get user media
navigator.getUserMedia( constraints, function(stream){
domElement.src = URL.createObjectURL(stream);
}, function(error) {
console.error("Cant getUserMedia()! due to ", error);
});
...
}
But still, Chrome on Android is still giving me the stream of the face camera, whatever device I select...
What do I miss?
EDIT : Based on this topic (GetUserMedia - facingmode), I came up with some logs to see what's happening here :
var constraints = {
audio: false,
video: { facingMode: { exact: "environment" } }
}
console.log('Try to get stream with constraints:', constraints);
navigator.getUserMedia( constraints, function(stream){
var videoTracks = stream.getVideoTracks();
console.log('Got stream with constraints:', constraints); // Ok
console.log('Using video device: ' + videoTracks[0].label); // > Using video device: camera 0, facing back
for(var i = 0; i < videoTracks.length; i++){
console.log('Found video device with contraints : ', videoTracks[i].label); // Found video device with contraints : camera 0, facing back
}
domElement.src = URL.createObjectURL(stream);
}, function(error) {
console.error("Cant getUserMedia()! due to ", error);
});
An alternative way to select the back camera on chrome is to use the enumerateDevices method.
First get all the video input id's:
navigator.mediaDevices.enumerateDevices().then(function(devices) {
devices.forEach(function(device) {
if(device.kind=="videoinput"){
//If device is a video input add to array.
}
});
Then the first element of the array will contain the id of the front camera, the second element will contain the id of the back camera.
Finally put the id of the camera that you want to use
navigator.getUserMedia({audio: false, video: { sourceId: VideoId } }, successCallback, errorCallback);
I'm current working wits AS3 and Flex 4.6 to create an android application.
i'm using the front camera and attach it to a local Video object that i add as an child to an VideoDisplay object.
When i debug on my computer everything is working perfectly, but when i build the project and run it on my Android device my local video display becomes an gray grid.
As example i took an picture of the device.
I wrote this method based on a post here on Stackoverflow to initialize the front and back camera.
private function InitCamera():void {
var CamCount:int = ( Camera.isSupported ) ? Camera.names.length : 0;
for( var i:int = 0; i < CamCount; i++ ) {
var cam:Camera = Camera.getCamera( String( i ) );
if( cam ) {
if( cam.position == CameraPosition.FRONT ) {
CamFront = cam;
continue;
}
if( cam.position == CameraPosition.BACK ) {
CamBack = cam;
continue;
}
if( cam.position == CameraPosition.UNKNOWN ) {
CamFront = cam;
continue;
}
}
}
}
And i wrote this method to create an Video object, attach the front Camera as the default camera and add the Video as an child to an VideoDisplay:
private function SetUpLocalVideo():void {
Debug( "Setting up local video" );
LocalVideo = new Video( this.LVideo.width, this.LVideo.height );
LocalVideo.attachCamera( CamFront );
LVideo.addChild( LocalVideo ); <--- this is the VideoDisplay
}
I've been searching on the internet for an solution, but so far i failed to find any.
Do any one else had this problem before ? can you share you solutions with me ?
I appreciate the help.
Thanks.
Set the render mode to direct on your application.xml
<renderMode>direct</renderMode>
If it still doesn't work, change the dpi settings to 240 of your main flex application.