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

简介:         WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术。

        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。喜欢我的文章欢迎关注我,我们一起学习,一起成长!

目录
相关文章
|
7月前
|
Web App开发 小程序 前端开发
【产品上新】小程序新内核来了!提升安卓浏览器性能,支持WebRTC
【产品上新】小程序新内核来了!提升安卓浏览器性能,支持WebRTC
130 10
|
Java 应用服务中间件 API
https+ip实现摄像头访问浏览器
https+ip实现摄像头访问浏览器
336 0
|
18天前
|
Web App开发 机器学习/深度学习 人工智能
Magic Copy:开源的 AI 抠图工具,在浏览器中自动识别图像进行抠图
Magic Copy 是一款开源的 AI 抠图工具,支持 Chrome 浏览器扩展。它基于 Meta 的 Segment Anything Model 技术,能够自动识别图像中的前景对象并提取出来,简化用户从图片中提取特定元素的过程,提高工作效率。
60 7
Magic Copy:开源的 AI 抠图工具,在浏览器中自动识别图像进行抠图
|
5月前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
7月前
|
计算机视觉
关于人脸识别最近浏览器打不开摄像头的解决方案
关于人脸识别最近浏览器打不开摄像头的解决方案
|
Web App开发 Android开发 iOS开发
哪些浏览器提供WebRTC支持?
哪些浏览器提供WebRTC支持?
|
Web App开发 存储 缓存
前端性能精进之浏览器(三)——图像
前端性能精进之浏览器(三)——图像
|
传感器 Web App开发
制作简易图像浏览器,互联网营销
  先发点牢骚放松下心情, 最近完全没有做项目的动力,每天感觉脑子昏昏沉沉的没有一点状态。   一来可能快春节了,自己离家比较远也在担心何时回家何时购票,   二来公司程序员就我一个人在单干,软件 项目什么的做好了,却不能接受一次又一次的添加功能和修改数据库,(我真的很想骂某个人的娘)   三来也老早计划好了11年4月份一年合同到期后就离职,现在好像一点都静不下心来   如果有各位同僚给我开解开解我也好恢复下心境。
1007 0