HTML5 获得音视频播放

最新推荐文章于 2022-10-29 08:52:27 发布

Share_Boy

最新推荐文章于 2022-10-29 08:52:27 发布

阅读量731

点赞数

分类专栏： javascripts js 文章标签： html5 javascripts js 视频音频

本文链接：https://blog.csdn.net/z714303584/article/details/46696893

版权

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

javascripts

4 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif;"><!doctype html></span>

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>GetUserMedia实例</title>
</head>
<body>
 <video id="localVideo" autoplay></video>

</body>
	<script type="text/javascript">
		//获得控制音视频的浏览器兼容写法
		var userMedia = (navigator.getUserMedia||navigator.webkitGetUserMedia
				||navigator.mozGetUserMedia||navigator.msGetUserMedia);
		/*
			 	约束对象可以被设置在getUserMedia()和RTCPeerConnection的addStream方法中，这个约束对象是WebRTC用来指定接受什么样的流的，其中可以定义如下属性：
				* video: 是否接受视频流
				* audio：是否接受音频流
				* MinWidth: 视频流的最小宽度
				* MaxWidth：视频流的最大宽度
				* MinHeight：视频流的最小高度
				* MaxHiehgt：视频流的最大高度
				* MinAspectRatio：视频流的最小宽高比
				* MaxAspectRatio：视频流的最大宽高比
				* MinFramerate：视频流的最小帧速率
				* MaxFramerate：视频流的最大帧速率
		*/
		userMedia.call(navigator, {
	        video: true,
	        audio: true
	    }, function(stream) {
	    	var localVideo = document.getElementById("localVideo");
	    	//window.URL.createObjectURL(stream)来创造能在video中使用src属性播放的Blob URL，注意在video上加入autoplay属性，否则只能捕获到一张图片
	    	localVideo.src = window.URL.createObjectURL(stream);
	    	localVideo.onloadedmetadata = function(e) {
	    		//流创建完毕后可以通过label属性来获得其唯一的标识，
	    		//还可以通过getAudioTracks()和getVideoTracks()方法来获得流的追踪对象数组（如果没有开启某种流，它的追踪对象数组将是一个空数组）
	    		console.log("Label: " + stream.label);
	            console.log("AudioTracks" , stream.getAudioTracks());
	            console.log("VideoTracks" , stream.getVideoTracks());
			};
		}, function(e) {
	        console.log('Reeeejected!', e);
	    });
	
	</script>
</html>

需要部署到服务器访问

Share_Boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 获得音视频播放

GetUserMedia实例 //获得控制音视频的浏览器兼容写法 var userMedia = (navigator.getUserMedia||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia||navigator.msGetUserMedia); /* 约束对象可以被设置在getUs
复制链接

扫一扫

专栏目录