2

this is the code :

 var mediaSource = new MediaSource();
 mediaSource.addEventListener('sourceopen', handleSourceOpen, false);
 var mediaRecorder;
 var recordedBlobs;
 var sourceBuffer;
 var socket = io();
 var recordedVideo = document.querySelector('video#recorded');
 var gumVideo = document.querySelector('video#gum');
 var translateButton = document.querySelector('button#record');

 translateButton.onclick = startTranslate;
 recordedVideo.src = window.URL.createObjectURL(mediaSource);

 socket.on('video', function (data) {
   sourceBuffer.appendBuffer(data);
 });

 navigator.mediaDevices.getUserMedia(constraints)
 .then(handleSuccess).catc(handleError);

 function handleSourceOpen(event) {
      console.log('MediaSource opened');
      sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
      sourceBuffer.onupdate = function(){
        console.log("updating");
      };
      console.log('Source buffer: ', sourceBuffer);
 }

 function handleSuccess(stream) {
     console.log('getUserMedia() got stream: ', stream);
     window.stream = stream;
     if (window.URL) {
       gumVideo.src = window.URL.createObjectURL(stream);
     } else {
       gumVideo.src = stream;
     }
 }

 function startTranslate() {
     recordedBlobs = [];
     var options = {mimeType: 'video/webm;codecs=vp9'};
     if (!MediaRecorder.isTypeSupported(options.mimeType)) {
       console.log(options.mimeType + ' is not Supported');
       options = {mimeType: 'video/webm;codecs=vp8'};
       if (!MediaRecorder.isTypeSupported(options.mimeType)) {
         console.log(options.mimeType + ' is not Supported');
         options = {mimeType: 'video/webm'};
         if (!MediaRecorder.isTypeSupported(options.mimeType)) {
           console.log(options.mimeType + ' is not Supported');
           options = {mimeType: ''};
         }
       }
     }
     try {
       mediaRecorder = new MediaRecorder(window.stream, options);
     } 
     catch (e) {
       console.error('Exception while creating MediaRecorder: ' + e);
       alert('Exception while creating MediaRecorder: '+ e +'.mimeType: ' + options.mimeType);
       return;
     }
     console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
     recordButton.textContent = 'Stop Recording';
     playButton.disabled = true;
     downloadButton.disabled = true;
     mediaRecorder.onstop = handleStop;
     mediaRecorder.ondataavailable = handleDataAvailable;
     mediaRecorder.start(10); // collect 10ms of data
     console.log('MediaRecorder started', mediaRecorder);
 }

 function handleDataAvailable(event) {
     if (event.data && event.data.size > 0) {
     socket.emit('video',event.data);
   }
 }

When i click the translate button after 2-3 seconds Error like :

Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source

what does this error means.Or is it a bug of WebRTC?

Ilkin Abdullayev
  • 115
  • 1
  • 6
  • Don't. Use WebRTC which is made for this. And, 1-70ms is unreasonable and impossible. Codecs work in chunks. – Brad Oct 02 '16 at 19:58
  • You're not using WebRTC in the code above. Really, what you're doing is futile. MediaRecorder isn't configured for low latency. I'd strongly recommend abandoning this method and using WebRTC. – Brad Oct 02 '16 at 21:19
  • i dont want peer-to-peer connection i think to do like that **broadcaster ->server <-> viewers** how can i use here webRTC??? – Ilkin Abdullayev Oct 02 '16 at 21:28
  • You don't have to use one, but you do need a video encoding proflie optimized for latency, and the playback end optimized for latency as well. If you were serious about your latency requirement, you would use a p2p connection to remove an extra hop. – Brad Oct 02 '16 at 21:30
  • I don't know that it's useful to you, but there are a few other questions that may be relevant: http://stackoverflow.com/q/24102075/781965 http://stackoverflow.com/q/30617673/781965 and http://stackoverflow.com/q/30868854/781965 – Jeff Oct 03 '16 at 04:27

0 Answers0