WebRTC学习笔记（1）-迈出第一步

时间：2022-10-25 19:10:48

创建一个WebRTC的通信平台，首先需要通过用户的网络摄像头和麦克风获取实时的视频和音频流，在过去的浏览器中， 我们通常用插件来实现这个功能，现在我们可以使用js调用浏览器的getUserMedia API（MediaStream API）来实现

配置静态服务器

选用Node.js的 node-static

  • 打开bash 输入npm install -g node-static 获取模块
  • 运行static 指令启动一个静态web服务器，在浏览器中输入http://localhost:8080 即可访问你的文件

创建首个媒体流页面

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Get User Media </title>
</head>
<body>
    <video autoplay></video>
    <div>Hello WebRTC </div>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

请注意元素包含一个autoplay属性,表示视频流字节处理完成后会自动播放,如果移除这个属性,数据流接入时不会自动播放.
main.js:

function hasUserMedia(){
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
   if (hasUserMedia()) {
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
        navigator.getUserMedia({
            video: true,
            audio: true
        },function(stream){
            var video = document.querySelector('video');
            video.src = window.URL.createObjectURL(stream);
        },function(err){});
    }else{
        alert("sorry , your browser is not support getUserMedia!");
   }

getUserMedia函数接收一组参数（来确定浏览器要做的事）和一个回调函数，这个回调函数值接收一个参数，当前计算机上能够产生数据流的媒体设备，
这个对象指向一个浏览器为我们保持媒体流， 他会不断从摄像头和麦克风捕获数据，等待来自web应用的指令来操作这些数据，我们稍后会捕获屏幕上的元素并通过window.URL.createObjectURL函数将流加载到该元素中, 由于元素不能接受js作为参数,它只能通过一些字符串来获取视频流,这个函数在获取流对象后会将它转换成一个本地的URL,这样元素就能从这个地址获取流数据了.
标签：

相关文章