someone can help me with this line of code?
recorder = new MediaRecorder(stream, {mimeType: 'video/webm'});
when i use this variable in iOS, cath(err) answer me "RefenceError, cant find variable: mediaRecorder"
pleases can you helpe? if you need it this is the complete function
startBtn.addEventListener('click',function() {
navigator.mediaDevices.getUserMedia(constraint).then(function(stream) {
recorder = new MediaRecorder(stream, {
mimeType: 'video/webm'
});
recorder.start();
}).catch(function(err) {
alert('impossible '+err);
});
})
Unfortunately the getUserMedia is only supported in safari browser
Any other browsers the getUserMedia is not supported in iOS devices
First check the availability of getUserMedia before you assign it to recorder
Good Luck
Related
I have a mobile website that takes a few pictures (environment cam) and records a short video (user cam). On desktop, everything works fine. On mobile, the camera feed is shown on both chrome and Safari. Taking pictures also works, but when I try to start recording, the page does not execute any javascript code after mediarecorder.start(1000). This means instructions are not shown and the vid never stops recording.
Code:
async function start()
{
var constraints = { video: { width: { ideal: 4096 }, height: { ideal: 2160 }, facingMode: 'user'}};
cameraStream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = cameraStream; video.play();
mediaRecorder = new MediaRecorder(cameraStream,{ mimeType: 'video/webm' });
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data);
});
}
function startRecording()
{
console.log("starting recording")
takePicture();
console.log("Selfie taken")
outline.style.display = 'none';
button.style.display = 'none';
text.innerText = "Volg de instructies op het scherm.";
//WORKS FINE TILL HERE
mediaRecorder.start(1000);
//BELOW THIS IS NEVER EXECUTED
console.log("setting timeout");
setTimeout(step,2000);
}
As said, it works on desktop, but not on iOS chrome or Safari.
Chrome and Safari on iOS are unfortunately more or less the same. Apple only allows their own browser engine on iOS and Chrome plays by those rules.
The MediaRecorder in Safari doesn't support 'video/webm' which is why I guess there is already an error thrown when you construct the MediaRecorder. Consequently the mediaRecorder variable is undefined when you try to call start() later on.
It probably works if you let Safari (or Chrome on iOS) pick the mimeType itself by omitting the configuration.
mediaRecorder = new MediaRecorder(cameraStream);
I have a React web app that gets the video URL from a server, then requests the video as a blob and tries to play this on an HTML video tag. I'm doing this because the client sometimes has issues with the internet and videos can stutter while playing, they'd rather wait longer for the video to load and then play it smoothly than have a choppy video. (I'm also saving the blob to IndexedDB as cache, but that's not related to the issue I'm having now, I'm just adding this as context but it has been disabled while I try to figure out this iOS problem)
I have a function to download the video, which then returns the Blob and a URL created from that blob object.
async function downloadVideo(videoUrl) {
return new Promise(function(resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', videoUrl, true);
req.responseType = 'blob';
req.onload = function() {
// Onload is triggered even on 404
// so we need to check the status code
if (this.status === 200) {
var videoBlob = new Blob([this.response], { type: 'video/mp4' });
console.log('Video blob?', videoBlob);
var vid = { objBlob: videoBlob, vidURL: URL.createObjectURL(videoBlob) };
// Video is now downloaded and converted into ObjectURL
resolve(vid);
} else {
reject('Video download failed with status ', this.status);
}
};
req.onerror = function() {
reject('Unable to Download Video');
};
req.send();
});
}
And then I have the element that plays the blob video:
<video
muted={true}
autoPlay={true}
loop={false}
onError={err => {
alert('Video load error. ' + err.target.error.iosMessage);
}}
src={downloadedVideo.url}
/>
That downloadedVideo.url is the blob object URL created on the DownloadVideo function
All of this works fine on desktop (Linux) and on Android, but the video doesn't play from the Blob on iOS devices. I've tried Safari, Chrome, and Firefox and the problem is the same.
on iOS I can get the video Blob and create an URL from it, but when I pass it as src it doesn't work, all I can get from the error (a MediaError object) is the code, 4, but the message is undefined.
If instead of the blob I pass the original video URL as src, it works on all devices, but then I can't cache the video and this feature will have to be dropped.
I've tried several videos and made sure encoding was compatible with iOS.
I could not find anything stating that iOS is not compatible with Blob URLs for video, so this should work, but I can't figure out why it doesn't.
Save the captured video with the type of "mp4"
IMPORTANT >>> new Blob(vid, {type: "video/mp4", })
const blobb = await new Blob(vid, {type: "video/mp4", }); // Important Line
I have a similar problem, but only on iOS 15.x (it works fine till iOS 14.5)
I think it's a bug on iOS 15.x - see also https://developer.apple.com/forums/thread/693447
There is a bug in webkit on iOS 15 builds, that do not include byte range headers to blob urls.
See: https://bugs.webkit.org/show_bug.cgi?id=232076 and Safari on iOS 15 inline video playback issues
As noted in the webkit issue, there is a workaround using a service worker.
https://bug-232076-attachments.webkit.org/attachment.cgi?id=442151
Mind though, service workers do not work in WKWebView.
I am developing a web application for video recording.
I have tried the below code but the problem is it working fine with a external camera, but in the laptops inbuilt camera with the same Browser it is giving no Object found error.
I am using Firefox 60.6.1
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
//load the stream in the video variable
video.srcObject = stream;
//load the stream in revokeAccess variable
revokeAccess=stream;
//video playback
video.play();
/*
Optional to avoid the dual audio disturbance. Playback audio is muted
*/
video.muted= true;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
var options = {mimeType: 'video/webm;codecs=vp9'};
console.log("using vp9");
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=h264')) {
var options = {mimeType: 'video/webm;codecs=h264'};
console.log("using h264");
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
var options = {mimeType: 'video/webm;codecs=vp8',videoBitsPerSecond : 1500000,audioBitsPerSecond : 160000};
console.log("using vp8");
}else{
console.log('isTypeSupported is not supported, using default codecs for browser');
}
//load the stream and type of video in the function
mediaRecorder = new MediaRecorder(stream,options);
//handle the data availability
mediaRecorder.ondataavailable = handleDataAvailable;
//Start the recording
mediaRecorder.start();
alert("Started Recording");
//push the data into chunks(array)
function handleDataAvailable(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
console.log(recordedChunks);
} else {
alert(event);
}
}
//disable the Start Recording button
document.getElementById("startRecording").disabled = true;
})
.catch(function(error) {
//handle the device not found exception
alert("Camera not Found !! Please connect camera properly");
console.log(error);
});
}
I want the application to be working in each platform.
Hi All Developers Thanks for your support and quick response.
I fixed the issues using the below adapter addition in the code.
var getUserMedia = navigator.getUserMedia ||
navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia;
If you want to support legacy browser, check following.
https://github.com/webrtcHacks/adapter
WebRTC adapter
adapter.js is a shim to insulate apps from spec changes and prefix
differences. In fact, the standards and protocols used for WebRTC
implementations are highly stable, and there are only a few prefixed
names. For full interop information, see webrtc.org/web-apis/interop.
This repository used to be part of the WebRTC organisation on github
but moved. We aim to keep the old repository updated with new
releases.
Also, you can check your hardware environment form firefox.
In the address bar on browser type following
about:support
I am using getusermedia to record audio in my website. I've included the javascript of getusermedia. The record function works fine on website but doesn't even popup for permission in when opened on mobile.
var constraints = {
audio: true,
video: false
}
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
permissiongiven = 1;
});
this is the sample code which prompt me for permission but doesn't work on mobile.
How can I make it work on both device. Any help is appreciated.
Thanks.
Edit :- The code is now working fine on mobile as well. Maybe it was solved from chrome updates or security certificates of website. Thanks all for help.
Note that on mobile devices, you have to use SSL to use getUserMedia(). Check out if you're accessing your website with a http:// prefix. Try change it to https:// and it should work fine.
I found this website useful in answering this question
https://caniuse.com/#search=getusermedia
It says getUserMedia only supported from Chrome for Android version 70 (released Oct 16 2018)
Check MDN, then make sure your browser supports it. You need Chrome for Android 52+ it says. FWIW 68 works for me.
You should also feature-check and catch errors:
if (!navigator.mediaDevices) {
console.log("Sorry, getUserMedia is not supported");
return;
}
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => permissiongiven = 1)
.catch(error => console.log(error));
Depending on the error you get, we might learn more.
NotFoundError means no camera or mic detected on the device.
NotAllowedError means user permission not granted, or you're in an iframe or not https.
navigator.mediaDevices.getUserMedia Browser compatibility
i had no idea that navigator.getUserMedia was deprecated (at least for Samsung, which is what i was testing on), and i found this article on web audio with a code sample that i barely modified:
function initGetUserMedia() {
navigator.mediaDevices = navigator.mediaDevices || {}
navigator.mediaDevices.getUserMedia = navigator.mediaDevices.getUserMedia || function(constraints) {
let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia not supported by this browser'));
} else {
return new Promise((resolve, reject) => {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
}
Try this code with ssl site:
<script>var constraints = {audio: true, video: false}
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {{permissiongiven = 1;});</script>
I'm developing an application that allows voice recording in the web browser. This is working fine on most browsers but I have some issues with iOS Safari.
Below you can find an extract of the code, it is not complete but it gives an idea of what's going on.
//Triggered when the user clicks on a button that start the recording
function startRecording() {
//Create new audio context
let audioContext = new (window.AudioContext || window.webkitAudioContext);
//Hack polyfill media recorder to re-use the audioContex
window.NewMediaRecorder.changeAudioContext(audioContext);
navigator.mediaDevices.enumerateDevices().then(function (devices) {
console.log('loaded audio devices');
console.log(devices);
devices = devices.filter((d) => d.kind === 'audioinput');
console.log(devices);
console.log('chosen device: ' + devices[0].deviceId);
navigator.mediaDevices.getUserMedia({
audio: {
deviceId : {
exact : devices[0].deviceId
}
}
}).then(function (stream) {
console.log(stream);
let recorder = new NewMediaRecorder(stream);
recorder.addEventListener('dataavailable', function (e) {
document.getElementById('ctrlAudio').src = URL.createObjectURL(e.data);
});
recorder.start();
console.log('stop listening after 15 seconds');
setTimeout(function () {
console.log('15 seconds passed');
console.log("Force stop listening");
recorder.stop();
recorder.stream.getTracks()[0].stop();
}, 15000);
});
});
}
For the record, I'm using audio recorder polyfill (https://ai.github.io/audio-recorder-polyfill/) in order to achieve recording, as MediaRecorder is not yet available on Safari.
The recorder works fine on all navigators (this including OS X Safari), yet on iOS Safari it only records noice. If I set the volume of my speakers at maximal level I can hear myself speak, but it is from "very far away".
All the online dictaphones/recorders that I found have the same issue, they always recording noise. (Tested with an iPhone 5S, 5SE and X, all up to date).
I'm a bit desperate because I already did a lot of research, but I didn't find any solution for this issue.
As required, the AudioContext is created on a user event (in this case a touch on a button).
I even tried to change the gain of but that didn't help.
Trying to access the audio without setting a media device isn't helping.
navigator.mediaDevices.getUserMedia({audio: true})