前言

  WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术。2011年5月开放了工程的源代码,在行业内得到了广泛的支持和应用,成为下一代视频通话的标准。

如何使用

1、RecordRTC地址https://github.com/muaz-khan/RecordRTC

2、Nignx配置文件

    server {
listen 443 ssl http2;
server_name www.tinywan.com;
set $root_path /home/www/build/RecordRTC/RecordRTC-to-PHP;
root $root_path; location / {
if (!-e $request_filename) {
rewrite ^(.*)$ /index.php?s=/$1 last;
break;
}
} location ~ \.php$ {
fastcgi_pass unix:/var/run/php7.1.9-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
fastcgi_buffer_size 128k;
fastcgi_buffers 4 256k;
fastcgi_busy_buffers_size 256k;
fastcgi_connect_timeout 300;
fastcgi_send_timeout 300;
fastcgi_read_timeout 300;
}
}

说明:这里必须是Https方式访问,为什么看这里:https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

(1)http://localhost :被视为一个安全的来源,所以如果你能从localhost运行你的服务器,你应该能够在该服务器上测试这个功能。

(2)https:用公用信任的证书保护服务器。如果服务器可从Internet访问,则多个公共  CA提供免费的,自动更新的服务器证书

3、访问地址:https://www.tinywan.com/index.html

4、开始录屏

上面是我的一个xshell的窗口,可以看到实时的xshell的工作

5、录制完成操作

1、点击保存磁盘按钮

(必须的停止录屏CIA可以哦,不然是以前的录像)

将会下载视频,使用VlC打开刚刚要下载的是视频

2、新窗口打开

3、上传服务器

服务器死啊

public function recordRtcRun()
{
foreach(array('video', 'audio') as $type) {
if (isset($_FILES["${type}-blob"])) {
echo 'uploads/';
$fileName = $_POST["${type}-filename"];
$uploadDirectory = ROOT_PATH . 'public' . DS .'uploads/'.$fileName;
if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"], $uploadDirectory)) {
echo(" problem moving uploaded file");
}
echo($fileName);
}
}
}

注:以上片段解释了如何将记录的音频/视频文件POST到PHP服务器。 它捕获Blob并使用XHR2 / FormData进行POST。

JS 主要代码

var fileType = 'video'; // or "audio"
var fileName = 'ABCDEF.webm'; // or "wav" var formData = new FormData();
formData.append(fileType + '-filename', fileName);
formData.append(fileType + '-blob', blob); xhr('save.php', formData, function (fName) {
window.open(location.href + fName);
});

// 这里的url改为上传文件路径就可以了
function xhr(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
callback(location.href + request.responseText);
}
};
request.open('POST', url);
request.send(data);
}

服务器上传视频文件

4、日志Console文件信息

