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

目录
相关文章
|
5月前
|
开发工具 Windows
Windows平台RTMP推送|轻量级RTSP服务实现本地摄像头|屏幕|叠加数据预览
大家在做Windows平台RTMP推送或轻量级RTSP服务的时候,不管是采集屏幕还是采集摄像头,亦或屏幕摄像头的叠加模式,总会有这样的诉求,采集到的数据,希望能本地看看具体采集的数据或者图像实际效果,也就是本次介绍的“预览”功能。
160 0
|
5月前
|
编解码 开发工具 Android开发
Android平台RTSP轻量级服务|RTMP推送摄像头或屏幕之音频接口设计
好多开发者在做Android平台录像或者RTSP轻量级服务、RTMP推送相关模块时,对需要设计哪些常用接口会心存疑惑,本文主要以大牛直播SDK(官方)为例,简单介绍下Android平台直播推送SDK所有音频相关的接口,感兴趣的开发者可以看看。
|
5月前
|
编解码 Android开发 数据安全/隐私保护
Android平台外部编码数据(H264/H265/AAC/PCMA/PCMU)实时预览播放技术实现
好多开发者可能疑惑,外部数据实时预览播放,到底有什么用? 是的,一般场景是用不到的,我们在开发这块前几年已经开发了非常稳定的RTMP、RTSP直播播放模块,不过也遇到这样的场景,部分设备输出编码后(视频:H.264/H.265,音频:AAC/PCMA/PCMU)的数据,比如无人机或部分智能硬件设备,回调出来的H.264/H.265数据,除了想转推到RTMP、轻量级RTSP服务或GB28181外,还需要本地预览甚至对数据做二次处理(视频分析、实时水印字符叠加等,然后二次编码),基于这样的场景诉求,我们开发了Android平台外部编码数据实时预览播放模块。
|
4月前
|
编解码 Cloud Native 前端开发
H.265 视频在浏览器中的播放问题探究
H.265 视频在浏览器中的播放问题探究
60 0
|
4月前
|
Web App开发 编解码 前端开发
2023年WEB内嵌VLC直接播放RTSP视频流,无需服务器转码,支持硬件解码及高版本Chrome
2015年之前还可以用VLC原生播放器在Chrome、Firefox等浏览器中直接播放,延迟比较低,效果也还不错。可惜好景不长,从 2015年Chrome、Firefox等浏览器取消了对 NPAPI插件的支持,海康威视官方提供的 web3.0开发包也只能在低版本浏览器播放。
214 0
|
5月前
|
Web App开发 移动开发 编解码
浏览器播放RTSP视频流几种解决方案
Streamedian 提供了一种“html5_rtsp_player + websock_rtsp_proxy”的技术方案,可以通过html5的video标签直接播放RTSP的视频流。
200 0
|
5月前
|
数据采集 编解码 开发工具
Android平台屏幕/摄像头或外部数据采集及RTMP推送接口设计描述
好多开发者提到,为什么大牛直播SDK的Android平台RTMP推送接口怎么这么多?不像一些开源或者商业RTMP推送一样,就几个接口,简单明了。
|
10月前
|
Web App开发 编解码 移动开发
探秘移动端网页调用摄像头的两种方式
PC 端网页调用摄像头的场景想必大家并不陌生,打开一个网址,开启摄像头开始笔试/视频聊天/直播等。 而在移动端网页调用摄像头的场景你见得多吗?我想答案应该是不多吧(在下见识浅薄)。
|
11月前
|
编解码 应用服务中间件 nginx
几种将设备视频流转码成浏览器能够播放的协议的方法
将rtsp转换成浏览器能访问的hls协议和http-flv协议的方法
411 0
|
Web App开发 监控 前端开发
如果监控摄像头不支持Web Socket,猿大师播放器还能在网页中播放RTSP流吗?
猿大师播放器在前端用web socket是浏览器和中间件及播放程序之间的通讯协议,和实际播放无关,只要浏览器支持web socket就可以播放,现在大部分浏览器都支持web socket,所以就算监控设备不支持Websocket,用猿大师播放器播放RTSP也是是没问题的。
167 0
如果监控摄像头不支持Web Socket,猿大师播放器还能在网页中播放RTSP流吗?