WebRTC(四) Web端音视频数据采集及处理

小黄鸡

已于 2023-02-07 19:46:33 修改

阅读量1.9k

点赞数

分类专栏：音视频文章标签：前端 webrtc 音视频

于 2019-10-21 10:14:06 首次发布

本文链接：https://blog.csdn.net/SImple_a/article/details/102512412

版权

音视频专栏收录该内容

20 篇文章 8 订阅

订阅专栏

本文介绍如果通过html代码在浏览器中采集和播放音视频数据。

文章目录

- - 1 html代码，用于显示视频
  - 2 js代码,用于获取视频流

1 html代码，用于显示视频

<html>
	<head>
		<title>WebRTC capture video and audio</title>
	</head>
	<body>
		<video autoplay playsinline id = "player"></video>
		<script src = "./client.js"></script>
	</body>
</html>

2 js代码,用于获取视频流

'use strict'

//后去到video标签
var videoplay = document.querySelector('video#player');

//将流赋值给video标签
function gotMediaStream(stream){
	videoplay.srcObject = stream;
}

//打印错误日志
function handleError(err){
	console.log('getUserMedia error : ', err);
}

if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){
	console.log('getUserMedia is not supported');
}else{
	var constraints = {
		video : true,
		audio : true
	}

	navigator.mediaDevices.getUserMedia(constraints)
	.then(gotMediaStream)
	.catch(handleError)
}

通过以上js和html代码，就能将采集出摄像头的数据和音频数据。
但是以上方法是有浏览器的兼容性的问题。所以需要在js里面加入以下开源库

https://webrtc.github.io/adapter/adapter-latest.js

完整html代码

<html>
	<head>
		<title>WebRTC capture video and audio</title>
	</head>
	<body>
		<video autoplay playsinline id = "player"></video>
		<script src = "https://webrtc.github.io/adapter/adapter-latest.js"></script>
		<script src = "./client.js"></script>
	</body>
</html>