Giter Club home page Giter Club logo

Comments (13)

amalinaaziz avatar amalinaaziz commented on July 26, 2024 1

And the two streams generated as below.

webrtc.on('localStream', function (stream) { lclStream = stream; })

webrtc.on('videoAdded', function (video, peer) { peerStream = peer.stream; });

from video-stream-merger.

t-mullen avatar t-mullen commented on July 26, 2024

Where are the two MediaStreams coming from?

Can you play the combined stream in a video element?

var video = document.createElement('video')
video.src = URL.createObjectURL(merger.result)
document.body.appendChild(video)

Any console errors?

from video-stream-merger.

amalinaaziz avatar amalinaaziz commented on July 26, 2024

Thank you for your prompt reply.

the two MediaStreams are from getUserMedia(); and there's no console errors. However, the combined stream can only be played sometimes and if can be played, the combined video successfully generated. But i am not sure why only sometimes it can be played

from video-stream-merger.

t-mullen avatar t-mullen commented on July 26, 2024

That's odd. Do you mind posting your full code and Firefox version?

from video-stream-merger.

amalinaaziz avatar amalinaaziz commented on July 26, 2024

im afraid that i unable to share the whole code. but I am using SimpleWebRTC, and the firefox version is 55.0.3 (64-bit)

from video-stream-merger.

t-mullen avatar t-mullen commented on July 26, 2024

I understand. I'll try and reproduce with what you've put here.

from video-stream-merger.

amalinaaziz avatar amalinaaziz commented on July 26, 2024

I have simplified the codes and here's the page.

from video-stream-merger.

t-mullen avatar t-mullen commented on July 26, 2024

That page didn't work for me. (I think a button is missing, and a way to create peerStream?)

I couldn't reproduce using the example posted here and Firefox 55.0.3.

Click to expand code 
<html lang="en">
  <head>
    <style>
      .wrapper {
        max-height: 160px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <a href="https://github.com/RationalCoding/video-stream-merger" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <div class="wrapper">
      <video muted autoplay id="one" style="display:inline-block; width: 200px; background:black;"></video>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/5.0.4/adapter.min.js"></script>
    <script src="dist/video-stream-merger.js"></script>
    <script src="demo/getusermedia.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/7.0.0/simplepeer.min.js"></script>
    <script>

      getusermedia({audio:true, video:true}, function (err, peerStream) {
        if (err) throw err
        
        var lclStream = peerStream.clone()
        
        var merger = new VideoStreamMerger()

		// Add the screen capture. Position it to fill the whole stream (the default)
		merger.addStream(peerStream, {
		  x: 0, // position of the topleft corner
		  y: 0,
		  width: merger.width,
		  height: merger.height,
		  mute: false, // we don't want sound from the screen (if there is any)
		  index: 0
		})

		// Add the webcam stream. Position it on the bottom left and resize it to 100x100.
		merger.addStream(lclStream, {
		  x: merger.width - 100,
		  y: 0,
		  width: 100,
		  height: 100,
		  mute: false,
		  index: null
		})

		// Start the merging. Calling this makes the result available to us
		merger.start()
		combinedStream = merger.result;
        
        document.querySelector('video').src = URL.createObjectURL(combinedStream)
        
        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(combinedStream, options);
          theRecorder = mediaRecorder;
        } catch (e) {
          console.error('Exception while creating MediaRecorder: ' + e);
          console.log('Exception while creating MediaRecorder: '
            + e + '. mimeType: ' + options.mimeType);
          return;
        }
        console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
        mediaRecorder.onstop = function () {
          console.log('stop')
        };
        mediaRecorder.ondataavailable = function (data) {
          console.log(data)
        };
        mediaRecorder.start(10); // collect 10ms of data
      })

  </script>
  </body>
</html>

This makes me think the issue lies with how you are generating these two streams. Any additional details would be helpful.

from video-stream-merger.

t-mullen avatar t-mullen commented on July 26, 2024

One thing I noticed is that attempting to use merger.result can sometimes result in a frozen video. Waiting 1 second after merger.start() made the issue disappear.

from video-stream-merger.

amalinaaziz avatar amalinaaziz commented on July 26, 2024

Open the page in two tabs, you should see your streams, and there's a button at the most bottom right.

from video-stream-merger.

t-mullen avatar t-mullen commented on July 26, 2024

Okay, I've managed to reproduce. Seems the generated webm isn't empty, it's corrupted. I'll get back to you on this.

from video-stream-merger.

t-mullen avatar t-mullen commented on July 26, 2024

The MIME 'video/webm;codecs=vp9' isn't supported by Firefox.

MediaRecorder.isTypeSupported('video/webm;codecs=vp9') is false

I suggest using mimeType : 'video/mp4' for Firefox, and mimeType : 'video/webm;codecs=vp9' for Chrome.

Give this a try and let me know if it fixes things for you. Note #9 will probably affect you if you use background tabs to test things (use a separate window).

from video-stream-merger.

amalinaaziz avatar amalinaaziz commented on July 26, 2024

it is true that MediaRecorder.isTypeSupported('video/webm;codecs=vp9') is false but MediaRecorder.isTypeSupported('video/webm;codecs=vp8') is true in Firefox. And MediaRecorder.isTypeSupported('video/mp4') is false.

I noticed that there is a delay in mediaRecorder.stop() and the Blob is empty therefore I add setTimeout after mediaRecorder.stop() and fixed the issue.

                  mediaRecorder.stop();
   		  setTimeout(function() {
   		  console.log('Recorded Blobs: ', recordedBlobs);
   		  var blob = new Blob(recordedBlobs, {type: 'video/webm'});
   		  var url = window.URL.createObjectURL(blob);
   		  var a = document.createElement('a');
   		  a.style.display = 'none';
   		  a.href = url;
   		  a.download = 'filename.webm';
   		  document.body.appendChild(a);
   		  a.click();
   		  setTimeout(function() {
   			document.body.removeChild(a);
   			window.URL.revokeObjectURL(url);
   		  }, 100);
   		  }, 2000);

Thank you.

from video-stream-merger.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.