CODEWITHSUNDEEP
javascriptvideorecordingvideo-recording
Hoppix
Hoppix

Reputation: 660

See no track after recording video in Javascript

I have managed to record and download a video on the browser, It works well on the browser, no problem at all but when i try to see it on a video player (pot player) there is no track on it. Why?

<body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="startRecording">Start Recording</button>
    <button id="stopRecording" disabled>Stop Recording</button>
    <a id="downloadLink" style="display: none;">Download Video</a>

    <script>
        let mediaRecorder;
        let recordedChunks = [];

        navigator.mediaDevices.getUserMedia({ video: true })
            .then((stream) => {
                const video = document.getElementById('video');
                video.srcObject = stream;

                mediaRecorder = new MediaRecorder(stream);

                mediaRecorder.ondataavailable = (event) => {
                    if (event.data.size > 0) {
                        recordedChunks.push(event.data);
                    }
                };

                mediaRecorder.onstop = () => {
                    const blob = new Blob(recordedChunks, { type: 'video/webm' });
                    recordedChunks = [];

                    const downloadLink = document.getElementById('downloadLink');
                    downloadLink.href = URL.createObjectURL(blob);
                    downloadLink.download = 'recorded_video.webm';
                    downloadLink.style.display = 'block';
                };
            })
            .catch((error) => {
                if (error.name === 'NotAllowedError' || error.name === 'PermissionDeniedError') {
                    console.error('User denied camera access.');
                } else {
                    console.error('Error accessing camera:', error);
                }
            });

        document.getElementById('startRecording').addEventListener('click', () => {
            recordedChunks = [];
            mediaRecorder.start();
            document.getElementById('startRecording').disabled = true;
            document.getElementById('stopRecording').disabled = false;
        });

        document.getElementById('stopRecording').addEventListener('click', () => {
            mediaRecorder.stop();
            document.getElementById('startRecording').disabled = false;
            document.getElementById('stopRecording').disabled = true;
        });
    </script>
</body>

Could help me improving the script?

Upvotes: 1

Views: 110

Answers (2)

Arage Geta
Arage Geta

Reputation: 11

Use mp4 or mkv format rather than webm like this application/mp4

Upvotes: 1

Bogdan Djukic
Bogdan Djukic

Reputation: 172

Convert blob to MP4 file as pot player supports MP4 format.First you need to record video as MP4 and then to use it as MP4 video file

const blob = new Blob(recordedChunks, { type: "video/mp4" });

<video id="video" width="640" height="480" autoplay></video>
    <div>
      <button id="startRecording">Start Recording</button>
      <button id="stopRecording" disabled>Stop Recording</button>
    </div>

    <a id="downloadLink" style="display: none">Download Video</a>
    <video width="320" height="240" controls id="videoPlayer">
      <source src="" type="video/mp4" />
      <source src="" type="video/ogg" />
      Your browser does not support the video tag.
    </video>
    <script>
      let mediaRecorder;
      let recordedChunks = [];
      const videoPlayer = document.getElementById("videoPlayer");
      var constraints = {
        audio: true,
        video: true,
      };
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then((stream) => {
          const video = document.getElementById("video");
          video.srcObject = stream;

          mediaRecorder = new MediaRecorder(stream);

          mediaRecorder.ondataavailable = (event) => {
            if (event.data.size > 0) {
              recordedChunks.push(event.data);
            }
          };

          mediaRecorder.onstop = () => {
            const blob = new Blob(recordedChunks, { type: "video/mp4" });
            recordedChunks = [];
            const newObjectUrl = URL.createObjectURL(blob);
            videoPlayer.src = newObjectUrl;
            videoPlayer.play();

            const myFile = new File([blob], "demo.mp4", { type: "video/mp4" });

            const downloadLink = document.getElementById("downloadLink");
            downloadLink.href = URL.createObjectURL(myFile);
            downloadLink.download = "recorded_video.mp4";
            downloadLink.style.display = "block";
          };
        })
        .catch((error) => {
          if (error.name === "NotAllowedError" || error.name === "PermissionDeniedError") {
            console.error("User denied camera access.");
          } else {
            console.error("Error accessing camera:", error);
          }
        });

      document.getElementById("startRecording").addEventListener("click", () => {
        recordedChunks = [];
        mediaRecorder.start();
        document.getElementById("startRecording").disabled = true;
        document.getElementById("stopRecording").disabled = false;
      });

      document.getElementById("stopRecording").addEventListener("click", () => {
        mediaRecorder.stop();
        document.getElementById("startRecording").disabled = false;
        document.getElementById("stopRecording").disabled = true;
      });
    </script>

Upvotes: 0

Related Questions