使用Chrome采集攝像頭並生成視頻下載

阿新 • • 發佈：2017-12-13

tle opus alert media vid stream 毫秒 rain query

主要使用2個技術點：WebRtc 的 getUserMedia 和 MediaRecorder

註意點

開始錄制調用 start 方法要傳入一個采樣間隔，這樣錄制的媒體會按照你設置的值進行分割成一個個單獨的區塊, 而不是以默認的方式錄制一個非常大的整塊內容.
demo地址：https://young-cowboy.github.io/gallery/MediaRecorder.html

參考資料

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

代碼如下

<!DOCTYPE html>
<html lang="en" 
>
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <video width="400" height="300" controls id="video" autoplay></video>
    <div>
      <button 
 type="button" id="record">record</button>
      <button type="button" id="pause">pause</button>
      <button type="button" id="resume">resume</button>
      <button type="button" id="stop">stop</button>
      <button type="button" id="finish">finish</button> 

      <a href="#" target="_blank" id="download">download</a>
    </div>
    <div>
      <button type="button" id="info">info</button>
      <button type="button" id="isTypeSupported">isTypeSupported</button>
    </div>

    <script type="text/javascript">
      (function () {
        let mediaRecorder = null;
        let mediaStream = null;
        let chunks = [];

        function getMediaStream(params) {
          var constraints = {
            audio: true,
            video: true
          };

          return navigator
            .mediaDevices
            .getUserMedia(constraints);
        }

        function attachMedia() {
          getMediaStream()
            .then(stream => {
              document.querySelector(‘#video‘).srcObject = stream;
              mediaStream = stream;
            })
            .catch(err => alert(`${err.name}: ${err.message}`));
        }

        function record() {
          mediaRecorder = new MediaRecorder(mediaStream, { mimeType:"video/webm" });

          mediaRecorder.addEventListener(‘dataavailable‘, e => {
            console.log(‘dataavailable %o‘, e);
                chunks.push(e.data);
          });
          mediaRecorder.addEventListener(‘error‘, e => console.log(‘error %o‘, e));
          mediaRecorder.addEventListener(‘pause‘, e => console.log(‘pause %o‘, e));
          mediaRecorder.addEventListener(‘resume‘, e => console.log(‘resume %o‘, e));
          mediaRecorder.addEventListener(‘start‘, e => console.log(‘start %o‘, e));
          mediaRecorder.addEventListener(‘stop‘, e => console.log(‘stop %o‘, e));

          // 調用時可以通過給timeslice參數設置一個毫秒值,如果設置這個毫秒值,那麽錄制的媒體會按照你設置的值進行分割成一個個單獨的區塊, 而不是以默認的方式錄制一個非常大的整塊內容.
          mediaRecorder.start(10);
        }

        function stop() {
          mediaRecorder.stop();
        }

        function pause() {
          mediaRecorder.pause();
        }

        function resume() {
          mediaRecorder.resume();
        }

        function stop() {
          mediaRecorder.stop();
        }
        
        function download() {
          var blob = new Blob(chunks, {type: "video/webm"});
          
          chunks = [];

          var downloadLink = document.querySelector(‘a#download‘);
          var videoURL = window.URL.createObjectURL(blob);
          var rand =  Math.floor((Math.random() * 10000000));
          var name  = "video_"+rand+".webm" ;
          
          downloadLink.href = videoURL;
          downloadLink.setAttribute( "download", name);
          downloadLink.setAttribute( "name", name);
        }

        function info() {
          console.log(`mimeType ${mediaRecorder.mimeType}`);
          console.log(`state ${mediaRecorder.state}`);
          console.log(`stream ${mediaRecorder.stream}`);
          console.log(`videoBitsPerSecond %o`, mediaRecorder.videoBitsPerSecond);
          console.log(`audioBitsPerSecond ${mediaRecorder.audioBitsPerSecond}`);
        }

        function isTypeSupported() {
          var types = [
            "video/webm", 
            "audio/webm", 
            "video/webm\;codecs=vp8", 
            "video/webm\;codecs=daala", 
            "video/webm\;codecs=h264", 
            "audio/webm\;codecs=opus", 
            "video/mpeg"
          ];

          for (var i in types) { 
            console.log(`Is ${types[i]} supported? ${MediaRecorder.isTypeSupported(types[i] ? "Maybe!" : "No")}`); 
          }
        }

        document.querySelector(‘#record‘).addEventListener(‘click‘, e => record());
        document.querySelector(‘#pause‘).addEventListener(‘click‘, e => pause());
        document.querySelector(‘#resume‘).addEventListener(‘click‘, e => resume());
        document.querySelector(‘#stop‘).addEventListener(‘click‘, e => stop());
        document.querySelector(‘#finish‘).addEventListener(‘click‘, e => download());
        
        document.querySelector(‘#info‘).addEventListener(‘click‘, e => info());
        document.querySelector(‘#isTypeSupported‘).addEventListener(‘click‘, e => isTypeSupported());
        
        attachMedia();
      })()
    </script>
  </body>
</html>

使用Chrome采集攝像頭並生成視頻下載

tle opus alert media vid stream 毫秒 rain query 主要使用2個技術點：WebRtc 的 getUserMedia 和 MediaRecorder 註意點開始錄制調用 start 方法要傳入一個采樣間隔，這樣錄制的媒體會按照你設置

2017年最權威的1000集大型web前端視頻教程（愛創課堂出品）文後附錄視頻下載鏈接

前端前端學習前端入門 2017年最新愛創課堂前端開發課程介紹愛創課堂Web前端開發工程師培訓-價值1萬8課程資料持續更新中，第一時間領取請加QQ2079576908Web前端開發工程師，主要職責是利用HTML、XHTML、CSS、JAVAScript、FLASH等各種Web前端技術進行客戶端

PHP正則采集圖片並保存

con lap sta php正則 exists conn hid 文件名 time <?php /* *功能：php完美實現下載遠程圖片保存到本地 *參數：文件url,保存文件目錄,保存文件名稱，使用的下載方式 *當保存文件名稱為空時則使用遠程文件原來的名稱

音視頻下載Chrome插件官方主頁

百度音樂軟件 google chrome pos pgp 視頻 zh-cn 無限音視頻下載是個點擊圖標後就能下載網頁裏正在播放的音視頻文件的軟件下載：百度網盤 Chrome網上應用商店使用方法視頻：http://www.tudou.com/progr

Youtube-dl 配置使用方法 + 配合aria2 多線程下載 + 配合 ffmpeg 自動合並分段視頻

https 無損可能管理器 post 安裝軟件令行音頻播放首先介紹軟件，Youtube-dl可以下載網頁的視頻，功能很強大。但遇到分段視頻不能合並，遇到視頻音頻分開播放的網站也沒辦法合並視頻音頻，所以　　需要用ffmpeg來配合的合並視頻。合並過程是無損的，不

Android5.0以上實現對手機屏幕錄制並將視頻實時保存到本地（亦可實時傳輸）

支持 android5 codec virtual span offset external intent buffers 前言：經過很長的學習很研究，在實現了支持安卓4.3以上可實現屏幕錄制並保存或實時發送後，根據手機系統的版本號，在android5.0以上利用原生的

ffmpeg命令從網絡攝像頭錄制視頻

bsp 錄制視頻 copy mpeg vco col clas -i 安裝安裝 sudo apt-get install ffmpeg 錄制視頻為record.mp4文件 ffmpeg -y -i rtsp://cameral_ip:port -vcodec

如何錄制電腦屏幕並且生成視頻

由於電腦操作好的系統影視 ces 若是暫停有時候我們看到某個精彩的網頁視頻，但由於各種原因的限制而無法下載，這時可以借助到錄屏工具將視頻錄制下來分享給朋友們。但是如何錄制電腦屏幕？接下來就由小編給大家介紹操作方式。使用工具：電腦&網絡迅捷屏幕錄像工具

tpshop視頻下載鏈接

php tpshop正在學習：http://www.tp-shop.cn/index.php/doc/indexbbc/video因為下載一個視頻，就要，分享到一個群裏。下面，我把已經下載的存在自己的雲盤裏，大家可以轉存。TPshop Api萬能簽名原理機制第一講http://pan.baidu.com/s/

Twitter視頻下載方式

tab 1.2 lec chrome ref one sed lib efault 本文是傳入Twitter視頻播放鏈接通過http://twdown.net/網站獲得Twitter視頻的MP3，MP4下載鏈接用YouTube-dl下載Twitter視頻 #coding=u

[Windows] 【油猴腳本】慕課網視頻下載鏈接解析工具

nbsp 解析 baidu tar wid 轉載 forum uid 安裝教程 http://www.52pojie.cn/forum.php?mod=viewthread&tid=592829&fromguid=hot 好久沒出來發帖了點進來的都

命令行視頻下載工具you-get和youtube-dl

分享系統環境變量資源平臺 youtube 文件完整 home 下載視頻 you-get和youtube-dl都是基於python的命令行媒體文件下載工具，完全開源免費跨平臺。用戶只需使用簡單命令並提供在線視頻的網頁地址即可讓程序自動進行嗅探、下載、合並、命名和清理，

Python 爬蟲 Vimeo視頻下載鏈接

color ref conn requested action def blog .com argv python vimeo_d.py https://vimeo.com/228013581 在https://vimeo.com/上看到稀罕的視頻按照上面加上視頻的

樂影音下載器（視頻下載器）官方主頁

bcf xtra nbsp targe chrome red installer 服務器 uda 樂影音下載器5.75（2017-9-14）能下載國內視頻網站上面的視頻。你只需要復制視頻網址就能自動幫你下載視頻，這是你唯一需要做的！！！！！ Windows版下載：

自學資源推薦尚學堂-視頻下載

get block 。。好好學習 lock 未來且行且珍惜 download article 禮悟：　　好好學習多思考，尊師重道存感恩。葉見尋根三二一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉強身心，誠勸且行且珍惜。

如何將視頻下載並且轉碼拼接

轉碼拼接簡單來說每個視頻網站，每個視頻網站都會有自己的視頻播放格式。具體事例為優酷KUX，愛奇藝QSV，騰訊QLV。而騰訊視頻目前還沒有具備轉碼功能，所以視頻下載的時候經常會出現一些困擾，那就是不使用騰訊播放器壓根打不開~~OK，現在就來介紹一下如何將QLV各式的騰訊視頻轉化為MP4的正常播放模式。當然，如果

命令行視頻下載工具youtube-dl

音頻 data- target you com data bili nal ext 1、查看目標詳情 youtube-dl -F https://www.bilibili.com/video/av6731067/?p=1 2下載視頻到當前文件夾，可以選擇清晰度 you

實現多個視頻下載

com load data ID with open url imp lang clas from gevent import monkey import gevent import urllib.request #有IO才做時需要這一句 monkey.patch_a

知乎視頻下載

環境窗口 cmd 就會 png F12 str 視頻 ron 最近看知乎上有好多有趣的小視頻，想下載發現在網頁上沒有下載的途徑，沒有辦法只有自己解決了首先就是打開F12 看到了m3u8這個字眼，這個時候就要使用FFmpeg了打開官網，下載win版本的文件，下載的

YouTube視頻下載方法匯總

能力 fir 進入中一 firefox 電腦自動接下來 lan YouTube是一個視頻共享網站，YouTuber們自己拍攝並制作視頻，上傳到YouTube，然後用戶觀看、分享並評論這些內容。雖然在線觀看很方便，但是有些時候你卻只能處於離線的狀態，比如出差、旅遊、坐地

使用Chrome采集攝像頭並生成視頻下載

相關推薦