TODO: Media stream visualization

staskobzar commented 5 years ago

Visualization of RTPPeerConnection for example for WebRTC

matiaslopezd commented 4 years ago

Yes, please!

For example I want use with microphone audio and the only way to do that is changing srcObject of audio tag.

const constraints = { audio: true, video: true };
navigator.mediaDevices.getUserMedia(constraints)
    .then((stream) => {
      document.querySelector('audio').srcObject = stream;
    })
    .catch(e => console.log(e));

Error:

[Vue warn]: Error in mounted hook: "TypeError: Failed to execute 'createMediaElementSource' on 'AudioContext': parameter 1 is not of type 'HTMLMediaElement'."

found in

---> <AvLine>
       <Box> at src/components/box.vue
         <Test> at src/components/test.vue
           <WidgetBody> at src/components/body.vue
             <App> at src/App.vue
               <Root>

I saw that in AvBase.js line 142 or function setAnalyser you got the src and not srcObject (MediaStream).

Can fix using createMediaElementSource only if src !== " ". Else if srcObject === MediaStream use createMediaStreamSource.

I sent a PR!

matiaslopezd commented 4 years ago

Sorry I don't have time for send the PR, because take me too much time understand your logic.

But like a preview I believe that can add srcObject prop :)

staskobzar commented 4 years ago

Available in new release, ver 2.0.0

staskobzar / vue-audio-visual

TODO: Media stream visualization #18