美文网首页
2018-08-09 用浏览器拍张照吧

2018-08-09 用浏览器拍张照吧

作者: c44fce2e629a | 来源:发表于2018-08-11 21:26 被阅读0次

最近在MDN上学习svg的时候,看到了WebRTC。很有意思嘛,浏览器也可以调用摄像头了。发现浏览器可以做的事情好多好多,不仅仅是提交表单和浏览网页。

2010年5月,Google 以6,820万美元收购 VoIP 软件开发商 Global IP Solutions 的 GIPS 引擎,将其开源并改为名为“WebRTC”。随即 WebRTC 被纳入万维网联盟的 W3C 推荐标准。2014年7月1日,WebRTC 浏览器 API 标准的1.0版由 W3C 发布。WebRTC 是一个由 Google、Mozilla和 Opera 主导的开源项目,通过在浏览器中调用简单的 JavaScript API 和标准的 HTML5 标签,浏览器、手机平台还有其他设备可通过一个通用的协议进行实时通信。

什么是WebRTC

WebRTC 是Web Real-Time Communications的缩写,是一个由 Google、Mozilla和 Opera 主导的开源项目,通过在浏览器中调用简单的 JavaScript API 和标准的 HTML5 标签,浏览器、手机平台还有其他设备可通过一个通用的协议进行实时通信。

历史及兼容性

  1. 2010年,Google开源WebRTC。
  2. 2014年,WebRTC浏览器API标准1.0版发布。
  3. 2017年5 月4号,WebRTC的API标准1.1稳定版发布。
兼容性

预备一下,学习API

getUserMedia

这个接口会请求用户的允许使用摄像头或者麦克风, 返回是一个promise,返回值就是媒体流。

navigator.mediaDevices.getUserMedia({audio: true, video: true})
image.png

RTCPeerConnection

使用RTCPeerConnection时,需要加前缀。可以使用Adapter.js来处理不同浏览器间的差异性。它提供了点对点的通信,可以保持、监视并且关掉连接,并且可以进行信号处理,编码解码,安全保证和控制带宽。

RTCDataChannel

RTCDataChannel允许点对点的双向通信,和WebSockets的API相同,但是比其时延小。

getStats

getStats是统计方法,可以统计WebRTC会话的相关信息。

video 标签

属性 意义 取值 备注
autoplay 自动播放 autoplay=“false”不能取消自动播放,需要去掉autoplay属性
buffered 一个只读属性,返回TimeRanges对象,这个对象返回的是访问这个属性时,浏览器已经缓存的媒体的时间范围 TimeRanges有两个方法start,end,查询起始时间和终点时间
controls 进度条等控制组件的显示
height video标签的高度
width video标签的宽度
src 视频资源的Url source标签也可以用来设定视频资源Url,和src同样的效果
preload 预加载 1.‘none’,不尽兴预加载。 2. ‘metadata’, 指返回video的metadata信息,例如长度等。 3.‘auto’, 视频预加载。这个值的默认值各个浏览器不同,推荐设定成metadata。 preload属性和autoplay属性同时设定时,autoplay属性优先级更高,即设定autoplay,preload设为none时,会按照autoplay的逻辑执行,忽略preload
poster 视频下载时显示的图片 不论视频是否预加载,设定这个值后,在视频播放前就显示这个图片
loop 是否循环播放视频
muted 播放视频时是否静音
playsinline 在iphone手机上,如果加了这个属性,那么在播放时,可以不进入到全屏,如果不加的话,播放时会进入全屏模式
接口

如上图所示,HTMLVideoElement继承自HTMLMediaElement。所以HTMLVideoElement有play方法,可以控制video的播放。

开始实战

拍照

1. 用video标签显示获得的视频流
2. canvas 绘制video截图
const video = document.querySelector('#video')
const canvas = document.querySelector('#canvas')
const photo = document.querySelector('#img')
navigator.mediaDevices.getUserMedia({video:true}).then(stream=>{
    video.srcObject = stream
    video.play()
})
            
function take () {
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, '200', '300');
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
}

相关文章

  • 2018-08-09 用浏览器拍张照吧

    最近在MDN上学习svg的时候,看到了WebRTC。很有意思嘛,浏览器也可以调用摄像头了。发现浏览器可以做的事情好...

  • 语文日记

    就拍张照吧!

  • 来, 拍张照吧

    每个人都在拍照,单反或手机,微博或朋友圈,每天都有海量的照片,在被产生和被遗忘,然而我们为什么要拍照呢? 有念头买...

  • 新年来了,拍张照吧

    新年来了,多出去走走吧! 感受一下春天的气氛。

  • 曹富

    艺术节上的你 “曹富,过来拍一张照呗” “老师,不拍吧” “来吧,老师给你拍一张”,于是有下面这张照片,老师会一直...

  • 捡起笔,给自己拍张照吧

    好久不见,看到你曾经写下的那一篇篇文章,仿佛看到那时的你,那一件件普通的小事,一个个惊叹或感动的瞬间,那么努力忘我...

  • 未完的梦

    兴许是焦虑吧 迷失在舒适安逸的墙 想说些什么 无人诉衷肠 又是个雨天 只想迅速的用相机拍张照 然后迅速的离开 焦虑...

  • 怀念℡我和你的美好时光

    “要不我们来拍一张,我把你踢下水的照片吧!” “你这是要谋杀亲夫吧!” “来,让我给你拍张照。” “热死宝宝啦!!...

  • 所谓真相大白  只是时间问题

    文/九木 “这张照片真好看 用什么拍的啊?” “这张照片也太丑了吧 谁拍的啊?” “我看到你前女友和别人在一起了 ...

  • 我的男孩长大了

    今晚突然想到今年都没好好的拍几张照片,临时起意也可以说是心血来潮孩子们都准备睡觉了我说我们拍张照吧!两个孩子...

网友评论

      本文标题:2018-08-09 用浏览器拍张照吧

      本文链接:https://www.haomeiwen.com/subject/ftjcbftx.html