7 changed files with 84 additions and 21 deletions
@ -0,0 +1,55 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>测试WebRTC推流</title> |
|||
</head> |
|||
|
|||
<body> |
|||
<video id="video" width="640" height="480" autoplay muted /> |
|||
</body> |
|||
<script> |
|||
(async () => { |
|||
const mediaStream = await navigator.mediaDevices.getUserMedia({ |
|||
video: true, |
|||
audio: true, |
|||
}); |
|||
document.getElementById('video').srcObject = mediaStream; |
|||
const pc = new RTCPeerConnection(); |
|||
pc.addTransceiver('video', { direction: 'sendonly' }); |
|||
pc.addTransceiver('audio', { direction: 'sendonly' }); |
|||
pc.oniceconnectionstatechange = () => { |
|||
console.log('oniceconnectionstatechange', pc.iceConnectionState); |
|||
}; |
|||
pc.onicecandidate = (e) => { |
|||
console.log('onicecandidate', e.candidate); |
|||
}; |
|||
mediaStream.getTracks().forEach((t) => { |
|||
pc.addTrack(t, mediaStream); |
|||
}); |
|||
const offer = await pc.createOffer(); |
|||
await pc.setLocalDescription(offer); |
|||
const result = await fetch( |
|||
`/webrtc/push/live/webrtc`, |
|||
{ |
|||
method: 'POST', |
|||
mode: 'cors', |
|||
cache: 'no-cache', |
|||
credentials: 'include', |
|||
redirect: 'follow', |
|||
referrerPolicy: 'no-referrer', |
|||
headers: { 'Content-Type': 'application/sdp' }, |
|||
body: offer.sdp, |
|||
}, |
|||
); |
|||
const remoteSdp = await result.text(); |
|||
await pc.setRemoteDescription( |
|||
new RTCSessionDescription({ type: 'answer', sdp: remoteSdp }), |
|||
); |
|||
})() |
|||
</script> |
|||
|
|||
</html> |
|||
Loading…
Reference in new issue