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

来源：互联网发布：免费网络英语培训编辑：程序博客网时间：2024/05/21 09:35

创建一个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,这样元素就能从这个地址获取流数据了.

阅读全文

0 0