专栏首页音视频直播技术专家通过WebRTC进行实时通信-从webcam获取视频流

通过WebRTC进行实时通信-从webcam获取视频流

一段简短的 HTML...

添加视频和脚本元素到work目录下的index.html中:

<!DOCTYPE html>
<html>
    <head>
        <title>Realtime communication with WebRTC</title>
        <link rel="stylesheet", href="css/main.css" />
    </head>
    <body>
        <h1>Realtime communication with WebRTC </h1>
        <video autoplay playsinline></video>
        <script src="js/main.js"></script>
    </body>
</html>

...和一段javascript片段

添加下面的代码到 js目录下的main.js中:

'use strict';

const mediaStreamContrains = {
    video: true,
};

const localVideo = document.querySelector('video');
let localStream;

function gotLocalMediaStream(mediaStream){
    localStream = mediaStream;
    localVideo.srcObject = mediaStream;
}

function handleLocalMediaStreamError(error){
    console.log('navigator.getUserMedia error: ', error);
}

navigator.mediaDevices.getUserMedia(mediaStreamContrains).then(gotLocalMediaStream).catch(handleLocalMediaStreamError);

这里的所有JavaScript例子都使用 use strict; 以避免一般的代码陷阱。可在 ECMAScript 5 Strict Mode, JSON, and More。中找到更多的信息。

试一下

在你的浏览器中打开 index.html,你将看到像下面这样子(当然是你的 webcam 中样子):

它是如何工作的呢?

通过调用getUserMedia(),浏览器向用户请求访问camera的权限(当前是否是第一次对camera的请求)。如果成功,返回MediaStream。MediaStream 将被多媒体元素的 srcObject 属性所使用:

navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
  .then(gotLocalMediaStream).catch(handleLocalMediaStreamError);

...

function gotLocalMediaStream(mediaStream) {
  localVideo.srcObject = mediaStream;
}

contrains 参数允许你指定你要得到的媒体。在这个例子中,只有video。 因此,audio默认提关闭的。

const mediaStreamConstraints = {
  video: true,
};

你能使用contrains申请额外的功能,如视频分辨率:

const hdConstraints = {
  video: {
    width: {
      min: 1280
    },
    height: {
      min: 720
    }
  }
}

MediaTrackConstraints 规范中列出了所有可能的 contrains 类型。但并不是所有的浏览器都支持这些选项。 如果请求的分辨率当前camera无法支持,getUserMedia将被拒绝,并返回OvercontrainedError,并且也不会给用户访问camera权限的提示。

这里你能看到一个demo演示如何使用 contrains去请求不同的分辨率, 这里有一个demo使用 contrains选择camera和microphone。 如果调用 getUserfMedia成功,从webcam获取的视频流将作为源设置给video元素。

function gotLocalMediaStream(mediaStream) {
  localVideo.srcObject = mediaStream;
}

点滴

  • 传递给 getUserMedia的 localStream是全局变量,所以你能从浏览器的console中看到:找开 console, 敲入 stream 并按回车键。(在Chrome中查看console,按 crtl+shift+j, 或在Mac 下按Command-Option-j)
  • localStream.getVideoTracks()会返回什么?
  • 偿试调用localStream.getVideoTrack()[0].stop()
  • 查看 contrains对象,当你修改它为 {audio: true, video:true}会发生什么?
  • 视频元素的大小是多少?通过 JavaScript你如何能得到视频的自然尺寸?使用 Crome Dev工具检查。
  • 添加 CSS 过滤视频元素,例如: video { filter: blur(4px) invert(1) opacity(0.5); }
  • 偿试添加 SVG过滤器, 例如: video { filter: hue-rotate(180deg) saturate(200%); }

我们学到了什么

在本节中,你学到了:

  • 从webcam得到视频
  • 设置多媒体的 contrains
  • 与视频元素混淆

本节完整的版本在 step-01目录下。

提示

最佳实践

  • 确保你的视频元素别超出它的container。 我们添加了widthmax-width设置最佳视频的尺寸和最大尺寸。 浏览器会自动计算高度: video { max-width: 100%; width: 320px; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 视频直播技术--Android视频采集(Camera1)

    今天为大家介绍一下使用Camera1进行视频采集。之前我写过一篇文章介绍的是Camera2进行视频采集。那么有人会问,为什么有了Camera2还要介绍Camer...

    音视频_李超
  • iOS下WebRTC视频编码

    在 iOS下WebRTC视频采集 一文中,向大家介绍了 WebRTC 是如何在 iOS下进行视频采集的。本文则介绍一下 iOS 下 WebRTC 是如何进行视频...

    音视频_李超
  • 最优秀的开源库之GPUImage

    近期想了解一下 IOS 下是如何进行音视频采集和渲染的。在学习一门新的知识时,很多人都有自己的学习方法,有的是买书学习,有的是看论坛等等不一而终。我的学习习惯是...

    音视频_李超
  • 自媒体运营技巧:如何成功申请今日头条号?

    祈澈菇凉
  • Python多环境扩展管理-Virtua

    Python多环境管理工具,这两款可能都不错: Pyenv 和 Virtualenv 。 Pyenv ,是对Python的版本进行管理,实现版本的切换。 Vir...

    py3study
  • Ansible 2 Api 源码分析及实现

    Ansible 2 API ansible 2 API发生了很大的变化。 通过对ansible 2.4.2 的源代码(Python 环境为2.7.5)进行分析来...

    企鹅号小编
  • 极客资讯丨你的网龄有多久了?快来看看这些图片吧...

    一川水巷
  • Ubuntu如何使用Roundcube安装自己的Webmail客户端

    如今,许多人使用基于浏览器的电子邮件客户端(如Gmail)来访问他们的电子邮件。但是,如果您想在查看电子邮件时停止查看广告,或者您已从公共电子邮件服务移至您自己...

    挺问中原
  • centos门罗币挖矿配置过程

    用户2135432
  • 来聊聊DenseNet及其变体PeleeNet、VoVNet

    前面,基础积累系列的文章讲了ResNet网络及其变体,具体可以参考文章:来聊聊ResNet及其变体,ResNet通过前层与后层的“短路连接”(Shortcuts...

    AI算法修炼营

扫码关注云+社区

领取腾讯云代金券