webrtc来一个示例
时间: 2023-05-17 22:04:04 浏览: 52
好的,以下是一个基于 WebRTC 的视频通话示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebRTC Video Chat Example</title>
</head>
<body>
<video id="localVideo" autoplay></video>
<video id="remoteVideo" autoplay></video>
<script>
// Get local video stream
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(function(stream) {
var localVideo = document.getElementById('localVideo');
localVideo.srcObject = stream;
})
.catch(function(error) {
console.log('getUserMedia error: ', error);
});
// Create PeerConnection
var pc = new RTCPeerConnection();
// Add local stream to PeerConnection
var localStream = document.getElementById('localVideo').srcObject;
localStream.getTracks().forEach(function(track) {
pc.addTrack(track, localStream);
});
// Handle incoming remote stream
pc.ontrack = function(event) {
var remoteVideo = document.getElementById('remoteVideo');
remoteVideo.srcObject = event.streams[0];
};
// Create offer and set local description
pc.createOffer()
.then(function(offer) {
return pc.setLocalDescription(offer);
})
.then(function() {
// Send offer to remote peer
console.log('Local description set:', pc.localDescription);
})
.catch(function(error) {
console.log('createOffer error: ', error);
});
</script>
</body>
</html>
```
这个示例使用 `getUserMedia` 方法获取本地视频和音频流,并将其添加到 `RTCPeerConnection` 中。然后,它创建一个 offer 并将其设置为本地描述符,最后将 offer 发送给远程对等端。当远程对等端接收到 offer 后,它将创建一个 answer 并将其设置为远程描述符,然后将 answer 发送回来。一旦本地和远程描述符都设置好了,视频通话就可以开始了。
相关推荐

















