RESOLVED FIXED 181053
Safari on iOS 11.2.5 - .srcObject does not work 
https://bugs.webkit.org/show_bug.cgi?id=181053
Summary Safari on iOS 11.2.5 - .srcObject does not work
iamtesting
Reported 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
Attachments
Add attachment proposed patch, testcase, etc.
youenn fablet
Comment 1 2017-12-20 14:25:38 PST
Hi, Can you provide a JSFiddle/testcase that reproduces your issue?
iamtesting
Comment 2 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;
iamtesting
Comment 3 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>
Note You need to log in before you can comment on or make changes to this bug.