webrtc 调用摄像头并实时在浏览器中显示图像

        WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术。2011年5月开放了工程的源代码,在行业内得到了广泛的支持和应用,成为下一代视频通话的标准。有了webrtc操作摄像头就简单多了,不用引入任何js包,几行代码就可以实现了。

1.创建一个html文件代码如下:

img_ab39dfde878625cebe8c2233b927186a.png

核心js代码:

      //web rtc 调用摄像头(兼容性写法(谷歌、火狐、ie))

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

      //调用成功会回调返回一个stream流 video:true 表示采集视频,audio:true 表示采集声音,反之就都不采集。

    navigator.getUserMedia({video:true,audio:false},function(stream){

       //将采集到的视频信息显示在video标签中

    video.srcObject = stream; 

    },console.log) 

2.运行这个html文件你就可以看到效果了。

3.总结: 有的东西看是简单,长时间不用就忘了,有的东西想起来很复杂,其实做起来就觉得没那么难了,我之前也觉得用js调用摄像头很复杂,有了这个东西,几行代码就搞定了。记录下来,已备自己或他人不时之需。有时间的话,下一篇会出:java+webrtc+websocket的简单直播demo。喜欢我的文章欢迎关注我,我们一起学习,一起成长!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值