From 65bb61197fc8a882bd06d87e03a4c981bc56c85d Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Thu, 21 Jan 2021 20:59:16 +0800 Subject: [PATCH 1/2] Support getUserMedia working on iOS safari and Mac OS X safari --- examples/lobbys/index.html | 32 +++++++++++++++++++++++++------- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/examples/lobbys/index.html b/examples/lobbys/index.html index 80c5ae3..8abf375 100644 --- a/examples/lobbys/index.html +++ b/examples/lobbys/index.html @@ -17,7 +17,9 @@

Select a lobby to join!

-
+
+ +
@@ -26,7 +28,7 @@ const roomContainer = document.getElementById('list') const localVideoContainer = document.getElementById('localVideo') const remoteVideoContainer = document.getElementById('remoteVideos') - + const localVideoElement = document.getElementById("video-local"); // creates a DOM element to allow the user to see/join rooms function createRoomElement (id) { const element = document.createElement('div') @@ -98,10 +100,10 @@ } signalClient.addListener('discover', onRoomPeers) } - - // request local webcam - navigator.getUserMedia({ audio: true, video: true }, (localStream) => { - const videoElement = createVideoElement(localVideoContainer, localStream, true) // display local video + + function userMediaProcess(localStream, localVideoElement) { + localVideoElement.style.display = "block" + localVideoElement.srcObject = localStream; signalClient.discover(null) // begin discovering rooms signalClient.on('request', async (request) => { @@ -118,6 +120,22 @@ roomElement.addEventListener('click', () => joinRoom(roomID, localStream)) // register a click handler to join room }) }) - }, () => alert('No webcam access!')) + } + + // request local webcam + try { + navigator.mediaDevices.getUserMedia({ + video: true, + audio: false + }).then(localStream => { + userMediaProcess(localStream, localVideoElement); + }).catch(err => { + alert("No webcam access!"); + }); + } + catch (err) { + alert("No webcam access!"); + } + \ No newline at end of file From c17c8a8285c3ac2470a704a2af25ab613c9f159d Mon Sep 17 00:00:00 2001 From: milochen0418 Date: Tue, 26 Jan 2021 21:26:52 +0800 Subject: [PATCH 2/2] Use playsInline attribute to let iOS Safari can support autoplay --- examples/lobbys/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/lobbys/index.html b/examples/lobbys/index.html index 8abf375..54e4d61 100644 --- a/examples/lobbys/index.html +++ b/examples/lobbys/index.html @@ -43,6 +43,7 @@ function createVideoElement(container, mediaStream, muted=false) { const videoElement = document.createElement('video') videoElement.autoplay = true + videoElement.playsInline = true videoElement.srcObject = mediaStream videoElement.muted = muted container.appendChild(videoElement)