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