WebRTC 入门到放弃(一)WebRTC的更多相关文章

  1. WebRTC入门学习之初识WebRTC (转)

    一.WebRTC基本架构 图一  WebRTC总体架构,摘自百度百科 先说说WebRTC大致的实现思路:我们创建的web app,然后在app中调用W3C提供的JS API,JS API 会调用浏览器 ...

  2. WebRTC开发基础(WebRTC入门系列1:getUserMedia)

    什么是WebRTC WebRTC由IETF(Internet Engineering Task Force——互联网工程任务组)和W3C(World Wide Web Consortium——万维网联 ...

  3. WebRTC 入门教程(二)| WebRTC信令控制与STUN/TURN服务器搭建

    WebRTC 入门教程(二)| WebRTC信令控制与STUN/TURN服务器搭建 四月 4, 2019 作者:李超,音视频技术专家.本文首发于 RTC 开发者社区,欢迎在社区留言与作者交流. htt ...

  4. Android IOS WebRTC 音视频开发总结(十)-- webrtc入门002

    继续上一篇中未翻译完成的部分,主要包括下面三个部分: 1,扩展:WebRTC多方通话. 2,MCU Multipoint Control Unit. 2, 扩展:VOIP,电话,消息通讯. 注意:翻译 ...

  5. Android IOS WebRTC 音视频开发总结(九)-- webrtc入门001

    下面这篇介绍webrtc的文章不错,我花了大半天翻译了一下. 翻译的时候不是逐字逐句的,而是按照自己的理解翻译的,同时为了便于理解,也加入一些自己组织的语言. 本文主要介绍webrtc的信令,stun ...

  6. WebRTC开发基础(WebRTC入门系列2:RTCPeerConnection)

    RTCPeerConnection的作用是在浏览器之间建立数据的“点对点”(peer to peer)通信. 使用WebRTC的编解码器和协议做了大量的工作,方便了开发者,使实时通信成为可能,甚至在不 ...

  7. CYQ.Data 从入门到放弃ORM系列:开篇:自动化框架编程思维

    前言: 随着CYQ.Data 开始回归免费使用之后,发现用户的情绪越来越激动,为了保持这持续的激动性,让我有了开源的念头. 同时,由于框架经过这5-6年来的不断演进,以前发的早期教程已经太落后了,包括 ...

  8. [精品书单] C#/.NET 学习之路——从入门到放弃

    C#/.NET 学习之路--从入门到放弃 此系列只包含 C#/CLR 学习,不包含应用框架(ASP.NET , WPF , WCF 等)及架构设计学习书籍和资料. C# 入门 <C# 本质论&g ...

  9. OpenStack从入门到放弃

    OpenStack从入门到放弃 目录: 为何选择云计算/云计算之前遇到的问题 什么是云计算 云服务模式 云应用形式 传统应用与云感知应用 openstack及其相关组件介绍 flat/vlan/gre ...

随机推荐

  1. Nginx均衡TCP协议服务器案例

    Nginx在企业运维中通常用来均衡HTTP协议,例如我们熟知的80.8080.8081等服务.因为大部分的服务都是http请求访问协议,那有时候需要用到TCP协议,如果来实现均衡呢? 默认nginx不 ...

  2. 通过Javascript调用微软认知服务情感检测接口的两种实现方式

    这是今天在黑客松现场写的代码.我们的项目需要调用认知服务的情感识别接口.官方提供了一种方式,就是从一个远程图片进行识别.我另外写了一个从本地文件读取并上传进行识别的例子. 官方文档,请参考 https ...

  3. Sql Server 新的日期类型

    新的日期类型:是出现在2008中的在2005中没有的日期类型. 1,Date 数据类型  2,time 数据类型  3, datetime2 数据类型  4, datetimeoffset 数据类型 ...

  4. Nginx软件部署配置过程

    ---恢复内容开始--- 注意:博主使用的系统为: [root@web01 ~]# uname -a Linux web01 2.6.32-696.el6.x86_64 #1 SMP Tue Mar ...

  5. hdu4416 Good Article Good sentence (后缀数组)

    题意:问a串中有多少种字符串集合B中没有的连续子串. a的长度10^5,B中的总长度为不超过10^5. 解法:后缀数组题目:后缀数组能够非常easy算出来一个串中有多少种子串. 把a和B集合连起来.求 ...

  6. 豌豆夹Redis解决方式Codis源代码剖析:Proxy代理

    豌豆夹Redis解决方式Codis源代码剖析:Proxy代理 1.预备知识 1.1 Codis Codis就不详细说了,摘抄一下GitHub上的一些项目描写叙述: Codis is a proxy b ...

  7. 【Jquery系列】prop和attr区别

    问题描述 由于prop(property的缩写)和attr(attribute的缩写)翻译成汉语,均有“特性.属性”等意思的原因,导致大家容易混淆分不清,本篇文章将试图从英文含义,中文含义和Jquer ...

  8. DB主从一致性架构优化4种方法

    需求缘起 大部分互联网的业务都是"读多写少"的场景,数据库层面,读性能往往成为瓶颈.如下图:业界通常采用"一主多从,读写分离,冗余多个读库"的数据库架构来提升数 ...

  9. 前端(各种demo)三:优惠券,热区,等模块的实现(css方式)

    各种样式的css实现 1.优惠券样式的实现: 2.热区的实现:   在电商平台上总会发出各种券,需要对应到不同的产品,对应到不同的服务.而使用券可以使用UED的设计稿里的照片,但是本来一次性的加载过多 ...

  10. 使用javascript正则表达式实现遍历html字符串

    最近在尝试实现一个js模板引擎,其中涉及到使用js解析html字符串的功能.由于我实现的这个模板不止是要能替换参数输出html字符串,还要可以解析出每个dom元素的名称及参数啥的. 网上找到了一个叫做 ...