Bug 181053 - Safari on iOS 11.2.5 - .srcObject does not work
Summary: Safari on iOS 11.2.5 - .srcObject does not work
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebRTC (show other bugs)
Version: WebKit Nightly Build
Hardware: iPhone / iPad iOS 11
: P2 Blocker
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2017-12-20 13:40 PST by iamtesting
Modified: 2017-12-20 15:00 PST (History)
3 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description iamtesting 2017-12-20 13:40:02 PST 
1. iOS 11.2.5: Safari.
2. Following does not work yet like it does in iPad. 

<video id="localVideo"  oncontextmenu="return false;"></video>
<video id="remoteVideo"  oncontextmenu="return false;"></video>
<video id="miniVideo"  oncontextmenu="return false;" autoplay="autoplay" muted="true"></video>

<script>
var mainVideoSeflView = document.getElementById('localVideo');//works
var pictureInPicture = document.getElementById('miniVideo');

// (iOS iPad works, OSX Safari works, Google chrome works, Firefox works, Opera works)
// iPhone does not work: .srcObject
pictureInPicture.srcObject = mainVideoSeflView.srcObject;
</script>

3. I have a live camera view on  localVideo which is working fine, i can see myself. 
But then i need a clone or switch  localVideo to miniVideo (like picture in picture on bottom right),
By applying .srcObject from localVideo to miniVideo does not work in iPhone, same sample works on same iOS 11.2.5 of iPad or OSX Safari
Comment 1 youenn fablet 2017-12-20 14:25:38 PST 
Hi,
Can you provide a JSFiddle/testcase that reproduces your issue?
Comment 2 iamtesting 2017-12-20 14:55:30 PST 
[SOLVED]

- 11.2.5 beta updated just now, and the problem is gone i can use the as i could in iPad.

pictureInPicture.srcObject = mainVideoSeflView.srcObject;
Comment 3 iamtesting 2017-12-20 15:00:51 PST 
FYI - Tested code:
==

<!DOCTYPE html>
<html>
<head>
  <title>getUserMedia</title>
</head>

<body>

<div id="container">

  <video id="localVideo" autoplay playsinline></video>
  <video id="miniVideo" autoplay playsinline style="position: fixed;bottom:0px;right:10px;width: 150px;height:150px;border:solid 5px red;"></video>

</div>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://webrtc.github.io/samples/src/js/common.js"></script>
<script>


'use strict';


var mainVideoSeflView = document.getElementById('localVideo');
var pictureInPicture = document.getElementById('miniVideo');

// Put variables in global scope to make them available to the browser console.
var constraints = window.constraints = {
  audio: false,
  video: true
};

function handleSuccess(stream) {
  var videoTracks = stream.getVideoTracks();
  console.log('Got stream with constraints:', constraints);
  console.log('Using video device: ' + videoTracks[0].label);
  stream.oninactive = function() {
    console.log('Stream inactive');
  };
  window.stream = stream; // make variable available to browser console
  
  mainVideoSeflView.srcObject = stream;
  pictureInPicture.srcObject = mainVideoSeflView.srcObject;
}

function handleError(error) {
  if (error.name === 'ConstraintNotSatisfiedError') {
    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
        constraints.video.width.exact + ' px is not supported by your device.');
  } else if (error.name === 'PermissionDeniedError') {
    errorMsg('Permissions have not been granted to use your camera and ' +
      'microphone, you need to allow the page access to your devices in ' +
      'order for the demo to work.');
  }
  errorMsg('getUserMedia error: ' + error.name, error);
}

function errorMsg(msg, error) {
  
  if (typeof error !== 'undefined') {
    console.error(error);
  }
}

navigator.mediaDevices.getUserMedia(constraints).
    then(handleSuccess).catch(handleError);
    
  
</script>

</body>
</html>