这是系列一

1、webrtc 调用摄像头

1.1、api

使用API : getusermedia
navigator.mediaDevices.getUserMedia(Constraints)
Constraints 是限制流参数，比如画面宽高。

1.2、加入adapter-laster.js

为了保证摄像头在浏览器中兼容API而使用

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

3、使用限制宽高
在webrtc中也可以使用16：9 的样式来限制宽高，很简单，如下使用

const Constraints = {video: {width: {exact: 640}, height: {exact:360}}};

上面本来是640 480的画面我们截取了640 360

结果如下：

4 、截图
使用canvas的api

context.drawImage(video, 0, 0, 375, 180);

接着我们使用定时器定时取固定区域的图片，得到的结果如上图所示。

 window.setInterval(function(){context.drawImage(video, 0, 0, 375, 180);},40);

意思为每隔40毫秒画一幅

2、show me the code

html 代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">    <title>html5 调用本地摄像头</title><style type="text/css">html,body{position: relative;width: 100%;height: 100%;padding: 0px;margin: 0px;}video{width: 640px;height: 360px;}canvas{width: 640px;height: 360px;    position: absolute;left: 0px;top: 360px;z-index: 100;}</style>
</head>
<body><video id="video" autoplay="autoplay" style="background: #ccc;"></video><canvas id="canvas"></canvas><script type="text/javascript">const Constraints = {video: true,};var video = document.getElementById("video");var context = canvas.getContext("2d");var errocb = function (code) {alert(code);};function handleError(error) {console.log(`navigator.getUserMedia error: ${error.toString()}.`);}function gotLocalMediaStream(mediaStream) {video.srcObject = mediaStream;console.log('Received local stream.');}navigator.mediaDevices.getUserMedia(Constraints).then(gotLocalMediaStream).catch(handleError);window.setInterval(function(){context.drawImage(video, 0, 0, 375, 180);},40);</script><script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</body>
</html>

如何使用webrtc 一相关推荐

WebRTC框架中的硬件加速
WebRTC框架中的硬件加速典型缓冲流量应用程序和单元测试设置重要方法调用 WebRTC软件包局限性 WebRTC是一个免费的开源项目,可为浏览器和移动应用程序提供实时通信功能. WebRTC ...
webrtc android ndk,webrtc 针对 android 平台的编译和运行
1环境准备官方说明: 针对android构建需要Ubuntu64位机器,虚拟机也行. 1.1安装SVN 直接用apt-get安装 sudoapt-getinstallsubversion 1.2安装 ...
展望2018：WebRTC大规模商用元年
历经6年长跑,WebRTC终于在去年迎来了1.0标准(candidate recommendation)的发布,而它也将成为2018年视频通信商业应用场景爆发的主要技术推动力.一站式WebRTC通信技 ...
使用WebRTC搭建前端视频聊天室——数据通道篇
转自使用WebRTC搭建前端视频聊天室--数据通道篇在两个浏览器中,为聊天.游戏.或是文件传输等需求发送信息是十分复杂的.通常情况下,我们需要建立一台服务器来转发数据,当然规模比较大的情况下,会扩 ...
Android IOS WebRTC 音视频开发总结（三八）-- tx help
Android IOS WebRTC 音视频开发总结(三八)-- tx help 本文主要介绍帮一个程序员解决webrtc疑问的过程,文章来自博客园RTC.Blacker,支持原创,转载请说明出处(w ...
WebRTC的拥塞控制技术转
转载地址:http://www.jianshu.com/p/9061b6d0a901 1. 概述对于共享网络资源的各类应用来说,拥塞控制技术的使用有利于提高带宽利用率,同时也使得终端用户在使用网络时 ...
Android IOS WebRTC 音视频开发总结（七四）-- WebRTC开源5周年了，Google怎么看？
本文最早发表在我们的微信公众号上(微信ID:blackerteam),支持原创,详见这里, 2016年6月9日是WebRTC开源5周年的日子,Google WebRTC负责人Harald在社区里面写了 ...
WebRTC内置debug工具，详细参数解读
为了确保这篇文章所写内容尽可能的准确,我决定请来Philipp Hancke来作为此篇文章的共同作者. 当你想要找到你WebRTC产品中的问题时,webrtc-internals是一个非常棒的工具,因 ...
一起来学习 WebRTC （篇一）| 掘金技术征文
前言作为一个认为啥都想懂一点的小开发,一直都对WebRTC很感兴趣,这个兴趣来源于几年前公司希望做一个即时通讯的小功能在APP上,不过最终由于项目最终需求更改而搁置.虽然如此,但是我还是了解了一些关 ...
专访WebRTC标准之父Daniel C. Burnett
摘要:2010年5月,Google 以6,820万美元收购 VoIP 软件开发商 Global IP Solutions 的 GIPS 引擎,将其开源并改为名为"WebRTC".随 ...

如何使用webrtc 一

1、webrtc 调用摄像头

1.1、api

1.2、加入adapter-laster.js

2、show me the code

如何使用webrtc 一相关推荐

最新文章

热门文章