mediaDevices.getUserMedia not working with Safari 11 in iOs 11 (video is black)

I can't find explanation on this. From what I read it seems that Safari 11 is working with getUserMedia APIs, from iOs 11. So I don't understand what is wrong in this code (and my goal is to acquire a QR code in livestream, but blocked here):

Controller

function BarcodeReaderQRCtrl($scope) {
  /* widget controller */
  var c = this;
  var constraints = { audio: true, video: { width: 640, height: 480 } };

  c.startMedia = function() {
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(function(mediaStream) {
        var video = document.getElementById('idvideo');
        video.srcObject = mediaStream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
      })
      .catch(function(err) {
        console.log(err.name + ': ' + err.message);
      });
  };
}

HTML

<div>
  <a class="btn btn-default" href="#" role="button" ng-click="c.startMedia()">Start</a>
  <div>
    <video id="idvideo"></video>
  </div>
</div>

Any suggestions?

The problem is not in API as you said, it's because mobile browser needs a valid click event to start playing video, so video.play() will not work on mobile without user interaction. For example, this post is proving it: https://stackoverflow.com/a/16860922/6053654. What I usually do: I just add play icon over the video (only on mobile) to induce user to click, and then, I bind video.play() to this click event. Sounds simple.