javascriptvideorecordingvideo-recording

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?


Solution

  • 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>