什么是webrtc？
借助 WebRTC，您可以将实时通信功能添加到基于开放标准运行的应用程序。它支持在对等点之间发送视频、语音和通用数据，允许开发人员构建强大的语音和视频通信解决方案.
重点: 点对点发送视频、语音和数据。
如何在浏览器中使用webrtc？
浏览器中可以通过一下方法判断当前浏览器是否支持webrtc
window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection
简单的Demo
先从最简单的例子开始，我们在一个网页中，通过两个RTCPeerConnection对象来建立一个连接，一个RTCPeerConnection(pc_pub)对象发送视频和语音，另一个RTCPeerConnection(pc_sub)对象接收视频和语音。
效果
image.png
此处使用了Safri的虚拟摄像头。可以避免使用真实摄像头还要露脸的尴尬。可以看到左侧是本地采集的画面，右侧是接收到的视频画面。中间有大概几十毫秒的延迟。
流程
image.png
在上面的流程图中，pub_pc表示推流的对象(PeerConnection)， sub_pc表示订阅的对象(PeerConnection)。
通过getUserMedia方法来请求使用本地设备
左侧的VideoElement只是用来显示推流内容(本地预览)，是否显示都不影响推流效果。
总结
先尝试跑通这个简单的Demo，可以看从页面中看到本地预览、推拉流的效果。如果你是第一次接触webrtc，上面的流程中有很多看不懂的名字和方法可以先忽略它们。
代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>webrtc连接</title>
</head>
<body>
<video id="localStream" style="width: 320px; height: 240px;" autoplay muted></video>
<video id="remoteStream" style="width: 320px; height: 240px;" autoplay muted> </video>
<button id="deviceBtn">打开本地摄像头</button>
<button id="startBtn">建立连接</button>
<script>
let localStream = null;
let localVideo = document.getElementById("localStream");
let remoteVideo = document.getElementById("remoteStream")
let deviceBtn = document.getElementById("deviceBtn");
let startBtn = document.getElementById("startBtn");
let pc_pub = new RTCPeerConnection();
let pc_sub = new RTCPeerConnection();
deviceBtn.addEventListener("click", () => {
navigator.mediaDevices.getUserMedia({ video: true }).then((mediastream) => {
localStream = mediastream;
localVideo.srcObject = mediastream;
})
})
startBtn.addEventListener("click", () => {
pc_pub.addTrack(localStream.getVideoTracks()[0], localStream);
pc_pub.createOffer().then((offer) => {
pc_pub.setLocalDescription(offer).then(() => {
pc_sub.setRemoteDescription(offer).then(() => {
pc_sub.createAnswer().then((answer) => {
pc_sub.setLocalDescription(answer).then(() => {
pc_pub.setRemoteDescription(answer).then(() => {
})
})
})
})
})
})
})
pc_pub.addEventListener('icecandidate', (event) => {
if (event.candidate) {
pc_sub.addIceCandidate(event.candidate);
}
})
pc_sub.addEventListener('icecandidate', (event) => {
if (event.candidate) {
pc_pub.addIceCandidate(event.candidate);
}
})
pc_sub.addEventListener('track', (event) => {
remoteVideo.srcObject = event.streams[0];
})
</script>
</body>
其他
如果你也是专注前端多媒体或者对前端多媒体感兴趣，可以搜索微信公众号"前端多媒体"
