开发webrtc第一步-CFANZ编程社区

开发webrtc第一步

WebRTC是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点的连接，实现视频流和音频流或者其他任意数据的传输。WebRTC是浏览器支持，不需要引入任何其他的相关js组件，就可以直接使用。今天这节讲解在浏览器中做webrtc的第一步，通过；浏览器的API调用摄像头和麦克风将内容显示在div中。将下面的代码复制到html文件中，双击打开，浏览器可能会提示是否允许开启摄像头和麦克风，点击允许，就OK了。下面直接上代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset ="utf-8" />
		<title>WebRTC</title>
		<style>
			video,canvas{
				border:1px solid gray;
				width:480px;
				height:320px
			}
		</style>
	</head>
	<body>
		<video autoplay></video>
		<script>
			//判断当前浏览器是否支持webrtc
			function hasUserMedia() {
				return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
			}
			if (hasUserMedia()) {
				//如果支持webrtc的话就获取到视频语音，并把流数据放到标签video中
				navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
				navigator.getUserMedia({
					video: true,//是否开启视频
					audio: true //是否开启语音
				}, function (stream) {
					//将流数据添加到video标签中
					var video = document.querySelector('video');
					video.srcObject = stream;
				}, function (err) {

				});	
			}else{
				alert("抱歉，你的浏览器不支持webrtc")
			}
		</script>
	</body>

</html>

效果图相关注释代码里有，可以参考，如有问题可以在评论区留言。

0 条评论