What is best practice to convert html5 and css3 animation or amp-stories to mp4 video?
Is there any library which can do this out of the box?
What I've done in the past is utilize Chrome's Tab Capture API.
https://developers.chrome.com/extensions/tabCapture
Basically, you build a browser extension and create a media stream and Media Recorder. Something like this:
const mediaStream = chrome.tabCapture.captureOffscreenTab('https://example.com', {
audio: true,
video: true,
videoConstraints: {
width: 1280,
height: 960
}
});
Then, use MediaRecorder to capture the output and save it, in the same way you would any other MediaStream.
Related
I am trying to play .mov videos in HTML5 browser. I have tried everything available over the internet e.g.
attribute "controls"
using <source> tag
using src attribute with even changing MIME type to mp4.
But Nothing worked for me. Can anyone suggest solution for this?
The Video tag only supports certain filetypes. The .MOV container uses the Quicktime codec which is proprietary Apple software and is not on the list of Media formats supported by the HTML audio and video elements. I'd suggest transcoding the footage to .MP4 and using that instead.
My suggestion is converting the file to .mp4. There are several softwares you can use to do so. I suggest Handbrake.
https://handbrake.fr/
For jQuery, try this code. What it does it get the data from the input tag and instantiates a FileReader instance. We add an event listener to this instance and we append a <source> tag as child to the <video> tag. We are able to get the duration once the data has been loaded. Adding a type="video/mp4" attribute to the source tag is a small enhancement that would work on most .mov files, but not all (untested). This is an enhancement to another SO answer located here.
$(document).ready(function() {
var data = $('#file-input')[0]; // File from <input type="file"> tag
var reader = new FileReader();
reader.addEventListener('load', function() {
var video = $('<video class="uploaded_video_src" controls></video>');
if (reader.result) {
$('.uploaded_video_src').append(`<source src="${reader.result}" type="video/mp4">`); // Add type attr for support for some .mov files
video.on('loadedmetadata', function() {
console.log('duration:', $(this)[0].duration);
});
}
});
});
I am trying to build a web app that captures both local and remote audios from a webrtc call, but I can`t record the remote audio(using recordRTC).
I was wondering if I could capture the system sound somehow.
Is there a way to capture the system sound (not just the mic) from the browser. Maybe an extension?
In Chrome, the chrome.desktopCapture extension API can be used to capture the screen, which includes system audio (but only on Windows and Chrome OS and without plans for OS X or Linux). E.g.
chrome.desktopCapture.chooseDesktopMedia([
'screen', 'window' // ('tab' is not supported; use chrome.tabCapture instead)
], function(streamId) {
navigator.webkitGetUserMedia({
audio: {
mandatory: {
chromeMediaSource: 'system',
chromeMediaSourceId: streamId
}
},
video: false, // We only want audio for now.
}, function(stream) {
// Do what you want with this MediaStream.
}, function(error) {
// Handle error
});
});
I'm not sure whether Firefox can capture system sound, but at the very least it is capable of capturing some output (tab/window/browser/OS?).
First you need to visit about:config and set media.getusermedia.audiocapture.enabled to true (this could be automated through a Firefox add-on). Then the stream can be captured as follows:
navigator.mozGetUserMedia({
audio: {
mediaSource: 'audioCapture'
},
video: false, // Just being explicit, we only want audio for now
}, function(stream) {
// Do what you want with this MediaStream.
}, function(error) {
// Handle error
});
This was implemented in Firefox 42, at https://bugzilla.mozilla.org/show_bug.cgi?id=1156472
This is possible with the new Screen Capture API, but browser support is still limited.
See the "Browser compatibility" section in the above-linked MDN page for details. Some browsers currently don't yet support audio capture, and some others currently only allow audio capture from a specific tab, rather than the operating system as a whole.
Example code:
videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia({audio:true, video:true});
Two Chrome apps/extensions have caught my eye on the webstore:
Screencastify
Snagit
I am aware of chrome.desktopCapture and how I can use getUserMedia() to capture a live stream of a user's desktop.
Example:
navigator.webkitGetUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: desktop_id,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720
}
}
}, successCallback, errorCallback);
I'd love to create my own screencast app that allows audio recording as well as embedding webcam capture in a given corner of the video like Screencastify.
I understand capturing the desktop and the audio and video of the user, but how do you put it all together and make it into a video file?
I'm assuming there is a way to create a video file from a getUserMedia() stream on ChromeOS. Something that only ChromeOS has implemented?
How is it done? Thanks in advance for your answers.
The actual encoding and saving of the video file isn't something that's been implemented in Chrome as of yet. Mozilla has it in a nascent form at the moment. I'm unsure of its state in ChromeOS. I can give you a little information I've gleaned during development with the Chrome browser, however.
The two ways to encode, save, and distribute a media stream as a video are client-side and server-side.
Server-side:
Requires a media server of some kind. The best I've free/open-source solution that I've found so far is Kurento. The media stream is uploaded(chunks or whole) or streamed to the media server where it is encoded and saved for later use. This also works with peer-to-peer by acting as a middleman, recording as the data streams through.
Client-side:
This is all about browser-based encoding. There are currently two working options that I've tested successfully in Chrome.
Whammy.js:
This method uses a canvas hack to save arrays of webp images and then encode them into a webm container. While slow, it works well with video. No audio support. I'm working on that at the moment.
videoconverter.js(was ffmpeg-asm.js):
This is a straight port of ffmpeg to JavaScript using Emscripten. It works with both audio and video. It's also gigantic, script-wise, at around 25MB uncompressed. The other reason I'm not using it in production is the shaky licensing ground that ffmpeg is on at the moment.
It has not been optimized as much as it could be. It would probably be quite a project to make it reliably production-ready.
Hopefully that at least gives you avenues of research.
I am using video element of html5 for displaying video and audio streaming.
In older version of systems (laptops, pcs, etc), somtimes volume level is not good. so i want to amplify stream audio volume .
I made some hunt but didn't find any feasible solution.
Please provide me some links or some solution so that i can integrate that in my app
you can use timbre.js to add compression ( with gain, ie. amplification ) to the audio of your video track. Something like this:
// the source of your video file
var src = document.getElementById('video').firstElementChild.src;
// this will play and loop the audio with increased gain
var video = T("audio", {loop:true}).load(src, function(res) {
T("comp", {thresh:-48, knee:30, ratio:24, gain:18}, this).play();
});
I want create a html5 audio in dynamic and play it,here is the code:
function playAnotherMusic(playUrl){
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', playUrl);
audioElement.setAttribute('controls', true);
audioElement.setAttribute('preload', true);
audioElement.setAttribute('type', 'audio/mpeg');
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
console.log(playUrl);
audioElement.load();
}
However it doesn't work,the firebug assigin me "HTTP "Content-Type" of "audio/mpeg" is not supported."
how can I solve this problem?
You can't play mp3 files in firefox, it does not support them, you need an ogg version for firefox. Unless that changes, good to keep in mind.
Why doesn't Firefox support the MP3 file format in <audio>
You need to append the audio element to the an existing element.
This would be something like
document.getElementById("my_audio_div").appendChild(audioElement);
Idealy, this should be done before you add the event listener, but after setting all the attributes
Also try audio/mp3 instead:
audioElement.setAttribute('type', 'audio/mp3');