CODEWITHSUNDEEP
javascripthtmlgoogle-chromevideomozilla
Allloush
Allloush

Reputation: 1168

Mozilla doesn't trigger video tage events after attach video src

I have a problem with Mozilla, I need to fit video dimension to spread on whole div, I tried onloadedmetadata and onloadeddata and other events. all the previous events works perfect on chrome. If i use scaleToFill manually from Mozilla console, it works

This is the code 

navigator.getUserMedia(constraints, handleUserMedia, handleUserMediaError);

function handleUserMedia(stream) {
  localVideo = document.getElementById('localVideo');
  sendButton.onclick = sendData
  localStream = stream;
  attachMediaStream(localVideo, stream);
  localVideo.onloadedmetadata = function (e) {
    scaleToFill(localVideo);
  }

function scaleToFill(videoTag) {
  var $video = $(videoTag),
      videoRatio = videoTag.videoWidth / videoTag.videoHeight,
      tagRatio = $video.width() / $video.height();
  if (videoRatio < tagRatio) {
    $video.css('-webkit-transform', 'scaleX(' + tagRatio / videoRatio + ')')
    $video.css('-moz-transform', 'scaleX(' + tagRatio / videoRatio + ')')
  } else if (tagRatio < videoRatio) {
    $video.css('-webkit-transform', 'scaleY(' + videoRatio / tagRatio + ')')
    $video.css('-moz-transform', 'scaleY(' + videoRatio / tagRatio + ')')
  }
}

Thanks.

Upvotes: 0

Views: 75

Answers (1)

Kaiido
Kaiido

Reputation: 137006

The event is fired for me.
You probably need to attach it before calling the attachMediaStream() function, however, the event could have fired before you attached it.

var video = document.createElement('video');
document.body.appendChild(video);

video.onloadedmetadata = function(){alert('metadata loaded');};

navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);

if (!navigator.getUserMedia) {
  alert('Your browser does not like GUM');
}

navigator.getUserMedia({
    video: true,
    audio: false,
  },

  function(stream) {
    if (navigator.mozGetUserMedia) {
      video.mozSrcObject = stream;
    } else {
      var URL = window.URL || window.webkitURL;
      video.src = URL.createObjectURL(stream);
    }
    video.play();
  },

  function(err) {
    console.log(err);
  }
);

Upvotes: 1

Related Questions