This works perfectly fine on android (every part of it). But when I receive a video stream wrapped in a blob on iOS from android or another iOS device, it does not show any sign of loading the video or displaying it. However, when I show my own video to myself on iOS, it works.
I have tried the following:
video.setAttribute('autoplay', '');
video.setAttribute('playsinline', '');
video.setAttribute('muted', '');
Or adding a source element to the video element, but these did not work.
How am I supposed to fix the receiving video issue on iOS?
Code (sorry for all the styling):
Client:
let media;
const done = document.getElementById('done');
const vidCon = document.getElementById('video-con');
var getUserMedia = (navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia).bind(navigator.mediaDevices);
getUserMedia({
video: true,
audio: true
}).then((stream) => {
const myVideo = document.createElement('video');
myVideo.srcObject = stream;
myVideo. setAttribute('autoplay', '');
myVideo. setAttribute('muted', '');
myVideo. setAttribute('playsinline', '');
myVideo.style.width = '100%';
myVideo.style.height = '80%';
myVideo.muted = true;
myVideo.style.display = 'block';
myVideo.style.objectFit = 'cover';
media = new MediaRecorder(stream);
media.onstart = function(e) {
this.chunks = [];
myVideo.play();
document.getElementById('video-base-con').append(myVideo);
}
done.onclick = function() {
media.stop();
audio.src = "93642-Blakes_7_Gun_144bpm.wav";
audio.play();
audio.addEventListener('ended', go);
done.style.display = 'none';
document.getElementById('blank-choosing').style.display = 'block';
}
media.ondataavailable = function(e) {
this.chunks.push(e.data);
}
media.onstop = function(e) {
myVideo.remove();
var blob = new Blob(this.chunks, { 'type' : 'video/ogg; codecs=opus' });
socket.emit('send-video', blob);
}
});
socket.on('recieve-video', (stream, codeNew) => {
if (codeNew == code.value) {
document.getElementById('blank-video').style.display = 'none';
console.log('recieved video.');
const blob = new Blob([stream], { 'type' : 'video/ogg; codecs=opus' });
const video = document.createElement('video');
video.src = window.URL.createObjectURL(blob);
video. setAttribute('autoplay', '');
video. setAttribute('muted', '');
video. setAttribute('playsinline', '');
vidCon.style.display = 'block';
video.style.width = '90%';
video.style.height = '100%';
video.style.objectFit = 'cover';
vidCon.style.width = '100%';
vidCon.style.height = '100%';
vidCon.style.textAlign = 'center';
vidCon.style.backgroundColor = 'lightgray';
vidCon.style.borderRadius = '30px';
vidCon.append(video);
video.play();
video.addEventListener('ended', () => {
video.remove();
vidCon.style.display = 'none';
answers.style.display = 'block';
}, false);
}
});
Server:
socket.on('send-video', (blob) => {
socket.broadcast.emit('recieve-video', blob, code);
});
Thanks in advance!