I have two videos one for streaming my webcam and the other to share my desktop screen/window. I need to combine these two media streams into one so that I can save it as an .mp4 file and broadcast it over WebRTC.
I was able to combine the two VIDEO(streams) tags by bounding them into a DIV tag.
<div id="elementToShare">
<video id="webcamVideo" controls loop autoplay class="webcam">No Support.</video>
<video id="screenshareVideo" controls loop autoplay class="screenshare">No Support.</video>
</div>
Then I used the DIV tag as a canvas to record the two videos as one using RecordRTC library by Muaz Khan.
var elementToShare = document.getElementById('elementToShare');
var canvasRecorder = RecordRTC(elementToShare,{
type : 'canvas',
recorderType: CanvasRecorder
});
But the problem with this approach was, I was unable to record the audio stream from my webcam with the canvas for which i used ffmpeg_asm.js. As the js file is 18mb in size it takes a lot of time to load and process the video file.
As to my knowledge, WebRTC is still in its primary phase and I hope something efficient will come along to achieve such stuff.
NOTE: I was able to achieve the above functionality in Google Chrome only as at this stage Mozilla Firefox provided limited support. Whereas Safari has not provided WebRTC support so it was out of the picture from the beginning.
EDIT 1 : Serving the above application with Node.js as server support has improved performance and video processing capabilities. For example : The ffmpeg_asm.js is unable to process video bit rate larger than 2200k without Node.js.
Are you going to combine the streams in real-time?
If yes, you need an MCU which will merge these two streams into one stream and record this stream for you.
As an option you can record these streams on server-side and then mix the streams using ffmpeg.
Found this in a comment on another question that I just responded to with a complete proof-of-concept solution. Anyone that finds this - a solution can be found here.
Note: The code there uses video/webm and the vp9 codec.. those lines can be easily replaced to generate a video/mp4 file using h264 codec instead :)
Related
I was playing around with urls the other day and i was wondering if there is a way to for example substitute the domain name for a video link on page load
in the source code, while having the original link still interpreted by the browser to play the video correctly.
So for example, if i host an .mp4 on my server with following link:
<source src="https://goofy.com/dogs.mp4" type="video/mp4" label="Low" res="360">
and i would like it to appear in the source code as:
<source src="https://snoopy.com/dogs.mp4" type="video/mp4" label="Low" res="360">
but still having the goofy one played in the player, it it possible ?
(maybe with javascript ?)
What i am trying to achieve here doesn't need to be that advanced, when i meant "scrape" i was just thinking about people opening the inspector manually and simply grabbing the link, in my example:
https://goofy.com/dogs.mp4
So i was rather thinking of some simple javascript letter substitution scheme on pageload that would display some random letters instead of "goofy". Maybe something like this:
var chars = {'a':'b','c':'z','i':'e'};
var enc;
var str = "goofy.com";
window.onload = function() {
enc = str.replace(/[abc]/g, m => chars[m]);
alert(enc);
};
but i think it won't work, as the player will end up playing the url with the wrong domain name. An i'm not that good at javascript, so i'm not sure of what i'm doing either... Feel free to correct me or maybe offer some solution ? thanks.
Per your comment reply, you want to obfuscate the source urls for a video file.
No, modifying the urls in the <source/> DOM elements won't do anything for you. A bot is getting the raw html from your site, so if the original source urls are embedded there you're not going to be able to hide anything.
Moving up the stack a bit, look at how Youtube handles structuring their urls. At its core, they have a js library that handles building out the video urls and video player dynamically at run time. While its highly obfuscated, its not a huge amount of work to discover what the actual video urls are and download them if you want. If someone really wants to get your videos, its not much work to either investigate the page with dev tools in the browser.
And going low-level, its arbitrary to run a packet sniffer like Charles proxy with a man in the middle local SSL proxy service (built in) to look at the requests being sent back and forth and to easily track down the source url that are delivering the video.
You could go back 10 years and try using Flash or some other embedded 3rd party plugin to "encrypt" the video stream but that's stupid and self defeating. If I really want your videos, I'll just play them full screen and record them on my computer.
Hopefully that more thoroughly answers your question.
Im trying some javascript codes to record wav sound, for example I tried this example:
http://webaudiodemos.appspot.com/AudioRecorder/index.html
That I found in this post:
HTML5 record audio to file
But I need to configure this attributes:
Sampling Rate: 8000 Hz
Bit Resolution: 16 (L16)
Encoding: PCM linear (LPCM)
Audio channel: Mono
This is not a duplicated post. The difference is that I need to generate the sound with specific configuration, like I said. I didn't find any example setting this parameters.
You can get the sampling you want with the sampleRate constraint.
navigator.mediaDevices.getUserMedia({audio: {sampleRate: 8000}})
Native PCM encoding is entirely up to the browser, but PCM is simple enough that, given the stream, you can certainly implement it yourself.
I use Filereader to read local video file (mp4), so I can display it in video tag.
I need to cut part of mp4 file (i.e. from 5 to 10 seconds) and upload it on server.
My current solution: I upload whole video file on server with "from" and "to" parameters, cut it with ffmpeg on server, upload to s3 and return the url video.
Maybe is it possible only with JS/HTML? I found Blob.slice method but i didn't know how to use it to cut video parts.
Thanks!
An mp4 video file is made up of 'atoms' which are like blocks of information or data within a file.
They contain header and metadata about the tracks in the movie (Audio, video, subtitles etc) and also the media data itself.
The concepts are straightforward but an mp4 file is quite involved when you look at one - there is a good example here from the apple developers site (https://developer.apple.com/library/content/documentation/QuickTime/RM/Fundamentals/QTOverview/QTOverview_Document/QuickTimeOverview.html):
If you take a 'slice' of the mp4 file by simply taking bytes from some point in the file to some other point, you can see that you will be missing header information etc depending where you start from, and will also most likely start in the middle of an 'atom'.
Tools like ffmpeg do the hard work to extract and restructure the file when you want to cut part of the video.
There are projects which run ffmpeg in the bowser, but I'm not sure how practical or adopted they are - the one seems pretty popular anyway:
https://github.com/bgrins/videoconverter.js
I have a video file "MyVideo.mp4" (*.mp4 is not required. It can be in any others formats) and I have an audio file "MyAudio.mp3".
Does anyone have any ideas how to replace an audio track from the video on the audio file "MyAudio.mp3"?
Demultiplexing + remultiplexing ("splitting" + "recombining") is something you would like to do on server side using a software like FFMpeg or similar.
Doing this is JavaScript will be non-trivial as you would have to parse and save the file formats manually (you must be able to parse all formats you'd support).
I'm working on a page that has streaming audio and many slides. The audio plays and the slides are loaded on demand during the event. Works fine during regular events but fails during large corporate events where the http download of a slide for 1000 users spikes the bandwidth and temporarily saturates the network causing the audio to skip / cut out.
I want to preload all the images upon the user opening the page but I was wondering if it is also possible to rate limit this download of all the images. I'd love to limit the preload of the images to a specific kb/s. Is this possible client side? If not what would be a good option server/client side?
Client side validation for limiting file size is possible in JavaScript using the File APIs.
An excellent tutorial is here : Reading files in JavaScript using the File APIs.
One final point : You should not rely on 'only' client-side validation. You must use server-side validation.
UPDATE: (For 'only' client-side validation):
With the use of JS, you can try like this:
if (typeof FileReader !== "undefined") {
var size = document.getElementById('myfile').files[0].size;
// check file size
}
(This may not be supported by all browsers.Only latest versions of Webkit browsers will support this.)
OR with the FILE API, you can try like this:
<input type="file" id="fileInput" />
var size = document.getElementById("fileInput").files[0].size;