I'm starting with webRTC and am trying to access to my camera, however, the code doesn't work, although there is no mistakes in it.
The code is:
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia
|| navigator.msGetUserMedia);
if (navigator.getUserMedia){
var constrains ={video:true};
function successCallback(localMediaStream){
var video = document.querySelector("video");
window.stream = localMediaStream;
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata =function(e){
video.play();
}
}
function errorCallback(error){
console.log("Error: ",error);
}
navigator.getUserMedia(constrains,successCallback,errorCallback);
}else{
alert('Sorry, the browser you are using doesn\'t support getUserMedia');
}
Can you help me please?
i am guessing that the code above is put in a html file and accessed directly by clicking on file( and url being like file:///...), this way would work in firefox, but not in chrome, for camera capture to work on chrome, you need to host the file in some server.
also, on an unrelated note, you can replace
video.onloadedmetadata =function(e){
video.play();
}
with simply
video.play();
Its not obvious whether you have a valid HTML5 video element to set the stream on. If you do, you can use the developer tools to verify the stream has been set on the source.
If you have a web server on your development machine, you can host your code that way, and view it 'locally'.
Related
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?
I am trying to add an option of camera switch in video call handled by KMS (Kurento media server) and I am digging throw a lot to their documentation and other sources but I find nothing useful
var options = {
localVideo: videoInput,
remoteVideo: videoOutput,
onicecandidate: onIceCandidate,
mediaConstraints: {
audio: isAudio || call_settings.isAudio,
video: isVideo || call_settings.isVideo
}
}
webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerSendrecv(options, function (
this is my code which is connecting throw peer and all media permission is handled by kurento itself so that I am not able to change the source of media location.
and i am not sure how to do it with kurento any kind of help is appreciable thanks in advance
You can pass custom mediaConstraints to the options or create stream by yourself and send it as videoStream in the options and skip mediaConstraints as mentioned in kurento utils js docs.
For switching device / getting stream based on device, please refer below sample
https://webrtc.github.io/samples/src/content/devices/input-output/
You can refer below doc for videoStream usage
https://doc-kurento.readthedocs.io/en/stable/features/kurento_utils_js.html
I am building a web app and just installed ssl.
Everything seems to be fine except for these two errors I'm getting about fonts being loaded over an insecure connection. The console suggests it's something that Modernizr is doing, but I can't figure out where and how to fix it.
Here's the console output:
The page at 'https://myawesomewebsite.com/' was loaded over HTTPS, but ran insecure content from 'http://themes.googleusercontent.com/static/fonts/rosarivo/v1/OGdIq-p0tOtBN2VMVvO9W_esZW2xOQ-xsNqO47m55DA.woff': this content should also be loaded over HTTPS.
modernizr-2.8.0.min.js:4
The page at 'https://myawesomewebsite.com/' was loaded over HTTPS, but ran insecure content from 'http://themes.googleusercontent.com/static/fonts/inconsolata/v5/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff': this content should also be loaded over HTTPS.
modernizr-2.8.0.min.js:4
I am actually using TypeKit for my fonts, so I have no idea what these Google Fonts are doing on the page and why Modernizr would be loading them.
There is a test for #font-face for CCS3 support in the full build of modernizr. I believe this test code loads some font just to see if that is working.
If you don't need that, use the build configurator on the modernizr page to exclude that from your custom built library.
By the way, it seems that the newer version of modernizr loads the fonts over SSL.
Test Code in modernizr 2.8.3
/*>>fontface*/
// #font-face detection routine by Diego Perini
// javascript.nwbox.com/CSSSupport/
// false positives:
// WebOS github.com/Modernizr/Modernizr/issues/342
// WP7 github.com/Modernizr/Modernizr/issues/538
tests['fontface'] = function() {
var bool;
injectElementWithStyles('#font-face {font-family:"font";src:url("https://")}', function( node, rule ) {
var style = document.getElementById('smodernizr'),
sheet = style.sheet || style.styleSheet,
cssText = sheet ? (sheet.cssRules && sheet.cssRules[0] ? sheet.cssRules[0].cssText : sheet.cssText || '') : '';
bool = /src/i.test(cssText) && cssText.indexOf(rule.split(' ')[0]) === 0;
});
return bool;
};
/*>>fontface*/
// CSS generated content detection
tests['generatedcontent'] = function() {
var bool;
injectElementWithStyles(['#',mod,'{font:0/0 a}#',mod,':after{content:"',smile,'";visibility:hidden;font:3px/1 a}'].join(''), function( node ) {
bool = node.offsetHeight >= 3;
});
return bool;
};
I am using the below code to open a local text file.It works fine in firefox but in safari i get the error as
'[object BlobConstructor]' is not a constructor (evaluating 'new Blob([xhr.response])').please help me by providing links.
var xhr = new XMLHttpRequest(),blob;
xhr.open('GET', 'example.txt');
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
blob = new Blob([xhr.response]);
console.log(blob);
}
It's a bug in the older Safari/WebKits. Upgrade your browser or operating system.
Note: It still does not appear to accept ArrayBufferView's as arguments, but should be fine for normal arrays.
I started to learn webrtc when I tried to implement the basic sample application
<html>
<head>
</head>
<body>
<script type="text/javascript">
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia({video: true}, function(localMediaStream) {
var video = document.createElement("video");
video.autoplay = true;
video.src = window.URL.createObjectURL(localMediaStream);
document.body.appendChild(video);
}, function(error) {
console.log(error);
});
</script>
</body>
</html>
I used this code to run in locaL browser google canary I enabled peerconnection and I didnot found mediastream in my browser but I think it might enabled as defalut in my browser.
The problem is this code results as NavigatorUserMediaError in console.i am not finding the way to step out from this problem.
Any one have idea where I went wrong in my code.
Did you run this from a web server?
If you run it from a file:// URL, you'll get a NavigatorUserMediaError.
I just tried your code from localhost in Chrome 22.0 and it works fine.
Note that this example does not use RTCPeerConnection and you don't have to enable any flags now in Chrome.