webrtc简单案例——音视频采集和播放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<video id="local-video" autoplay playsinline></video>
<button id="showVideo">打开摄像头</button>
<p>通过getUserMedia()获取视频</p>
</body><script>const constraints = {audio: false,video: true}// 处理打开摄像头成功function handleSuccess(stream) {const video = document.querySelector("#local-video");video.srcObject = stream;}// 异常处理function handleError(error) {console.error("getUserMedia error: " + error)}function onOpenCamera(e) {navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);}document.querySelector("#showVideo").addEventListener("click", onOpenCamera)</script>
</html>

结果展示：

2. 打开麦克风并在页面播放捕获的声音

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<audio id="local-audio" autoplay controls>播放麦克风捕获的声音</audio>
<button id="playAudio">打开麦克风</button>
<p>通过getUserMedia()获取音频</p>
</body><script>const constraints = {audio: true,video: false}// 处理打开麦克风成功function handleSuccess(stream) {const audio = document.querySelector("#local-audio");audio.srcObject = stream;}// 异常处理function handleError(error) {console.error("getUserMedia error: " + error)}function onOpenMicrophone(e) {navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);}document.querySelector("#playAudio").addEventListener("click", onOpenMicrophone)</script>
</html>

效果展示：

3. 同时打开摄像头和麦克风，并在页面显示画面和播放捕获的声音

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<video id="local-video" autoplay playsinline></video>
<button id="showVideo">打开音视频</button>
<p>通过getUserMedia()获取音视频</p>
</body><script>const constraints = {audio: true,video: {width: 640, height: 480}}// 处理打开摄像头成功function handleSuccess(stream) {const video = document.querySelector("#local-video");video.srcObject = stream;}// 异常处理function handleError(error) {console.error("getUserMedia error: " + error)}function onOpenAV(e) {navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);}document.querySelector("#showVideo").addEventListener("click", onOpenAV)</script>
</html>

效果展示如前两个示例

webrtc简单案例——音视频采集和播放相关推荐

WebRTC音视频采集和播放示例及MediaStream媒体流解析
WebRTC音视频采集和播放示例及MediaStream媒体流解析目录示例代码--同时打开摄像头和麦克风,并在页面显示画面和播放捕获的声音 API解析 mediaDevices MediaStre ...
Android端WebRTC本地音视频采集流程源码分析
WebRTC源码版本为:org.webrtc:google-webrtc:1.0.32006 本文仅分析Java层源码,在分析之前,先说明一下一些重要类的基本概念. MediaSource:WebRT ...
Android 音视频采集与软编码总结
请尊重原创,转载请注明出处:http://blog.csdn.net/mabeijianxi/article/details/75807435(本文已在 "任玉刚" 微信公众号发布 ...
基于webrtc多人音视频的研究（一）
所周知,WebRTC非常适合点对点(即一对一)的音视频会话.然而,当我们的客户要求超越一对一,即一对多.多对一设置多对多的解决方案或者服务,那么问题就来了:"我们应该采用什么样的架构?&qu ...
【转】WebRTC多人音视频解决方案
文章目录 1. 引言 2. 解决方案 2.1 Mesh解决方案 2.2 Mixer解决方案 2.3 Router解决方案 2.4 三个解决方案的流量对比 3. 应该使用哪种架构? 4. 参考资料 1. ...
基于WebRTC实现1v1音视频聊天室
一. 前言 WebRTC(Web Real-Time Communication)旨在将实时通信功能引入到浏览器,用户无需安装其他任何软件或插件即可在浏览器间进行实时通信功能.本文介绍基于 WebRT ...
Android 使用ViewPager2+ExoPlayer+VideoCache 实现仿抖音视频翻页播放
1. 实现效果效果图中,视频没有铺满是因为使用了ExoPlayer的RESIZE_MODE_FIT模式, 虽然使用RESIZE_MODE_FILL模式可以填充整个父布局,但是本Demo中使用的视频 ...
html5仿抖音全屏播放,仿抖音视频全屏播放滑动切换
1 前言随着移动技术的快速迭代,数据流量费用的快速下降,视频.直播正成为全民的媒体盛宴,我司必然也不会缺席此次盛宴,这里讲述的是通过h5实现仿抖音视频全屏播放&滑动切换的效果,供我司直播鉴定 ...
iOS直播（二）GPUImage音视频采集
上文中介绍了用AVFoundation实现音视频采集(https://blog.csdn.net/dolacmeng/article/details/81268622) ,开源的基于GPU的第三方图像 ...

webrtc简单案例——音视频采集和播放

webrtc简单案例——音视频采集和播放

目录

1. 打开摄像头并将画面显示到页面

2. 打开麦克风并在页面播放捕获的声音

3. 同时打开摄像头和麦克风，并在页面显示画面和播放捕获的声音

webrtc简单案例——音视频采集和播放相关推荐

最新文章

热门文章