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.
Related
Looking at this handy page:
HTML5 Video Events and API
has been extremely useful. However, there's one attribute of an HTML5 video that I want to be able to get or set programmatically, and it's not listed there. So I'm wondering, is it possible?
I want to be able to detect whether the 'full screen' button has been clicked by the user, and potentially I want my code to switch the video into or out of full screen mode automatically.
Can it be done? And if so, how do you do it?
I'm using IE harnessed within a Visual Studio WebBrowser element, if that makes a difference.
You can make the video fullscreen using Full screen api.
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
Check this answer:
https://stackoverflow.com/a/6039930/3898364
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.
I would like to know how to speed up a youtube video 2x without the user clicking on the HTML5 (of the video), but instead by modifying the URL.
For example, I know how to watch video starting at a specific time by appending to the URL the parameter &t=1m1s (for 1 minute and one second). Is it possible to use a similar method to speed up the video 2x?
What parameters should I add to the URL to watch video in double speed (I'm using html5)?
There's no way to change playback speed by URL arguments.
Anyway, if you're working with HTML, you can take advantage of the YouTube Player iFrame API.
Here's how to configure your player with all the JavaScript:
https://developers.google.com/youtube/iframe_api_reference#Getting_Started
And here's the function you're looking for to set playback speed:
https://developers.google.com/youtube/iframe_api_reference#Playback_rate
So you can edit your onPlayerReady function like this:
function onPlayerReady(event) {
player.setPlaybackRate(2); // This is what you're looking for
event.target.playVideo();
}
You can of course pass on step 5 of the documentation as this will stop your video from playing after six seconds.
If you have trouble setting that up, I'll edit a JSFiddle later (couldn't do it at work as my Flash plugin won't launch).
Update :
Here's the JSFiddle working fine with this code exactly:
http://jsfiddle.net/jpreynat/e11oy0eu/
I was trying to do this exact same thing earlier this week.
A solution purely from a URL parameter isn't possible. (or if it is,
it's not documentation here:
https://developers.google.com/youtube/player_parameters)
I came accros this JSFiddle by Johan Preynat: http://jsfiddle.net/jpreynat/e11oy0eu/
Worked for me, so hopefully it'll be useful for you too
HTML
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
JavaScript
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
player.setPlaybackRate(2);
event.target.playVideo();
}
See also the YouTube documentation on this:
https://developers.google.com/youtube/iframe_api_reference
Can you inject a shift > or < from users input via url or easier javascript? Maybe its easier to force the hot key press from the users end.
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.
I am wondering how I make get an audio file to play 'continuously' on all pages. So if the audio file has played for 20 seconds, then when navigating on another page it will continue from where it left off. I also am trying to get the volume to decrease after navigating away from my home page. Any tips or advice would me appreciated! Thanks =D
<audio src="songforsite.mp3" loop="true" autoplay="true" controls>
Unsupported in Firefox
</audio>
Yes, it is possible. try this:
<audio preload="auto" src="a.mp3" loop="true" autobuffer>
Unsupported in Firefox
</audio>
<script>
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
var song = document.getElementsByTagName('audio')[0];
var played = false;
var tillPlayed = getCookie('timePlayed');
function update()
{
if(!played){
if(tillPlayed){
song.currentTime = tillPlayed;
song.play();
played = true;
}
else {
song.play();
played = true;
}
}
else {
setCookie('timePlayed', song.currentTime);
}
}
setInterval(update,1000);
</script>
If you really navigate to another page, then you will not get really continuous playback.
There are three common approaches:
open your audio player in a popup
frames: one main frame for your page to display in, a small frame for the audio player
not really navigating to other pages, but do everything with AJAX and thereby not actually reloading the page, but only changing parts of the document structure dynamically; maybe adding real link functionality including changing the address bar by using the HTML5 History API
All approaches have their pros/cons. Popup is maybe the easiest to implement, and has the least drawbacks (compared to frames).
I also am trying to get the volume to decrease after navigating away from my home page.
Then catch any clicks on your “home” link/button, and call the volume method of the audio element with a parameter value ranging from 0 to 1 to set the volume.
well .. a clean and neat way to do it , is the way that soundcloud.com and spoify.com made through ajaxifing all the pages
fix a page and change the pages content through ajax ,and change the url as well to give the user the illusion of navigating
this is not the easiest or fastest solution ,but it's the cleanest one ..far away from the fear of browsers incompatibilities