WebRTC 入門到放棄（一）WebRTC

前言

　　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文件信息