webRTC学习笔记（2）

最新推荐文章于 2022-05-21 11:38:33 发布

渣渣前端

最新推荐文章于 2022-05-21 11:38:33 发布

阅读量376

点赞数

分类专栏： webrtc 文章标签： html5

本文链接：https://blog.csdn.net/dtbk123/article/details/107053987

版权

webrtc 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

MediaRecorder构造函数会创建一个对指定的 MediaStream进行录制的 MediaRecorder 对象,

接收两个参数，一个是流，一个是可选对象，对象的mineType为新构建的 MediaRecorder 指定录制容器的MIME类型. 在应用中通过调用 MediaRecorder.isTypeSupported来检查浏览器是否支持此种mimeType .，audioBitsPerSecond: 指定音频的比特率.,videoBitsPerSecond: 指定视频的比特率.,bitsPerSecond: 指定音频和视频的比特率. 此属性可以用来指定上面两个属性. 如果上面两个属性只有其中之一和此属性被指定, 则此属性可以用于设定另外一个属性.

下面这个例子实现了录制播放视频的功能

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>使用WebRTC录制视频</title>
</head>
<body>
<video id="source" autoplay muted></video>		<!-- 显示摄像头的源视频 -->
<video id="recorded" loop controls></video>	<!-- 显示已录制的视频 -->
<div>
	<button id="record" disabled>开始录制</button>	<!-- 播放按钮 -->
</div>
    <script>
 var mediaRecorder, recordedBlobs// 声明变量
var sourceVideo = document.getElementById('source');	// 源视频
var recordedVideo = document.getElementById('recorded');	// 已录制视频
var recordButton = document.getElementById('record');	// 录制按钮
recordButton.onclick = toggleRecording;	// 设置录制按钮点击动作

// 设置媒体约束，接收声音和视频，视频宽度为320像素
var constraints = { audio: true, video: { width: 320 } };

// 成功获取用户媒体
function handleSuccess(stream) {
	recordButton.disabled = false;	// 设置录制按钮可用
	window.stream = stream;
	sourceVideo.srcObject = stream;	// 将摄像头画面显示在sourceVideo上
}

// 获取用户媒体异常
function handleError(error) {
	console.log('获取用户媒体错误: ', error);
}

// 获取用户媒体
navigator.mediaDevices.getUserMedia(constraints).
		then(handleSuccess).catch(handleError);


// 处理数据可用
function handleDataAvailable(event) {
	if (event.data && event.data.size > 0) {
		recordedBlobs.push(event.data);	// 将数据追加到录制记录中
	}
}

// 切换录制
function toggleRecording() {
	if (recordButton.textContent === '开始录制') {
		startRecording();	// 开始录制
	} else {
		stopRecording();	// 停止录制
		recordButton.textContent = '开始录制';
	}
}

// 开始录制
function startRecording() {
	recordedBlobs = [];	// 数据记录初始化
	var mimeTypes = ['video/webm;codecs=vp9', 'video/webm;codecs=vp8',
		'video/webm'];
	// 查找支持的视频格式
	var mimeType = mimeTypes.find(type=>MediaRecorder.isTypeSupported(type)) || '';
	try {
		// 创建媒体录制器
		mediaRecorder = new MediaRecorder(window.stream, { mimeType });
	} catch (e) {
		alert('创建媒体录制器异常');
		return;
	}
	recordButton.textContent = '停止录制';
	mediaRecorder.ondataavailable = handleDataAvailable;
	mediaRecorder.start(10);
}

// 停止录制
function stopRecording() {
	mediaRecorder.stop();
	var buf = new Blob(recordedBlobs, { type: 'video/webm' });
	// 设置已录制视频的源为录制好的视频
	recordedVideo.src = window.URL.createObjectURL(buf);
}

    </script>


</body>
</html>

渣渣前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webRTC学习笔记（2）

MediaRecorder构造函数会创建一个对指定的 MediaStream进行录制的 MediaRecorder对象,接收两个参数，一个是流，一个是可选对象，对象的mineType为新构建的MediaRecorder指定录制容器的MIME类型. 在应用中通过调用MediaRecorder.isTypeSupported来检查浏览器是否支持此种mimeType.，audioBitsPerSecond: 指定音频的比特率.,videoBitsPerSecond: 指定视频的比特率.,bitsPe...
复制链接

扫一扫