You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.2 KiB
105 lines
3.2 KiB
11 months ago
|
var pc = null;
|
||
|
|
|
||
|
|
function negotiate() {
|
||
|
|
pc.addTransceiver('video', { direction: 'recvonly' });
|
||
|
|
return pc.createOffer().then((offer) => {
|
||
|
|
return pc.setLocalDescription(offer);
|
||
|
|
}).then(() => {
|
||
|
|
// wait for ICE gathering to complete
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
if (pc.iceGatheringState === 'complete') {
|
||
|
|
resolve();
|
||
|
|
} else {
|
||
|
|
const checkState = () => {
|
||
|
|
if (pc.iceGatheringState === 'complete') {
|
||
|
|
pc.removeEventListener('icegatheringstatechange', checkState);
|
||
|
|
resolve();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
pc.addEventListener('icegatheringstatechange', checkState);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}).then(() => {
|
||
|
|
var offer = pc.localDescription;
|
||
|
|
return fetch('/offer', {
|
||
|
|
body: JSON.stringify({
|
||
|
|
sdp: offer.sdp,
|
||
|
|
type: offer.type,
|
||
|
|
}),
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
method: 'POST'
|
||
|
|
});
|
||
|
|
}).then((response) => {
|
||
|
|
return response.json();
|
||
|
|
}).then((answer) => {
|
||
|
|
return pc.setRemoteDescription(answer);
|
||
|
|
}).catch((e) => {
|
||
|
|
alert(e);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function start() {
|
||
|
|
console.log('开始执行！');
|
||
|
|
var config = {
|
||
|
|
sdpSemantics: 'unified-plan'
|
||
|
|
};
|
||
|
|
//config.iceServers = [{ urls: ['stun:stun.voiparound.com'] }];
|
||
|
|
pc = new RTCPeerConnection();
|
||
|
|
pc.addEventListener('track', (evt) => {
|
||
|
|
if (evt.track.kind == 'video') {
|
||
|
|
const video = document.getElementById('video');
|
||
|
|
video.srcObject = evt.streams[0];
|
||
|
|
//video.play()
|
||
|
|
// video.muted = true; // 静音
|
||
|
|
// video.play().then(() => {
|
||
|
|
// // 如果成功播放，可以选择恢复音量
|
||
|
|
// video.muted = false;
|
||
|
|
// }).catch((error) => {
|
||
|
|
// console.error('Error playing video:', error);
|
||
|
|
// });
|
||
|
|
}
|
||
|
|
});
|
||
|
|
document.getElementById('start').style.display = 'none';
|
||
|
|
negotiate();
|
||
|
|
document.getElementById('stop').style.display = 'inline-block';
|
||
|
|
}
|
||
|
|
|
||
|
|
function stop() {
|
||
|
|
document.getElementById('stop').style.display = 'none';
|
||
|
|
// close peer connection
|
||
|
|
setTimeout(() => {
|
||
|
|
pc.close();
|
||
|
|
}, 500);
|
||
|
|
document.getElementById('start').style.display = 'inline-block';
|
||
|
|
}
|
||
|
|
|
||
|
|
function showView(){
|
||
|
|
console.log('status:',document.getElementById('video').paused)
|
||
|
|
if (document.getElementById('video').paused) {
|
||
|
|
document.getElementById('video').play().catch(error => {
|
||
|
|
console.error('Error playing video:', error);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// // 监听页面焦点变化
|
||
|
|
window.addEventListener('focus', () => {
|
||
|
|
if (document.getElementById('video').paused) {
|
||
|
|
document.getElementById('video').play().catch(error => {
|
||
|
|
console.error('Error playing video:', error);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//document.addEventListener('visibilitychange', () => {
|
||
|
|
//if (document.visibilityState === 'visible') {
|
||
|
|
// if (document.getElementById('video').paused) {
|
||
|
|
// document.getElementById('video').play().catch(error => {
|
||
|
|
// console.error('Error playing video:', error);
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
//}
|
||
|
|
//});
|