逍遥阁

webrtc学习笔记

关键词: webrtc

webrtc学习笔记

### STUN

Session Traversal Utilities for NAT

需要的带宽小，主要用于会话信息交互

### TURN

Traversal Using Relays around NAT

需要的带宽大，当p2p打不通的时候就直接用服务器中转，85%-90%的情况能够打通p2p

可以去`http://numb.viagenie.ca`注册个帐号拿到一个用于测试的STUN|TURN帐号

### 相关开源项目

```
https://github.com/coturn/coturn(STUN和TURN都有)
http://www.stunprotocol.org
```

### 公开的STUN服务器

```
stun.stunprotocol.org(UDP和TCP的端口都是3478)
```

### Constraints

```
{
    audio: true,
    video: true
}

{
    audio: true,
    video: {
        width: 1280,
        height: 720
    }
}

{
    audio: true,
    video: {
        width: {
            min: 1280
        },
        height: {
            min: 720
        },
        facingMode: "user"
    }
}

{
    video: {
        frameRate: {
            ideal: 10,
            max: 15
        }
    }
}

{
    video: {
        facingMode: (front? "user" : "environment")
    }
}

{
    audio: true,
    video: {
        facingMode: {
            exact: "environment"
        }
    }
}

{
    audio: true,
    video: {
        width: {
            min: 1024,
            ideal: 1280,
            max: 1920
        },
        height: {
            min: 776,
            ideal: 720,
            max: 1080
        }
    }
}
```

运行如下命令可以得到全部的列表

```
navigator.mediaDevices.getSupportedConstraints();
```

结果为

```
aspectRatio
brightness
channelCount
colorTemperature
contrast
depthFar
depthNear
deviceId
echoCancellation
exposureCompensation
exposureMode
facingMode
focalLengthX
focalLengthY
focusMode
frameRate
groupId
height
iso
latency
pointsOfInterest
sampleRate
sampleSize
saturation
sharpness
torch
videoKind
volume
whiteBalanceMode
width
zoom
```

### 查看所有设备

```
navigator.mediaDevices.enumerateDevices()
.then(function(devices){
    devices.forEach(function(device){
        console.log(device);
    });
})
.catch(function(error){
    console.log(error);
});
```

### MediaStream

`navigator.mediaDevices.getUserMedia`的成功回调函数里面参数就是`MediaStream`

```
new MediaStream()
MediaStream.active
MediaStream.ended
MediaStream.id
MediaStream.onaddtrack
MediaStream.onremovetrack
MediaStream.addTrack()
MediaStream.clone()
MediaStream.getAudioTracks()
MediaStream.getTrackById()
MediaStream.getTracks()
MediaStream.getVideoTracks()
MediaStream.removeTrack()
```

demo

```
navigator.mediaDevices.getUserMedia({video: true})
.then(
    function(mediaStream){
        console.log(mediaStream.getVideoTracks());
    }
);
```

### MediaStreamTrack

`MediaStream.getTracks()`返回的是`MediaStreamTrack`集合

`MediaStream.getAudioTracks()`返回的是`MediaStreamTrack`集合

`MediaStream.getVideoTracks()`返回的是`MediaStreamTrack`集合

```
MediaStreamTrack.contentHint
MediaStreamTrack.enabled
MediaStreamTrack.id
MediaStreamTrack.kind
MediaStreamTrack.label
MediaStreamTrack.muted
MediaStreamTrack.readonly
MediaStreamTrack.readyState
MediaStreamTrack.remote
MediaStreamTrack.onstarted
MediaStreamTrack.onmute
MediaStreamTrack.onunmute
MediaStreamTrack.onoverconstrained
MediaStreamTrack.onended
MediaStreamTrack.applyConstraints()
MediaStreamTrack.clone()
MediaStreamTrack.getCapabilities()
MediaStreamTrack.getConstraints()
MediaStreamTrack.getSettings()
MediaStreamTrack.stop()
```

demo

```
const track = mediaStream.getVideoTracks()[0];
track.applyConstraints(constraints)
.then(function(){

})
.catch(function(reason){

});
```

### 过时的API

1.navigator.getUserMedia

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webrtc</title>
</head>
<body>
<video src="" id="test" width="640" height="360" autoplay controls></video>
<script type="text/javascript">
navigator.getUserMedia(
    {audio: false, video: true},
    function(stream){
        document.getElementById('test').srcObject = stream;
    },
    function(error){
        console.log(error);
    }
);
</script>
</body>
</html>
```

应该用`navigator.mediaDevices.getUserMedia`

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webrtc</title>
</head>
<body>
<video src="" id="test" width="640" height="360" autoplay controls></video>
<script type="text/javascript">
navigator.mediaDevices.getUserMedia({audio: false, video: true})
.then(function(stream){
    document.getElementById('test').src = window.URL.createObjectURL(stream);
})
.catch(function(error){
    console.log(error);
});
</script>
</body>
</html>
```

admin
2017-11-07 18:25:07
html javascript media

文章分类

文章标签

文章归档

友情链接

webrtc学习笔记