CODEWITHSUNDEEP
recordingmediastream
Student
Student

Reputation: 31

navigator.mediaDevice.getUserMedia... how to access the actual stream?

I test a piece of code taken from https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia. I am trying to record microphone Data to access it to other users and record it to a database. Actually i dont even get data from the webcam anyway. 

// Prefer camera resolution nearest to 1280x720.
var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
 video.onloadedmetadata = function(e) {
 video.play();
  };
  })
.catch(function(err) { console.log(err.name + ": " + err.message); }); //               always check for errors at the end.

For me, the above code tries to open the user media and if successful, the stream information from mediaStream is saved to video and video is played. The problem is, that the mediaStream is not given by the getUserMedia itsself. To say it clear: even if getUserMedia is working and permission is granted, WHERE DO I GET THE STREAM FROM? ty for answer

Upvotes: 3

Views: 5493

Answers (1)

Benny Powers
Benny Powers

Reputation: 5836

This is working for me, I can see the video stream in browser.

https://granite-ambulance.glitch.me

    const video = document.querySelector('video');

    async function stream() {
      
      try {
        const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: { width: 1280, height: 720 } })
        video.srcObject = mediaStream;
      } catch (e) {
        console.error(e)
      }
      video.onloadedmetadata = async function(event) {
        try {
          await video.play();
        } catch (e) {
          console.error(e)
        }
      }
    }

    stream()
<video></video>

Upvotes: 2

Related Questions