MediaStream Unhandled Promise Rejection: [object DOMError] (in Safari 11)

Question

I am getting an Unhandled Promise Rejection in Safari Tech Preview 11 in my method below to initialize WebRTC. Specifically, it occurs when I assign the MediaStream to the video element like this: video.srcObject = event.stream; - the stack trace shows that this line is the one that threw the exception. I have not been able to catch the exception using try/catch.

The exception is only occurring in Safari 11 (does not occur in Chrome).

Here is the method:

initWebRTC(p){
    var self = this;
    return new Promise((resolve, reject) => {

      self.state.connection = new RTCMultiConnection();
      self.state.connection.socketMessageEvent = 'webrtc-firebase';
      self.state.connection.setCustomSocketHandler(FirebaseConnection);
      self.state.connection.firebase = 'webrtc-firebase'; 
      self.state.connection.enableFileSharing = true; 
      self.state.connection.session = {
        audio: true,
        video: true,
        data: true
      };
      self.state.connection.sdpConstraints.mandatory = {
        OfferToReceiveAudio: true,
        OfferToReceiveVideo: true
      };
      self.state.connection.onstream = function(event) {
          console.log('event.mediaElement',event.mediaElement);
          console.log('event.stream',event.stream);

          var videoContainer = document.getElementById('videoContainer');
          var video = event.mediaElement;
          if (!window.safari){
            var source = document.createElement("source");
            source.srcObject = event.stream;
            video.appendChild(source);
          } else { // Safari
            try{
              video.srcObject = event.stream; // this is the line that throws the exception
            }catch(e){ //unable to catch the exception
              console.log('exception',e);
            }
          }
          videoContainer.appendChild(video);

          var playPromise = video.play();
          if (playPromise !== undefined) { // not a Promise in some browsers
            playPromise.catch(function(error) {
            });
          }
          setTimeout(function() {
            var playPromise = video.play();
            if (playPromise !== undefined) {
              playPromise.catch(function(error) {
              });
            }
          }, 5000);
      };
      resolve();
    });
  }

Not sure if this helps, but here is the trace:

[Error] Unhandled Promise Rejection: [object DOMError]
    (anonymous function)
    rejectPromise
    onstream (index.js:5787) // this is the video.srcObject = event.stream; line
    (anonymous function) (RTCMultiConnection.js:4092)
    getRMCMediaElement (RTCMultiConnection.js:1113)
    onGettingLocalMedia (RTCMultiConnection.js:4064)
    onGettingLocalMedia (RTCMultiConnection.js:4984)
    streaming (RTCMultiConnection.js:3289)
    (anonymous function) (RTCMultiConnection.js:3358)
    promiseReactionJob

Any help would be appreciated. Thanks!

Answer 1

Safari 11 blocks from autoplay any video with sound by default (source).

I believe the video element comes with the autoplay attribute. When you set srcObject to it, it will try to play the video -- and then got blocked by Safari. That's why you see the error.

You can try to remove autoplay from the video element, then you may be able to catch it in playPromise.catch.

Answer 2

I don't know if this can work for you but I had a similar issue, the fix was add the 'muted' attribute to the video tag, after that everything is working again, hope it helps.