I'm testing WebRTC API. More precisely the webcam part.
So I read the W3C draft and used it in firefox to record myself from a webpage. It works (not as good as expected, but it does). I mean that I can download a video formated as webm that is readable by my computer.
I want to previsualize my video before sending it to the server. So I madethis code:
var url = URL.createObjectURL(e.data);
video.innerHTML = '<source src="' + url + '" type="video/webm"></source>';
video.play();
This does'nt work at all. I got just a blank element on my webpage...
Any suggestion to make it work ?
The problem was an issue of Firefox. With e.data we get a blob but we have to redefine a new blob to make it work:
var new_blob = new Blob([e.data], { type: e.data.type });
Notice that for now (2014-09-30) firefox does not support officialy the video encoding and the specification is in draft that is not validated by the W3C.
the proble is I do not understand the what is the object you get in e.data, also you can check if the mime is correct console.log(e.data);;console.log(e.data.type); , what are the output of these,
also have you tried this, firefox webm capture, they show preview of the video.
Related
Goal: use MediaRecorder (or else) api to produce video files that are viewable cross platforms.
Fail: current api falls back to container/codec on google chrome which is only viewable on chrome and advanced desktop media players but not on Safari or mobile devices.
! Same code when running on safari generates a working video file on all platforms.
const mimeType = 'video/webm;codecs=H264'
rec = new MediaRecorder(stream.current, { mimeType })
rec.ondataavailable = e => blobs.push(e.data)
rec.onstop = async () => {
saveToFile(new Blob(blobs, { type: mimeType }))
}
Tried all different combinations of containers and codecs.
also tried to override the mimeType of the Blob with MP4 file container.
No success what so ever.
also tried:
https://github.com/streamproc/MediaStreamRecorder
https://github.com/muaz-khan/RecordRTC
Same issues. iI seems like chrome's container/codec combinations always fall back to a format that is only viewable out of the box on chrome or a powerful desktop video player like vlc.
The only cross platform working video for me is the one taken from safari browser and is the 5th from left in the picture above.
What is the correct container/codac to be used in MediaCapture api to make the output file playable cross platform.
Edit -
We ended up building a transcoding pipeline with AWS ElasticTranscoder, which takes the uploaded video and transcodes it with a general preset that is playable on all platforms thus creating a converted video file.
unfortunately the bounty I offered expired, but if someone answers the original question I would gladly reward him with the bounty again.
I think your problem may be in the first line:
const mimeType = 'video/webm;codecs=H264'
The container you are using is webm, which typically uses codecs VP8, VP9. H264 is a codec used in the mp4 container.
Chrome supports webm. Safari does not (and all iOS browsers are based on Safari - hence your mobile issue).
You say that run on Safari, this outputs a playable video. use ffprobe to see what codec/containers are outputted on Safari - I am guessing that there is a change in container/codec.
Since your video is h264, you must simply change the container to mp4, and it will play everywhere. This is a 'copy' from one container to the other, not a transcoding, but you'll still need ffmpeg :)
Here's a post that might help: Recording cross-platform (H.264?) videos using WebRTC MediaRecorder
I am trying to record video using HTML5 API. I want this solution to be cross platform and it should atleast work on Chrome, Firefox and Edge browser. I tried with following code
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then((mediaStream) => {
const video = document.querySelector('video');
const url = window.URL.createObjectURL(mediaStream);
video.src = url;
});
Above code displays video in Chrome and Edge. When I try to capture bytes using MediaRecorder API, it only works in Chrome and not in Edge. Please suggest what can be done.
const recorder = new MediaRecorder(mediaStream);
recorder.ondataavailable = onDataAvailable
...
function onDataAvailable(d){
//d.data is populated in Chrome but not in Edge.
}
Please suggest, how can I capture bytes so that it can be saved on server.
I tried MediaStreamRecorder but that too didn't work with Edge.
Update : I found few approaches which indicate use of Canvas as an option to render frames and capture the bytes. Then use requestAnimationFrame to continue capturing video. While this might work, I am still open to any other better suggestions.
The MediaRecorder API seem to be only implemented in FireFox & Chrome
https://caniuse.com/#search=MediaRecorder
I'd always check caniuse.com for browser support for new APIs!
How to error handle html5 video + only mp4 source under old browsers.
Most of the browsers have support for html5 but not mp4. How to detect this and output an error for the user?
Keep in mind these things:
The client will use only mp4
The video element will be used multiple videos all mp4
Convertion mp4 to webmm/ogg is not a solution in this case
I need only a way to generate error for browsers that won't play the video. How to do this? Thanks!
You can use HTMLMediaElement.canPlayType() and get the value if your browser support mp4 or not.
var video = document.createElement('video');
console.log(video.canPlayType('video/mp4')); // "maybe"
Possible answers are:
'probably': The specified media type appears to be playable.
'maybe': Cannot tell if the media type is playable without playing it.
'' (empty string): The specified media type definitely cannot be played.
Hi you can handle it as below.
var videoSource1 = '<source src="//anc.com/video1.webm" type="video/webm"/>';
var videoSource2 = '<source src ="//abc.com/video2.mp4" type = "video/mp4"/>';
var videoSource = videoSource1 + videoSource2;
$('.video-container').append(videoSource);
The above code will detect any one of file on the basis of browser support.
I am currently working in using the HTML5 audio player to provide a audio stream (24/7 radio stream) via the (mobile) browser. Loading in the stream and playing it works fine.
The major problem is that the HTML5 <audio> tag will keep downloading (buffering) content even when its not active. This could be a major issue for mobile users since most of them pay for data use. So far I have not been able to find a decent solutions that works cross browser to prevent this.
I tried so far:
Unload the source when pause is pressed. < This does not work cross browser
Remove the audio player element and load a new one. This works but
lets be honest, this is a very hacky way of performing an extremely
simple task.
I was simply wondering if there is something I'm overlooking in this whole issue since I am convinced I'm not the only one with this issue.
The <audio> element includes a preload attribute. This can be set to "none" or "metadata" which should prevent the audio preloading.
Source: https://developer.mozilla.org/en/docs/Web/HTML/Element/audio
I found a workable solution for the problem described above. A detail description can be found here: https://stackoverflow.com/a/13302599/1580615
You can do the following to stop buffering load without errors:
var blob = new Blob([], {type: "audio/mp3"});
var url = URL.createObjectURL(blob);
audio.src = _url;
or, shortened up:
audio.src = URL.createObjectURL(new Blob([], {type:"audio/mp3"});
Now you're not loading a "" which is a bad url for the audio tag to try and load. You're instead loading an actual url made from a Blob that just contains no data for the audio to playback.
Does anyone know if Safari supports crossorigin attribute on the HTML5 <video> tag? I serve video from a server that responds with all needed CORS headers, and I use the markup below to embed the video to my page. The page is served from a different domain.
<video controls crossorigin="anonymous" src="http://example.com/movie.mp4">
I then draw the video to a canvas and get the image from the canvas using toDataURL API. This works in Chrome and Firefox, but Safari throws the security error as if there were no crossorigin attribute on the video.
Any ideas?
It appears that Safari does not support the crossorgin attribute, but I can't find anything official. There is this tweet https://twitter.com/sonnypiers/status/187513545397776384 with a work-around for images, but I don't think it helps for video.
From our tests we safari did not support crossdomain. We are adding crossorigin attribute to use CORs in audio requests (will report how does that goes).
Funny how crossdomain seemed to work fine under http but not under https. If you read the w3 spec for audio/video tags (called media tags) it does say they subjected to cross-domain restrictions.
Support of CORS in audio tag:
https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes
Now, other interesting fact is that safari was choosing the myme type based on the file extension (what?). A file with *.mp4 as an extension played fine. Same file renamed to something else did not.
Here's the workaround for video:
$.ajax({
type: 'get',
url : videoUrlFromAnotherDomain,
crossDomain: 'true',
success: function(data) {
// get a base64 version of the video!
var base64 = window.btoa(data);
// get a new url!
var newURL = 'data:video/mp4' + ';base64,' + base64;
// set the src on the video source element to the new url
video.find("source").attr("src", newURL);
}
Substitute whatever type of video it is for "video/mp4" in newURL.
At first, do you need CORS?
Linking to it directly seems to work in safari. I tried it using htmlinstant.com
<video src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" controls />
If you need CORS, then the following page says that support for it was added in May 2011. Haven't tested it though.
https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes
For an example with video on canvas, see section 5.4 at this link:
http://www.html5rocks.com/en/tutorials/video/basics/
I tested and it runs in my safari.