3

我正在开发一个 Web 应用程序，其中应用程序下载加密的数据块。然后我必须解密并播放视频。但我不能让用户等待所有解密。因此我正在使用媒体流 API。这是工作。但是在解密最后一个块后我收到了这个错误。

“未捕获的 DOMException：无法在 'MediaSource' 上执行 'addSourceBuffer'：此 MediaSource 已达到其可以处理的 SourceBuffer 对象的限制。不能添加其他 SourceBuffer 对象。（...）”

<script type="text/javascript">

//////////

 var no_of_files = 0;

 var no_of_dlfiles = 0;

 var FilesURL = [];

 var files_str = 'video/vid_1.webm, video/vid_2.webm, video/vid_3.webm, video/vid_4.webm, video/vid_5.webm';

var file_counter = 0;

var mimeCodec = 'video/webm; codecs="vorbis,vp8"';

var passkey = "014bcbc0e15c4fc68b098f9b16f62bb7shahbaz.hansinfotech@gmail.com";

FilesURL = files_str.split(',');

no_of_files = FilesURL.length;

var player = document.getElementById('videoplayer');

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
 var mediaSource = new MediaSource;
 //console.log(mediaSource.readyState); // closed
 player.src = URL.createObjectURL(mediaSource);
 mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
 console.error('Unsupported MIME type or codec: ', mimeCodec);
}

//////////

function sourceOpen (_) {
console.log("start");
var mediaSource = this;
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
sourceBuffer.mode = "sequence";

function WriteDatatoTemp()
{

 //console.log(this.readyState); // open
 if(file_counter<FilesURL.length)  
 {
  console.log(file_counter);
  no_of_dlfiles++;
  $("#decryptionRatio").text(no_of_dlfiles+" of "+no_of_files);
  $("#decryption_status").show();

      getFileObject(FilesURL[file_counter], function (fileObject) {
        //

        var outputFile = fileObject; 

                var reader = new FileReader();

                reader.onloadend = function(e){




              var decrypted_data = JSON.parse(CryptoJS.AES.decrypt(e.target.result, passkey, {format: CryptoJSAesJson}).toString(CryptoJS.enc.Utf8));
                      var byteArray = Base64Binary.decodeArrayBuffer(decrypted_data);  

                      sourceBuffer.addEventListener('updateend', function(){

                        file_counter++;
                       // console.log(file_counter);

                            if(player.paused)
                            {
                              player.play();
                            }


                          if(file_counter == FilesURL.length - 1)
                          {
                            mediaSource.endOfStream();
                          }

                            WriteDatatoTemp();

                });


                try
                {
                  while(!sourceBuffer.updating)
                  {
                    sourceBuffer.appendBuffer(byteArray);
                  }

                }
                catch(e)
                {
                  console.log(e);
                }


      };

      reader.readAsText(outputFile);
        //

    }); 

} 

}


WriteDatatoTemp();

}

 ///


    var getFileBlob = function (url, cb) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.addEventListener('load', function() {
        cb(xhr.response);
    });
    xhr.send();
   };

    var blobToFile = function (blob, name) {
    blob.lastModifiedDate = new Date();
    blob.name = name;
    return blob;
    };

   var getFileObject = function(filePathOrUrl, cb) {
   getFileBlob(filePathOrUrl, function (blob) {
      cb(blobToFile(blob, 'vid.webm'));
   });
   };


    </script>
4

0 回答 0