WebRTC 处理过程
这幅图大致分为三个部分:
- WebRTC终端:负责音视频采集、编解码、NAT穿越、音视频数据传输。
- Signal服务器:负责信令处理,如加入房间、离开房间、媒体协商消息的传递等。
- STUN/TURN服务器:负责获取WebRTC终端在公网的ip地址,以及NAT数据穿越失败后的数据中转。
音视频采集的基本概念:
- 摄像头
- 帧率:摄像头一秒采集图像的次数
- 分辨率:图像的像素个数
- 宽高比
- 麦克风
- 采样率:麦克风一秒内采样的次数
- 轨:MP4中分为音频轨和视频轨,相互独立
- 流:可以理解为容器。可分为媒体流和数据流,媒体流可以存放0个或多个音频轨或视频轨;数据流可以存0或多个数据轨。
音视频采集代码
index.html
<html>
<head>
<title>WebRTC capture video and audio</title>
<link rel="stylesheet" href="./css/client.css"/>
</head>
<body>
<!-- 表示当页面加载时可以自动在HTML5上播放视频; -->
<video autoplay playsinline id="player"></video>
<script src="./js/1.js"></script>
</body>
</html>
1.js
var constraints = {
video : {
width: 640,
height: 480,
frameRate:15,
facingMode: 'enviroment'
},
audio : false
}
function gotMediaStream(stream){
var videoTrack = stream.getVideoTracks()[0];
window.stream = stream;
videoplay.srcObject = stream;
}
navigator.mediaDevices.getUserMedia(constraints).then(gotMediaStream);
client.css
/*
* Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
button {
margin: 0 20px 25px 0;
vertical-align: top;
width: 134px;
}
div#getUserMedia {
padding: 0 0 8px 0;
}
div.input {
display: inline-block;
margin: 0 4px 0 0;
vertical-align: top;
width: 310px;
}
div.input > div {
margin: 0 0 20px 0;
vertical-align: top;
}
div.output {
background-color: #eee;
display: inline-block;
font-family: 'Inconsolata', 'Courier New', monospace;
font-size: 0.9em;
padding: 10px 10px 10px 25px;
position: relative;
top: 10px;
white-space: pre;
width: 270px;
}
section#statistics div {
display: inline-block;
font-family: 'Inconsolata', 'Courier New', monospace;
vertical-align: top;
width: 308px;
}
section#statistics div#senderStats {
margin: 0 20px 0 0;
}
section#constraints > div {
margin: 0 0 20px 0;
}
section#video > div {
display: inline-block;
margin: 0 20px 0 0;
vertical-align: top;
width: calc(50% - 22px);
}
section#video > div div {
font-size: 0.9em;
margin: 0 0 0.5em 0;
width: 320px;
}
h2 {
margin: 0 0 1em 0;
}
section#constraints label {
display: inline-block;
width: 156px;
}
section {
margin: 0 0 20px 0;
padding: 0 0 15px 0;
}
section#video {
width: calc(100% + 20px);
}
video {
--width: 90%;
display: inline-block;
width: var(--width);
height: calc(var(--width) * 0.75);
margin: 0 0 10px 0;
}
@media screen and (max-width: 720px) {
button {
font-weight: 500;
height: 56px;
line-height: 1.3em;
width: 90px;
}
div#getUserMedia {
padding: 0 0 40px 0;
}
section#statistics div {
width: calc(50% - 14px);
}
video {
display: inline-block;
width: var(--width);
height: 96px;
}
}
点击index.html即可在浏览器开启摄像头。