国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

無需Flash錄視頻——HTML5中級進階

Cruise_Chan / 3176人閱讀

摘要：比如就會報出警告，并執行出錯。視頻的寬高，并不會因為填寫的數值比例不合法而失真。通過綁定事件，來獲取視頻片段數據，并在內存中累積。執行之后會停止觸發事件。錄制結束后，把累計的片段數據保存為對象，并從瀏覽器下載存為視頻文件。

前言

HTML5的權限越來越大了，瀏覽器可以直接調用攝像頭、麥克風了，好激動啊。我們要用純潔的HTML代碼造出自己的天地。

視頻采集

本篇介紹的栗子 都是在chrome 47 版本以上的，低版本的可能會出現白屏和錯誤。

1.安全環境

隨著Chrome版本的升高，安全性問題也越來越被重視，較新版本的Chrome瀏覽器在調用一些API時需要頁面處在安全環境中。本篇文章所介紹的API函數，都需要在安全環境中執行。如果處在非安全環境下 ( http頁面 ) 這些API就會有意想不到的問題。

比如 getUserMedia()就會報出警告，并執行出錯。而在設備枚舉enumerateDevices()時，雖然不會報錯，但是他隱藏了設備label。

getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

根據谷歌的意思，常用的安全環境有如下

http://localhost

http://127.0.0.1

https 開頭的地址頁面

如果你做了一個視頻測試的頁面，想嘚瑟給局域網的其他人，但是又沒有域名證書怎么辦？
這時候只能通過修改其他人的hosts文件了
比如你的測試服務器IP地址是192.168.2.18，那么其他人的hosts文件修改如下：

#localhost 127.0.0.1
localhost 192.168.2.18

當使用別人的Chrome瀏覽器訪問 http://localhost/[getUserMedi...時，就會順利的執行這些API了。

但是移動端的瀏覽器并不認localhost，就算你修改了hosts ，移動端的瀏覽器根本不理你，解析都不解析。
所以想在手機上測試，只能老老實實申請個證書了。

2.設備枚舉

在開啟攝像頭之前，先要把可以使用的麥克風和攝像頭 ( 輸入設備 ) 列出來，如果沒有這兩樣設備也就無法繼續。

代碼如下:

效果如下圖，和瀏覽器自己獲取的一模一樣。

注意：上圖的實例中，瀏覽器地址欄最右邊的攝像頭標識是需要使用 getUserMedia()函數時才會出現。

這時候可以通過瀏覽器給出的菜單下拉選擇設備。

3.設置參數，預覽

我們可以通過代碼來指定使用哪個攝像頭和麥克風設備。
也可以通過代碼設置視頻的寬、高和幀率。

代碼如下：

輸出的視頻流通過blob對象鏈接綁定到video標簽輸出。

這個deviceId就是從上文設備枚舉 enumerateDevices() 獲取到的。
兩種設備，如果有一個deviceId填寫不正確，就會報出一個DevicesNotFoundError的錯誤。而且一旦指定了設備后，瀏覽器自己的設備選擇就會變成灰色不可選。

視頻的寬高，并不會因為填寫的數值比例不合法而失真。
比如你設定了寬度30，高度100，那么他會從視頻中心截取 30x100 的畫面，而不是把原畫面擠壓到這個30x100的尺寸。

效果如下：

如果您的預覽一片漆黑，或者只有一個小黑點，那么說明您的攝像頭正在被占用...

吐槽：這個getUserMedia()函數的參數，w3的官方文檔鏈接如下：
https://www.w3.org/TR/mediaca...
可是Chrome并沒有遵循它，而且差距還挺大...

視頻保存 1. 格式支持

Chrome瀏覽器是大力推廣webm的視頻格式的。可以用MediaRecorder.isTypeSupported("video/webm")來測試是否支持這種類型的編碼。如果返回true，那么我們錄制的視頻就可以被保存為這種指定的格式。如果不指定，那么將會使用瀏覽器自動指定的文件格式。文檔原話如下

If this paramater is not specified, the UA will use a platform-specific default format.

但是這個默認值卻無法直接獲取，全靠猜...

2. 視頻錄制 MediaRecorder

我們使用 MediaRecorder來錄制視頻，參數是通過getUserMedia()獲取的媒體流。

通過綁定ondataavailable事件，來獲取視頻片段數據，并在內存中累積。

錄制的開始和結束分別使用 start和stop 函數。

執行start之后會周期性觸發ondataavailable事件。

執行stop之后會停止觸發ondataavailable事件。

錄制結束后，把累計的片段數據保存為blob對象，并從瀏覽器下載存為視頻文件。

代碼如下：

注意：本例并沒有填寫視頻文件頭，所以保存出來的視頻文件沒有時間軌，無法快進和跳躍。可以用格式工廠轉

“莫基了”上面有一個錄制音頻的例子 傳送門

這篇文章的DEMO請戳 這里

相關閱讀

多屏互動——H5中級進階
前端，想說愛你不容易！
無需Flash實現圖片裁剪——HTML5中級進階

作者信息
作者來自力譜宿云 LeapCloud 團隊_UX成員：王詩詩 【原創】
力譜宿云 LeapCloud 團隊首發：https://blog.maxleap.cn/archi...

歡迎關注微信訂閱號：MaxLeap_yidongyanfa

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/11762.html

相關文章

  • 無需Flash實現圖片裁剪——HTML5中級進階

    摘要：需求就是那么簡單，在瀏覽器里裁剪圖片并上傳到服務器。原圖片對象上傳裁剪后的對象初始化圖片預覽根據裁剪參數繪制轉對象以下將對每個環節詳解。或者根據獲取裁剪信息包括旋轉和縮放用進行手動繪制。 前言 圖片裁剪上傳，不僅是一個很貼合用戶體驗的功能，還能夠統一特定圖片尺寸，優化網站排版，一箭雙雕。 需求就是那么簡單，在瀏覽器里裁剪圖片并上傳到服務器。 我第一個想到的方法就是，將圖片和裁剪參數（x...

    JerryC 評論0 收藏0

  • JS進階篇--ckplayer.js視頻播放插件

    摘要：，是否自動播放，可以為或，默認為，參數不為時播放器加載完成后均為暫停狀態。，視頻開始前廣告播放的秒數，只針對或圖片有效，默認為。，視頻結束后的動作，停止播放并發送，是不發送且重新循環播放，停止播放，默認為。 網頁中常見的功能就是播放視頻，下面介紹的這個ckplayer.js既可以在pc端播放，也可以在手機網頁上播放。 可調用flash也可以調用html5播放器： var ...

    tangr206 評論0 收藏0

  • 那是我在夕陽下的奔跑：邊跑邊學習html5之audio與video

    摘要：尤其是喬布斯在年發布的一篇的文章。喬布斯在里面寫下了關于的一點看法，說明自己為什么不使用，談到關于的一些問題，比如開放性，安全性，對于設備續航的影響，不利于觸摸屏，等等。終于，于年月日，爸爸也放棄治療了，宣布將于年正式退休。 今天為大家分享一下html5中的視頻（video）與音頻（audio）。在進入主題之前我們先了解一下Flash與html5這兩種技術的時代背景與發展歷史。 1.前...

    gself 評論0 收藏0

發表評論

0條評論

Cruise_Chan

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<