Is it possible to swap the camera in during a video call on mobile?
I can get the available cameras using MediaStreamTrack.getSources().
But I'm able to swap them mid-call.
Any ideas on how to swap during a video call using html and javascript (I'm developing a hybrid app).
Also: is it possible to make Safari (iOS) compatible for webRTC without any plugin?
Any ideas on how to swap during a video call using html and javascript.
Something like this should work in Chrome*:
function switchCamera() {
// get new stream (different camera)
getUserMedia(constraints, function(newStream){
var oldStream = peerConnection.getLocalStreams()[0];
// toggle streams
peerConnection.removeStream(oldStream);
peerConnection.addStream(newStream);
// re-negotiate
peerConnection.createOffer(function (offer) {
peerConnection.setLocalDescription(offer);
// sendOfferToPeers(offer);
});
}, function(e) {
console.log(e);
})
}
function gotOffer(offer) {
peerConnection.setRemoteDescription(offer);
peerConnection.createAnswer(function(answer) {
peerConnection.setLocalDescription(answer);
// sendAnswerToPeers(answer);
});
}
function gotAnswer(answer) {
peerConnection.setRemoteDescription(answer);
}
*you mentioned something about being on mobile so the way you obtain the stream might be different. Also I didn't test this code and the API looks different, have a look here for the correct function calls createAnswer etc.. But the gist of it should be the same:
Acquire new stream
Update peerConnection
Inform peers (re-negotiate)
Also: is it possible to make Safari (iOS) compatible for webRTC without any plugin?
No. You can have a look here for updates.
Related
Using the standard gamePad code, not finding sound files even though the path name is correct?
I have definitely researched this question. For sure, I have found code on SO claiming to solve this dilemma, but this published code doesn't.
I am successfully finding the sound file using Preview under BBEdit's "Markup" Menu. But, the oh-oh surfaces when running my game on my commercial Server.
I am even successful when using keypress code is activated -- local on my Mac and on the Server.
The failure is when I am using the external Server to run my gamePad code to find the sound file when all my source code is loaded onto my Server. In this case, the sound does not play.
FILE HIERARCHY
games folder
Game_1 folder
game1.html
Game_Support folder
audio folder
js folder
HTML
<body onload="doBodyOnLoad()">
JS:
function doBodyOnLoad() {
$(document).ready(function() {
// ... //
}); // $(document).ready
} // doBodyOnload
function setupKeypresses() {
$(document).keydown(function(evt) {
let code = evt.keyCode || evt.which;
// for example:
if (code === "R")
{
movePaddleRight(); // this will call ouch() below
}
});
} // setupKeypresses
function PlaySound(id, src) {
let theSound = new Audio();
theSound.src = src;
theSound.play();
} // PlaySound
function ouch() {
updateScore(--thisScore);
// even the absolute path doesn't work ?
// var theSnd = "http://lovesongforever.com/games/Game_1/Game_1_Support/audio/explosion.mp3";
var theSnd = "Game_1_Support/audio/explosion.mp3";
PlaySound("audioPlaceHolder", theSnd);
// fade either the whole Board (okay), or just the Paddle (not! so much)
doFade("#gameBoard"); // doFade("#gameBoard > #gamePaddle") [not ready for Prime Time]
} // ouch
Thanks bunches for your patience with me!
This is because you're trying to autoplay an Audio element without user interaction to initiate the audio.
Firefox expresses a blocked play() call to JavaScript by rejecting the promise returned by HTMLMediaElement.play() with a NotAllowedError. All major browsers which block autoplay express a blocked play via this mechanism. In general, the advice for web authors when calling HTMLMediaElement.play(), is to not assume that calls to play() will always succeed, and to always handle the promise returned by play() being rejected.
https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/
I think it will work if you click or tap on the page first. Gamepad button presses may work for this too depending on the implementation.
I mean without cordova or other framework. I'm pretty sure i need to write Java code and link it somehow with html5 through the android webview.
If it is possible, can get a little example how to connect to the camera or other sensor.
Some of the sensors have a JavaScript API such as geolocation, orientation (gyroscope) and the battery. To access the camera you could use MediaDevices.getUserMedia, however, this is still in an experimental stage and is not supported by all Android devices. For more information refer to this link.
Look into JavascriptInterface
https://developer.android.com/reference/android/webkit/WebView.html
https://developer.android.com/guide/webapps/webview.html
Specifically, addJavascriptInterface(java.lang.Object, java.lang.String))
#JavascriptInterface
class JsInterface {
public void startCamera() { ... }
}
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsInterface(), "androidInterface");
Basically, add the JavascriptInterface, and enable javascript on the web view. Then in your javascript you can detect if the interface exists like so:
if ("undefined" != typeof androidInterface) {
androidInterface.startCamera();
}
Now in the Java code for startCamera, you can do whatever native stuff you need done.
How can I enable getUserMedia/HTML5 Webcam access calls on Raspbian(chromium) to the camera? I only found answers to stream pictures to HTML5 sites, but I actually need this on device. I already have the code running to get the Pictures with JS. Moreover, raspivid is showing me correct pictures. So how do I make Chromium to notice the camera?
Thank you!
If you just want to stream video from the camera into a web page then this is straightforward.
You need to use Firefox or Chrome as the browser (and Opera??), create element in your web page and then include JS code similar to this:
navigator.getUserMedia(
{
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var url = window.URL || window.webkitURL;
video.src = url ? url.createObjectURL(stream) : stream;
}
mediaStream = stream;
video.play();
},
function(error) {
console.log("ERROR: " + error);
}
);
There are details to deal with such as resizing the output window to match the input stream.
Take a look at my Tutorial on this which includes a simple working demo and complete code - as well as static image capture from the video feed.
You can use a bit of a JavaScript workaround, as the actual methods for recording directly from the browser using getusermedia aren't implemented yet. Whammy.js is a good place to start (https://github.com/antimatter15/whammy) and there's a good guide here: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ (Too much code for me to put here!)
Not sure if that's what you're asking, but it's there should you need it.
I'm using video.js to embed a video into an HTML page. It is to be used as a ipad-only web app so I believe that it's using the native HTML5 player. I'm trying to disable the click-to-play functionality (so that the user must use the controls) but I am having trouble doing so.
I've tried unbinding the click event (using jQuery) form the video/video player/poster and I've tried using addevent to add e.preventDefault() to the video but none of this seems to work.
Ps. I found a couple of posts saying you could comment out a line in the code, but this line doesn't exist in my version - maybe the plugin has been rewritten.
Check here
https://github.com/videojs/video.js/blob/master/docs/api/vjs.MediaTechController.md#removecontrolslisteners
So for example
v = videojs('scene04-video');
v.tech.removeControlsListeners();
You can try this. It helped me. Just add this to css file:
.video-js.vjs-playing .vjs-tech {
pointer-events: none;
}
It would be helpful to know which version you are using. This works for me on 4.1 (latest api)
// Disable big-play-button
videojs.Player.prototype.options_.children.bigPlayButton = false;
// Override click handler on media object;
videojs.MediaTechController.prototype.onClick = function() {};
// Initialize video
var vid = videojs("video", {});
// Show controls (since in my browser it doesn't think it needs to inititally)
vid.controlBar.show();
UPDATE: I should clarify that the above only works using the dev.js API (not the prod/minified version). In the minified version, the MediaTechController's onClick function name isn't preserved, you can't reliably override it. In this case, you can try manually disconnecting the the HTML5 and Flash click events:
videojs.Html5.off('click');
videojs.Flash.off('click');
var vid = videojs("video", {}, function() {
this.bigPlayButton.hide();
});
// Again - show the controlbar (optionally)
vid.controlBar.show();
Check this:
.vjs-tech {
pointer-events: none;
}
Can somebody help me on how to capture audio from default microphone using HTML5?
There are many samples available, but none of them seem to working.
I have tried Audio capturing with HTML5
As it only works with chrome with flags enabled. but it's getting NavigatorUserMediaError. The video icon on the address bar has a red cross sign and its tooltip says 'this page has been blocked from accessing your camera and microphone'
There's some great articles on HTML5 Rocks. This is just one that I pulled.
http://updates.html5rocks.com/2012/09/Live-Web-Audio-Input-Enabled
// success callback when requesting audio input stream
function successCallback(stream) {
var audioContext = new (window.webkitAudioContext)();
// Create an AudioNode from the stream.
var mediaStreamSource = audioContext.createMediaStreamSource( stream );
// Connect it to the destination to hear yourself (or any other node for processing!)
mediaStreamSource.connect( audioContext.destination );
}
function errorCallback() {
console.log("The following error occurred: " + err);
}
navigator.webkitGetUserMedia( {audio:true}, successCallback, errorCallback );
make sure you start the demo from a webserver - simply copy/paste & start from file system won't work - in chrome you never get access to the mic this way.
Recently (not sure when) Chrome added the requirement that the page be accessed over SSL to enable getUserMedia.