cobalt/demos/content/configure-max-video-input-size/configure-max-video-input-size.js

// Copyright 2024 The Cobalt Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

var audioData;
var videoData;

let status_div;

function downloadMediaData(downloadedCallback) {
  var xhr = new XMLHttpRequest;

  xhr.onload = function() {
    audioData = xhr.response;
    console.log("Downloaded " + audioData.byteLength + " of audio data.");

    xhr.onload = function() {
      videoData = xhr.response;
      console.log("Downloaded " + videoData.byteLength + " of video data.");
      downloadedCallback();
    }

    xhr.open("GET", "vp9-720p.webm", true);
    xhr.send();
  }

  xhr.open("GET", "dash-audio.mp4", true);
  xhr.responseType = "arraybuffer";
  xhr.send();
}

function playVideoOn(videoElement) {
  var ms = new MediaSource;
  ms.addEventListener('sourceopen', function() {
    console.log("Creating SourceBuffer objects.");
    var audioBuffer = ms.addSourceBuffer('audio/mp4; codecs="mp4a.40.2"');
    var videoBuffer = ms.addSourceBuffer('video/webm; codecs="vp9"');
    audioBuffer.addEventListener("updateend", function() {
      audioBuffer.abort();
      videoBuffer.addEventListener("updateend", function() {
        setTimeout(function() {
          videoBuffer.addEventListener("updateend", function() {
            videoBuffer.abort();
            ms.endOfStream();
            videoElement.ontimeupdate = function() {
              if (videoElement.currentTime > 10) {
                console.log("Stop playback.");
                videoElement.src = '';
                videoElement.load();
                videoElement.ontimeupdate = null;
              }
            }
            console.log("Start playback.");
            videoElement.play();
          });
          videoBuffer.appendBuffer(videoData.slice(1024));
        }, 5000);
      });
      videoBuffer.appendBuffer(videoData.slice(0, 1024));
    });
    audioBuffer.appendBuffer(audioData);
  });

  console.log("Attaching MediaSource to video element.");
  videoElement.src = URL.createObjectURL(ms);
}

function setupPlayerHandler() {
  // Setup one primary player and one sub player.
  // i = 0: primary player, buffer size is 3110500
  // i = 1: sub player, buffer size is 777000
  const maxVideoInputSizes = [3110500, 777000];
  videoElements = document.getElementsByTagName('video');
  status_div = document.getElementById('status');
  status_div.innerHTML += 'Video Get Element By Id...<br>';
  for(let i = 0; i < maxVideoInputSizes.length; i++) {
    if (videoElements[i].setMaxVideoInputSize && i < videoElements.length) {
      videoElements[i].setMaxVideoInputSize(maxVideoInputSizes[i]);
      status_div.innerHTML += 'Set Max Video Input Size of Video Element '+ i + ' to '+ maxVideoInputSizes[i] + '<br>';
    }
    if (i == 1 && videoElements[i].setMaxVideoCapabilities) {
      videoElements[i].setMaxVideoCapabilities("width=1920; height=1080");
    }
    playVideoOn(videoElements[i]);
  }
}

downloadMediaData(setupPlayerHandler);