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

最新推荐文章于 2024-08-13 11:45:59 发布

fXy_during

最新推荐文章于 2024-08-13 11:45:59 发布

阅读量384

点赞数

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

本文链接：https://blog.csdn.net/fXy_during/article/details/76376656

版权

webrtc 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

fXy_during

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebRTC学习笔记（1）-迈出第一步

创建一个WebRTC的通信平台，首先需要通过用户的网络摄像头和麦克风获取实时的视频和音频流，在过去的浏览器中，我们通常用插件来实现这个功能，现在我们可以使用js调用浏览器的getUserMedia API（MediaStream API）来实现配置静态服务器选用Node.js的 node-static打开bash 输入npm install -g node-static 获取模块运行stati
复制链接

扫一扫

专栏目录