webRTC 使用 getUserMedia()关闭和开启摄像头

最新推荐文章于 2024-02-07 15:02:18 发布
最新推荐文章于 2024-02-07 15:02:18 发布
阅读量1w 收藏 1
点赞数 1
分类专栏： 前端 webRTC
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41912398/article/details/108383583
版权

在这里插入图片描述

<html>
<body>
<video id="webcam"></video>
<button onClick="openVideo()">开启摄像头</button>
<button onClick="closeVideo()">关闭摄像头</button>
</body>

<script>

var video = document.getElementById('webcam');

function onSuccess(stream) {
    if (window.URL) {
	    video.srcObject  = window.srcObject = stream
	} else {
		video.srcObject = stream;
	}

	video.autoplay = true; 
	// 或者 video.play();
}

function onError(stream) {
    console.log('no')
}

if (navigator.getUserMedia) {
	navigator.getUserMedia({video:true}, onSuccess,onError);
} else {
	document.getElementById('webcam').src = '事先准备好的错误视频.mp4';
}

function closeVideo(){
	video.srcObject.getTracks()[0].stop();
    video.srcObject.getTracks()[0].stop();
}

function openVideo(){
	navigator.getUserMedia({video:true}, onSuccess,onError);
}

</script>

</html>
Incimo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webrtc-streamer实现网络摄像头实时监控
04-19
1、win7到win11都试过了，都可以。win11使用webrtc-streamer-v0.7.2（支持性比较好）。 2、打开30个延时在1s左右。 3、不要双击启动exe文件。有窗口和无窗口的bat文件已经写好了，文件在webrtc下。 4、运行之后，改一下html的rtsp流。 5、支持所有浏览器，不需要插件。
web调用摄像头问题
qq_40905132的博客
10-31 3397
2. 手动修改本机浏览器配置【chrome://flags/ 】，多个地址用【,】隔开，修改后底部会提示重启浏览器。项目用到要web调用摄像头的情况。可以调用 navigator.getUserMedia 的方法。重新打开页面，允许调用摄像头，就可以了。1. 使用https协议。
Vue+uniapp直播功能（后续总结和反馈）
蒋小姐的博客
06-17 2079
推拉流：APP使用uniapp 的live-pusher推流，video拉流。（总体来说，不建议使用uniapp,最好用安卓开发，否则坑很多）平台集成了srs流媒体服务器上的webrtc方法推流拉流。关于live-pusher组件：问题：推流只有视频流，没有声音（华为手机正常，安卓手机没有声音）可能原因：live-pusher组件对音视频流解码的问题优化方法：进入页面先进行推流，等1.5s之后在打开摄像头。（先将音频通道打开，再推视频流） 关于webrtc:（第一次尝试，只会用，不会写）必须在本地或者h
Android 11 webview webrtc无法使用问题
最新发布
logocool的专栏
02-07 1162
Android 11 webview webrtc无法使用问题
React Native Webview 中input type=file accept=“image/*“ 无法调起相机问题排查及解决
lizhen_software的博客
11-25 3518
React Native Webview 中input type=file accept="image/*" 无法调起相机问题排查及解决
getUserMedia 如何关闭摄像头
Beth__hui的博客
12-28 6259
关于这个问题我搜了一些答案，经过自身验证，以下为正确关闭方法 一、先说如何调用 window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext; const media = (navigator.mediaDevices.getUserMedia || navigat...
WebRTC 学习笔记
m0_65792543的博客
04-01 547
通过语音和视频实现人与人之间的交流被称为实时通信或简称RTC。Google在2008年做了Gmail视频聊天，2011年引入了环聊，Google随后又开源GIPS的编解码器和回声消除技术，2011年5月爱立信第一次实现了webRTC。获取流音频，视频或其他数据。获取网络信息，譬如IP地址和端口，并与其他WebRTC客户端（称为对等端）进行交换以启用连接，即使通过NAT和防火墙。协调信令通信以报告错误并启动或关闭会话。交换有关媒体和客户端功能的信息，例如分辨率和编解码器。
【WebRtc】Web网页音视频通话之Webrtc相关操作（一）
Java_Wxlin的博客
09-29 1994
WecRtc 基础操作
MediaDevices.getUserMedia()
华的专栏
07-30 1792
MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。 它返回一个 Promise 对象，成功后会r...
H5通过navigator.getUserMedia 关闭摄像头
qq_51196135的博客
11-14 1300
1、getUserMedia方法的成功返回值是一个stream，通过stream的getTracks方法我们可以得到一个当前流来源的数组，然后我们就可以取到一个媒体对象。通过这个对象下的sotp方法可以停止数据流的推送。一般来说如果是只是用一个摄像头去显示，该数组是只会有一个成员的，所以只需要关第一个就好。2⃣️： 打印this.videoStream.getTracks()2⃣️：关闭音视频权限。
使用webview 封使用了webrtc 打开摄像头 的页面demo
12-22
http://blog.csdn.net/ren65432/article/details/53815832
webRTC视频通信(通过浏览器调用摄像头)
12-01
webRTC技术的应用，通过启动浏览器调用设备的视频和音频流实现实时通信。
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
01-19
打开getUserMedia文档，链接如下： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 看上去很简单，最终却写的怀疑人生。 API环境 问题一：（为什么不管怎么配置都显示前置摄像头） 想...
webrtc、kurento 屏幕共享及切换屏幕和摄像头
12-20
仅支持谷歌和火狐，谷歌浏览器请下载插件Screen Capturing3.7，地址去谷歌商店搜索 前台的js写的。后台为java，请自行部署kurento server服务器。并且自己修改One2ManyCallApp类 的连接地址
Android：BottomNavigationView设置noActionbar主题后闪退的解决方法，以及另外两种实现方法
热门推荐
cimo的博客
04-28 2万+
Android Studio自带的BottomNavigationView项目设置了noActionbar这个主题就会闪退，不设置noActionbar的话就无法使用toolbar，蛋疼。 下面我会两种BottomNavigationView的实现方法： 一种是Android Studio自带的项目实现，使用Jetpack的Navigation做为页面的切换工具，以及说明为什么自带的基础模板不能设...
Android：在service和activity之中，实现音乐播放进度条传递信息的两种方式，MediaPlayer做音乐播放器采坑以及解决办法
cimo的博客
04-26 2万+
实现播放时的进度条显示，或是定时从service获取某些信息，是我们日常开发中经常遇到的需求，下面介绍当音乐再service中运行时，activity如果获取音乐进度信息的两种方式： 一、在activity中建立消息接收机制 我们需要在activity中建立一个用于接收信息的handler（handler简单的说是在android中可以发送消息和也可以处理消息的一种机制，当然它的用途更加强大，有时...
Android Material Design 组件集合Demo，附源码地址 ：CimoGallery，仅供学习
cimo的博客
08-29 1万+
Android Material Design 实战 ：CimoGallery 作者：incimo 时间：2020/06/14 CimoGallery v1.0.1 beta 版本 初   为了加深对Android开发的理解。同时在B站上看到了longway777 这位大佬的视频，感觉确实是不可多得的好教材，给了我很多灵感和帮助，因为大佬用的是kotlin写了一个简易版的画廊Demo，于是我就想能不能用Java也实现一个Demo，顺便把开发时常用的一些功能加上，顺便给正在学习的同学们一点帮助，给Andr
天地图web端 通过H5 获取详细定位信息 （模板源码）
cimo的博客
05-15 1万+
最近在做的项目需要用的天地图，置于为哈不用高德或者其他的…只能说，免费有免费的好处，收费有收费的好处吧 下面是源码，在对应位置加上你的key即可 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="天地图" /> <tit
手把手教你在自己的Android app中引入支付宝沙盒支付功能（可用于课设和测试）
cimo的博客
06-27 1万+
1 进入支付宝开发者中心，设置自己的沙箱环境 1.1 进入支付宝开发者中心 1.2 进入沙箱开发界面 1.3 下载沙箱app 1.4 使用买家账号登录你的支付宝沙箱 2 设置应用私钥与公钥 2.1 下载支付宝开发平台开发助手 https://opendocs.alipay.com/open/291/introduce 2.2 自动生成私钥与公钥 2.3 回到沙箱界面配置你的应用公钥 2.4 下载支付宝支付Demo https://opendocs.alipay.com/open/54/1045
webrtc源码打开摄像头
04-05
作为AI，我无法获取摄像头，但您可以参考以下代码： ```javascript navigator.mediaDevices.getUserMedia({ video: true }) .then(function(stream) { var video = document.querySelector('video'); video.srcObject = stream; video.onloadedmetadata = function(e) { video.play(); }; }) .catch(function(err) { console.log(err.name + ": " + err.message); }); ``` 这个代码片段使用WebRTC的`getUserMedia()`方法从用户的摄像头中获取视频流，并将其分配给HTML5视频元素。然后，当视频元素加载完毕时，播放视频。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值