SimpleWebRTC with switchable Audio and Video call - webrtc

I am using SimpleWebRTC for Audio Video calls.
I am able to make Video call or Audio call individually as below.
For Audio:
var webrtc = new SimpleWebRTC({
url : myURL,
localVideoEl : 'localAudio',
autoRequestMedia : true,
remoteVideosEl : '',
debug : false,
detectSpeakingEvents : true,
autoAdjustMic : false,
media : {
video : false,
audio : true
},
receiveMedia : {
offerToReceiveAudio : 1,
offerToReceiveVideo : 0
}
});
For Video
webrtc = new SimpleWebRTC({
url : result,
localVideoEl : 'localVideo',
remoteVideosEl : '',
autoRequestMedia : true,
debug : false,
detectSpeakingEvents : true,
autoAdjustMic : false
});
My Video element:
<video id="localVideo" style="height: 200px;" oncontextmenu="return false;"></video>
With events:
webrtc.on('videoAdded', function (video, peer) {
console.log('video is added', peer);
});
How can I switch video stream to audio one? Or vice versa? How can I effectively convert active video call to audio one, or and Audio call to video one without making a new SimpleWebRTC object?
I am okay with workarounds, if any.
I have tried is make a video call, and make use webrtc.pauseVideo(); which still transmits the stream and uses my camera and bandwidth. I certainly don't want that.

Related

How to save video stream recorded from webcam in safari browser?

Safari doesn't support MediaRecorder to listen to the stream from WebCam like the below code.
This works perfectly in Chrome and I'm able to convert the blob to a webm video file.
if(navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then (stream => {
videoRef.srcObject = stream
mediaRecorder.value = new MediaRecorder(stream, {mimeType: 'video/webm; codecs=vp8,opus'})
mediaRecorder.value.addEventListener('dataavailable', function(e) {
blobs.push(e.data)
})
})
}
})
I need to save the video streamed from webcam in my server. What should be the approach to achieve the same in Safari?
I researched a lot, saw a similar question. But there was no proper solution given.
Could someone guide to a tutorial on how to achieve this using WebRTC if needed?

How to change the aspect ratio in publishing with WebRTC for Ant Media Server?

I would like to use different aspect ratio for WebRTC publishing in Ant Media Server.
How to change it?
You can open the index.html file under /usr/local/antmedia/WebRTCAppEE/WEB-INF/index.html
and change the lines below
var mediaConstraints = {
video : true,
audio : true
};
to
var mediaConstraints = {
video : { aspectRatio: 16/9 },
audio : true
};
You can use 4/3 for the aspect ratio as well.

Low latency RTMP playback with video.js

i'am trying to play a RTMP stream with low latency uinsg HTML5, vido.js and videojs-flash. For now i can get the stream to display with a 3-4 seconds latency but playing the same stream with ffplay gives a sub-second latency.
Looking at older videojs version it seems that some code that allowed to specify flashvars to be passed to the swf object were never merged. In newer video.js version, one can use the videojs-flash plugin to play a flash video and this plugin seems to support flashVars in the player options and this vars are passed to the swf object.
Did anyone used this feature and how can i provide the flashVars option to the videojs object .
This is the code i tried so far :
var player = videojs('my-video', {
autoplay: true,
muted: true,
preload: "auto",
sources: [{
type: "rtmp/flv",
}],
flashVars: {
buffertime: 0
}
});
if found an answer to my own question that reduces the latency quite a lot. It's not very stable for now since i sometimes get ~1s latency but can go up to 3s. The solution is to use a patched swf that will interpre take into account the buffering options. Now the player initialization becomes:
var player = videojs('my-video', {
techOrder: ['flash'],
autoplay: true,
sources: [{
type: "rtmp/flv",
}],
bufferTime: 0,
flash: {
swf: "js/video-js.swf",
flashVars: {
bufferTime: 0,
autoPlay: true,
bufferTimeMax: 0.25
}
}
});
the video-js.swf is compiled from the patched version at :
https://github.com/sea-kg/video-js-swf.git
Just compile this version and use the "swf:" flash option to provide the path to this swf.
This reduces the latency significantly but in my experience, the latency can vary per connection.

How to receive audio/video without accepting the autorequest popup in WebRTC?

I want to receive audio/video without accepting the permission that browser asks to access mic/cam. Is it possible?
I'm using SimpleWebRTC, my code is here:
// create our webrtc connection
var webrtc = new SimpleWebRTC({
// the id/element dom element that will hold "our" video
localVideoEl: 'localVideo',
// the id/element dom element that will hold remote videos
remoteVideosEl: '',
// immediately ask for camera access
autoRequestMedia: true,
debug: false,
detectSpeakingEvents: true,
autoAdjustMic: false,
media: {
video: {
frameRate: {
max: 30
},
width: {
max: 176
},
height: {
max: 144
}
},
audio: true
},
});
If I delete this => autoRequestMedia: true or change it to false, so it doesn't ask to get permission and the result is NOTHING
:(
If I leave this => autoRequestMedia: true to be true, so the browser asks to get permission,
2-1: if I don't accept, the result is NOTHING :(
2-2: if I accept, it works :)
So my problem is how I can receive(not send) data(audio/video) without accepting that permission popup or even set that autoRequestMedia to false and receive data?
Thanks
This is a browser restriction. Otherwise any application could open your devices silently in the background and listen for you.
However it is possible to call getUserMedia() only once at your app start (this is where the popups appears) and reuse that onward everywhere thus preventing any additional popups at incoming audio/video.

Can I receive video without giving permission to browser to use my camera in SimpleWebRTC?

Does SimpleWebRTC has this feature to get data(video/audio) without giving permission to browser to use my camera/microphone?
// create our webrtc connection
var webrtc = new SimpleWebRTC({
// the id/element dom element that will hold "our" video
localVideoEl: 'localVideo',
// the id/element dom element that will hold remote videos
remoteVideosEl: '',
// immediately ask for camera access
**autoRequestMedia: true,**
debug: true,
detectSpeakingEvents: true,
autoAdjustMic: false,
media: {
video: false,
**audio: true**
},
});
When I change those parts surrounded by asterisks to true it works, otherwise it doesn't.
Have you tried setting autoRequestMedia to true and while having both video and audio of the media object set to false? You should receive the readyToCall event and can join the room as shown on the simplewebrtc homepage.
First negotiate (accept the call/join the room) with video and audio and then disable the video, somehting like webrtc.videoStreams.disable()