How can I add soundtrack to video?

[abadondev]

Is it possible to add soundtrack to video when I click "start record"? How can I achieve this? Please help. Thanks.

[muaz-khan]

Yep, it is possible to add microphone sound-track or mp3-audiotrack in a LIVE-recording.

1. Use {video:true} to capture only video MediaStream (via navigator.getUserMedia)
2. Record using MediaStreamRecorder
3. Use {audio:true} to capture audio stream (via navigator.getUserMedia)
4. Use addTrack to add audio-track into old-vide-only-stream

$('#add-mcirophone-track').click(function() {
    captureUserMedia({
        audio: true
    }, function(audioStream) {
        var firstAudioTrack = audioStream.getAudioTracks()[0]
        oldVideoStream.addTrack(firstAudioTrack);
    }, function(error) {});
});

var recorder = new MediaStreamRecorder( oldVideoStream );
// rest of the MediaStreamRecorder code

[abadondev]

Thanks for your answer. What I want to achieve is:

-when I click "start", I recoding a video with music I add, -then when click "stop", I have a video with recorded track.

I need to add mp3 file.

Unfortunately don't understand what I have to do with cod you show me. My cod looks like:

      navigator.getUserMedia = navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia;
        navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

        function onMediaSuccess(stream) {
            var mediaRecorder = new MediaStreamRecorder(stream);
            mediaRecorder.mimeType = 'video/mp4';
            var video = document.querySelector('video');
            video.src = window.URL.createObjectURL(stream);
            mediaRecorder.ondataavailable = function(blob) {
                var blobURL = URL.createObjectURL(blob);
                document.querySelector("#output").src = blobURL;
            };

            ///////////////////////////START/////////////////////////////

            var start = document.getElementById("start");
            start.addEventListener("click", function() {
                mediaRecorder.start();
                setInterval(function() {
                    audio.pause();
                    audio.currentTime = 0;
                    mediaRecorder.stop();
                }, 30000)
            });

            ///////////////////////////SAVE/////////////////////////////

            $(".save").click(function() {
                mediaRecorder.save();
            });
        }

Please help, I still learning javascript and have problems from time to time.

[saad3074]

@muaz-khan Hi ,

I use MediaStreamRecorder and create video in chrome and when I play video in Chorome or VLC player it works. but not play in firfox it show firefox Media resource could not be decoded

if i create video in firefox then both Chorme and Firfox will play that video. Can you help me about this issue. here is my code.

Start Recording

     <button type="button" class="btn btn-default recordingBtn" id="stop-recording" disabled>Stop Recording</button>

JS

`function captureUserMedia(mediaConstraints, successCallback, errorCallback) { navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback); }

var mediaConstraints = {
    audio: true, // record both audio/video in Firefox/Chrome
    video: true,
    mimeType: 'video/mp4', // or video/webm\;codecs=h264 or video/webm\;codecs=vp9
    disableLogs: true
};
document.querySelector('#start-recording').onclick = function () {
    this.disabled = true;
    captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
    document.querySelector('#stop-recording').disabled = false;
};
document.querySelector('#stop-recording').onclick = function () {
    this.disabled = true;
    console.warn('Just stopped the recording');
    mediaRecorder.stop();
    mediaRecorder.stream.stop();
    document.querySelector('#start-recording').disabled = true;
};

var mediaRecorder;
function onMediaSuccess(stream) {
    var video = document.createElement('video');
    video = mergeProps(video, {
        controls: true,
        muted: false
    });
    video.srcObject = stream;
    video.play();
    videosContainer.innerHTML = '';

    videosContainer.appendChild(video);
    mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.stream = stream;

    // don't force any mimeType; use above "recorderType" instead.
    mediaRecorder.mimeType = 'video/mp4'; // video/webm or video/mp4

    mediaRecorder.frameInterval = 25;

// mediaRecorder.recorderType = MediaRecorderWrapper;

    var count = 1;
    mediaRecorder.ondataavailable = function (blob) {

// var BlobUrl = URL.createObjectURL(blob);

        mediaRecorder.stop();
        mediaRecorder.stream.stop();
        document.querySelector('#start-recording').disabled = false;
        document.querySelector('#stop-recording').disabled = true;
        var _token = $('meta[name="csrf-token"]').attr('content');
        var formData = new FormData();
        formData.append('_token', _token);
        formData.append('old', $('#video_name').val());
        formData.append('count', count);
        formData.append('video', blob);
        var URL = APP_URL + '/upload-video';
        //Start AJax Call
        $.ajax({
            type: "POST",
            url: URL,
            dataType: "json",
            data: formData,
            contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
            processData: false, // NEEDED, DON'T OMIT THIS
            success: function (response) {
                $('#video_name').val(response.name);

// $('.recordingBtn, #videos-container').remove();

                video.src = "{!!asset('public/storage/uploads/videos')!!}/" + response.name;
                video.play();

                swal("Success Message!", 'Video recorded successfully.', "success");
                document.querySelector('#start-recording').disabled = false;
                document.querySelector('#stop-recording').disabled = true;
            },
            error: function (response) {

                swal("Error Message!", response, "error");
            }

        });
        count++;
    };
    var timeInterval = 90 * 1000;
    // get blob after specific time interval
    mediaRecorder.start(timeInterval);
    document.querySelector('#stop-recording').disabled = false;
}

function onMediaError(e) {
    console.error('media error', e);
}

var videosContainer = document.getElementById('videos-container');
var index = 1;
window.onbeforeunload = function () {
    document.querySelector('#start-recording').disabled = false;
};`