CODEWITHSUNDEEP
androidcordovaionic-frameworkwebrtccordova-plugins
WJA
WJA

Reputation: 7004

DOMException for navigator.mediaDevices.getUserMedia on Android/Ionic

I am trying to stream a video element via my phone camera and using WebRTC. I do this as follows (snippets):

    <video id="yourVideo" autoplay muted playsinline></video>

    var yourVideo = document.getElementById("yourVideo");
    // ...

    navigator.mediaDevices.getUserMedia({audio:false, video:true}).
    then(function(stream){
        console.log(stream)
        yourVideo.srcObject = stream
        pc.addStream(stream)
    })
    .catch(function(error){
        console.log(error)
    })

This works fine in the browser and my video/camera is displayed. However, on the phone it returns me the error DOMException. I cannot find any information that can explain this. 

Running it Ionic V1.X
ionic cordova run android

When I run navigator.mediaDevices this is what I see:

enter image description here

Is it perhaps permission related? If so, how can I fix this?

Upvotes: 2

Views: 1508

Answers (1)

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

You will have to first get the device source and then try for the stream, try this way

var videoElement = document.getElementById("yourVideo");
var videoSrc = undefined;

navigator.mediaDevices.enumerateDevices()
  .then(getDevices).then(getStream).catch(handleError);

function getDevices(deviceInfos) {
  for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    if (deviceInfo.kind === 'videoinput') {
      videoSrc = deviceInfo.deviceId;
      break;
    }
  }
}

function getStream() {    
  navigator.mediaDevices.getUserMedia({
    video: {
      deviceId: {
        exact: videoSrc
      }
    }
  }).
  then(gotStream).catch(handleError);
}

function gotStream(stream) {
  videoElement.srcObject = stream;
}

function handleError(error) {
  console.log('Error: ', error);
}

Upvotes: 1

Related Questions