WebRTC之用浏览器访问摄像头

最新推荐文章于 2024-04-25 13:15:36 发布

Dragonlogin

最新推荐文章于 2024-04-25 13:15:36 发布

阅读量1.6k

点赞数 3

分类专栏： WebRTC学习文章标签：音视频

本文链接：https://blog.csdn.net/Dragonlogin/article/details/122200990

版权

WebRTC学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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即可在浏览器开启摄像头。

Dragonlogin

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WebRTC之用浏览器访问摄像头

WebRTC 处理过程这幅图大致分为三个部分：WebRTC终端：负责音视频采集、编解码、NAT穿越、音视频数据传输。Signal服务器：负责信令处理，如加入房间、离开房间、媒体协商消息的传递等。STUN/TURN服务器：负责获取WebRTC终端在公网的ip地址，以及NAT数据穿越失败后的数据中转。音视频采集的基本概念：摄像头帧率：摄像头一秒采集图像的次数分辨率：图像的像素个数宽高比麦克风采样率：麦克风一秒内采样的次数轨：MP4中分为音频轨和视频轨，相互独立流：可以理解为容器
复制链接

扫一扫