整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          2019年底,web前端面試的你準備好了嗎?

          2019年底,web前端面試的你準備好了嗎?

          家看我之前總結了很多關于web前端的面試題,我是真心想幫助web前端的開發工程師可以找到工作,馬上就2019年的年底了,肯定還有找工作的小伙伴,那么是否可以順利在年底之前找到工作呢?我來幫助你,我來告訴你面試前的準備,面試的技巧,面試題都有哪些,另外如果你身邊的人找工作,你也可以把文章分享給他,咱們一起幫助更多的人。

          說起找工作就是很心酸的事情,面試過程大家都經歷過。東跑西跑,來回找公司面試,不是沒結果就是面試成功,剩下的干脆面試完連面試結果都不知道,這是為什么呢?我給大家一一來分析和總結一下,希望大家在2019年的年底都可以找到工作。

          一、面試環節整理

          準備簡歷==》接到面試電話邀請===》確定面試地點和時間===》進入面試公司===》填寫表單申請===》HR接待假模假式的噓寒問暖一番===》HR拿過來面試題===》答題完畢告訴HR===》面試官開始面試(自我介紹和項目介紹以及面試官要問的問題)===》over【一切完畢】。

          知道了面試環節以后,那么我們可以把面試分為:面試前、面試中、面試后

          二、面試前

          1.簡歷準備

          簡歷準備我想問一下,大家覺得什么樣的簡歷好?你需要突出什么重點?

          我相信大家肯定有大概率的答案,簡歷寫的越多越詳細越好,包括項目經驗,就算沒有項目經驗,包裝也要包裝。

          突出什么重點?面試官關系我們的喜好,愛好,和家庭成員等等嗎?其實不怎么關系,他肯定最關系的是你可以不可以干活對嗎?所以簡歷的介紹順序也要有很清楚的認識。

          給大家看一下我的學生的簡歷:(大家可以參考)

          馬圣杰 求職意向: web前端工程師
          地點:北京
          Tel:xxx
          郵箱:xxx
          
          個人技能:
          
          1. 在公司項目中pc端頁面制作采用html+css來完成,響應式采用media和bootstrap來完成,包括響應式圖片,響應式組件等操作,有效的引入第三方css文件來解決統一瀏覽器標準的問題,熟練解決各種兼容問題;
          2. 在公司里做項目采用CSS預處理器LESS或者SCSS進行項目樣式單元的開發(normailz.css);
          3. 在工作中熟練使用HTML5以及CSS3技術對于移動網站布局,并且熟練使用解決移動端各種工作問題和移動設備顯示問題的hotcss進行網站開發;
          4. 在工作中經常使用各種插件比如swiper,owlCarousel等等;
          5. 在公司的項目管理方面我們采用git 版本管理工具,利用 gitHub 進行團隊協作開發,提高工作效率,掌采用grunt 壓縮工具,bower,和yeoman工 ; 
          6. 隨著web技術發展,在工作中使用過Es6中的語法,比如:字符串擴展,函數擴展,數組擴展和解構解析等等;
          7. 在項目中pc端網頁特效采用 Jquery 庫,或者依賴于jquery的插件,移動端特效zepto.js比較完美;
          8. 在工作中經常使用jquery中的$.ajax進行數據的交互和邏輯判斷; 
          9. 在這幾年里前端開發經驗里基本的 SEO知識; 
          10. 在項目中能夠熟練使用各種框架及插件。例如:Element-UI 、Mint-UI 、Mui 、Bootstrap,Swiper 、owlCarousel 、Iscroll等等;
          11. 在項目中熟練運用微信小程序的開發 
          12. 在工作中經常和后臺人員配合來完成接口,并且使用fetch(或者axios 、ajax 、原生js)調用接口拿到數據,實現數據渲染和邏輯判斷,驗證等操作 , promise用來數據的異步處理;
          13. 使用 過Node.js 的 express 框架完成常見的 業務邏輯,能鏈接 mysql 數據庫能編寫 sql 的增刪改查; 
          14. 了解PHP、Node.js等后臺語言,可以良好的完成前后臺交互;
          15. 熟悉各種圖表插件,如 Echarts 等,輕松實現餅圖、柱狀圖等常見圖表 ;
          16. 在工作中使用vue2版本進行項目開發,公司項目基于webpack開發,使用vue-cli腳手架搭建項目,頁面跳轉使用vue-router進行單頁面spa應用,采用組件式開發多模板開發形式,使用fetch,axios實現頁面交互,利用vue生命周期賦值,使用mock數據進行數據模擬,大量使用es6語法使用babel進行語法轉換編譯,使用promise進行數據異步處理,使用vuex進行項目狀態管理,實現數據調用統一化標準。Vue2中使用Mint-UI和Element-UI針對于pc或者移動實現快速開發 ;
          17. 我在項目中移動端混合開發時的大致流程:mui+html5plus,使用mui快速搭建移動端項目,以及頁面效果(組件)實現,使用html5plus實現設備調取(攝像頭,電話,掃一掃,地理定位,相冊,加速度傳感器,訪問麥克風,通訊錄,手機的設備信息及配置,發郵件,支付…等等),使用 HBuilder 內置工具打包多端項目(ios,Android,原生);
          18. 曾經使用微信小程序開發項目:全局app的配置,底部tabbar添加,pages多頁面添加,頁面跳轉(wx.navigateTo)、template來定義模板實現復用 ,wx.request使用小程序交互頁面數據的渲染和邏輯判斷。測試階段交互url定義在glabolData中。使用框架生命周期進行數據正確賦值 ;
          19. 對Photoshop、WebStrom、Sublime、HBuilder、Atom、Adobe Dreamweaver、Brackets FSCapture等一些前端工具能夠熟悉使用;
          20. 有比較良好的溝通協作能力,擁有團隊協作精神,嚴謹、踏實的工作態度;
          工作經驗
           
          2016.9-2017.12 北京易馳互聯科技有限公司 前端開發兼經理助理
           
          ● 負責公司網頁布局,利用bootstrap做響應式。
           
          ● 使用vue2.x組織網站項目結構,基于webpack開發項目,組件式開發,路由的傳值,鉤子函數的使用。Npmjs引入第三方庫,bootstrap,jquery等等。
           
          ● 解決網頁在各大主流瀏覽器中的兼容問題。
           
          ● 負責網站的網頁進行跳轉鏈接,使用ajax、fetch、axios調取數據,實現前后臺交互。
           
          ● 負責網頁導航欄的效果實現,網頁內容的整體布局、優化,實現網頁搜索功能的實現。
           
          ● 根據項目要求,團隊合作按時完成網站的開發、優化等。
           
          ● 對項目中BUG進行測試、分析、修改。
           
          ● 團隊的溝通不足,導致后期進行網頁的整合拼接出現漏洞,后經修復,才得以上線,所有溝通不到位是不可行的
           
           
          2015.10-2016.7 三智慧通(北京)科技有限公司 前端開發
           
          ● 與UI設計人員做好充分溝通,確保網頁特效的完美呈現。
           
          ● 負責web前端頁面開發,與服務端后臺開發人員配合進行數據展現運用rem彈性盒子媒體查詢來完成移動端項目和響應式網站兼容各大瀏覽器;運用JS、Jquery等前端框架編寫動態效果。
           
          ● AngularJs實現雙向數據綁定;運用Ajax調取數據與后臺交互。
           
          ● 運用Grunt自動化構建工具。
           
          ● 運用Git進行多人協同開發項目。
           
           
          2015.3-2015.9 山西綠風電子商務有限公司 前端開發
           
          ● 配合 UI 人員完成效果的編寫;并且根據 psd 或 App 原型,給出最優的前端解決方案,進行
          前端模塊化,以及代碼規范等。
           
          ● 實現網站頁面排版以及特效(JS、jQuery)效果。
           
          ● 設計及實現前后端的數據交互,對代碼質量及進度負責。
           
          ● 對完成的頁面進行維護和對網站前端性能做相應的優化。
           
          ● 對前端技術問題進行分析診斷,并提出解決方案。
           
          項目經驗:
           
          響應式開發: 潮水、易馳Eb 、E-SHOPPER …(兼容PC端,iPad端,移動端)
           
          ● 負責該項目頁面的排版、更新,其中涉及到:bootstrap框架的使用(效率快) 、插件swiper 、normalize.css的引入(統一規范標準)、iconfont字體的引入 、picturefill.js的引用(圖片的兼容)、移動端hotcss的引用 、JQuery效果的加注 、$.ajax的后臺數據渲染 ;
           
          ● 為網站的頁面提供持續優化方案,前端兼容性代碼調試;
           
          ● 通過媒體查詢調整各 pc 端和移動端適配問題,以及測試頁面,優化代碼,解決部分用戶體
          驗的 BUG,以達到最佳的用戶體驗;
           
          ● 使用 git 進行版本控制管理,使用 webpack 壓縮代碼。
           
          移動端開發: 知吃氏 、好融金融 、閃電貸 、艾寶欣 、醫藥 ...(移動端)
           
          ● 在開發該項目中涉及到 html5+CSS,rem單位以及新老彈性盒的運用,解決多端適配使用(hotcss可以),less/sass預處理器的使用 ,html5plus的設備調用;
          ● 在效果方面我們采用zepto、swiper、iscroll ;
          ● Mui、 mint-UI、Element-UI等等框架的調用(帶來的效果不言而喻);
          ● 常用到$.ajax、XMLHTTPRequset(js原生) 、fetch 、axios調取數據進行渲染;
          ● 以上【艾寶欣】項目采用微信小程序:全局app的配置,底部tabbar添加,pages多頁面添加,頁面跳轉(wx.navgarto)、template來定義模板實現復用 ,wx.rexxx使用小程序交互頁面數據的渲染和邏輯判斷。測試階段交互url定義在glabolData中。使用框架生命周期進行數據正確賦值;
           
          ● 上述【醫藥】該項目使用vue2版本開發,基于webpack開發,使用vue-cli腳手架搭建項目,頁面跳轉使用vue-router進行單頁面spa應用,采用組件式開發多模板開發形式,使用fetch,axios實現頁面交互,利用vue生命周期賦值,使用mock數據進行數據模擬,大量使用es6語法使用babel進行語法轉換編譯,使用promise進行數據異步處理,使用vuex進行項目狀態管理,實現數據調用統一化標準。
           
          ● 利用git、grunt完成上線前版本管理及打包壓縮工具;
           
           
          PC端開發: 萬商貸、利金行 、 賽會 、愛燕子 …(PC端)
           
          ● 利用HTML+CSS(less和sass預處理器)配合bootstrap進行高質量的頁面編寫,實現頁面布局的重構及優化,通過JQuery實現動態效果;
           
          ● 使用ajax 實現前后臺的數據交互、渲染和邏輯判斷;,
           
          ● 利用jQuery第三方插件時間頁面動態效果將產品直接呈現在用戶眼前;
           
          ● 通過正則驗證配合調取后臺數據進行匹配; 
           
           
          教育背景
          2011.09-2015.7 山西工商學院 本科 計算機與科學技術
          自我評價 
          為人真誠,謙虛好學,樂觀開朗,能很好地處理人際關系,遇到問題不抱怨而是用行動去解決,有較強的責任心和團隊合作精神;對自己要求嚴格,做事情講究高質量;熱衷于網頁設計;服從安排,肯吃苦耐勞。在工作中,團隊協作能力強具有較強的親和力,協調溝通能力強,能夠建立良好的合作氛圍和客戶關系。

          2.自我介紹準備

          自我介紹是要體現出來什么呢?是不是你這個人做了哪些項目?其實自我介紹不如直接改成項目介紹,大家這里重點自己比較牛的經歷和做項目的過程和細節。千萬別自我介紹不到1分鐘就說完了,你可以想一下,如果自我介紹不到1分鐘是不是我會覺得你這個人特別簡單,沒什么東西?所以自我介紹我建議大家準備5-15分鐘的話術,可以提前寫出來讀一讀,當然面試過程中不用說那么長時間,但是你要準備那么長時間,這個不用解釋吧,臺上一分鐘臺下十年功。

          3.面試題準備

          面試題準備這一塊是必須的,就跟考試一樣,如果你都知道考什么了,或者劃一個重點的話,是不是特別好考?對的沒錯,所以一定要多看面試題,我在之前的文章整理了好多面試題html,css,移動端,兼容問題,vue,等等等等了,手都寫爛了,大家一起要看。當然最少配合視頻講解,我這里打個廣告,提供一個鏈接,大家可以學習,當然你也可以不學習,完全看你自己。

          前端面試求職跳槽通關指南:https://www.3mooc.com/front/learning/routesecond?subjectid=1232

          三、面試中

          面試中可能會遇到很多突發事件,比如有些面試題不會了怎么辦?等等吧,那么咱們是否可以形成一個面試聯盟,當然我有這樣的學生群,如果有一個人去面試碰到不會的題直接發出來,就會有群里的小伙伴進行回答,那么這樣的話是不是很多人在幫助你,你并不孤獨呢!

          四、面試后

          面試后不管面試結果什么樣,咱們都要做復盤,面試不行?哪里出問題了,是不是應該進行一個復盤,這個復盤是當局者迷,那么我是不迷的,所以大家面試都可以找我,我來幫助大家。

          當然這里再說一下,也是我之前很生氣的地方,大家面試完以后,如果面試官說你回去等通知吧,“我會在幾月幾號的幾點告訴你面試結果”,那么如果當天沒有打電話,咱們作為面試者是不是可以打過去電話問問呢?反正跑都跑去面試了,那么遠,干嘛不打個電話幾分鐘都事情做一個了解呢?

          最后:我說了這么多,我想幫助很多web前端面試者成功就業,當然我個人也有一些渠道,可以幫助更多的人,我已經差不多幫助了2萬多學生就業了,這里也包含我的學生。如果有各種問題,歡迎大家評論留言或者聯系我,咱們一起來討論一下。最后祝福大家在2019年的年底都可以找到很好的工作,順利就業,加油!

          給大家看看我輔導的學生就業吧(一倆個就好了,其他的我也沒截圖)。

          網友找到我,我幫助他就業了。(西安倆個案例)

          動設備和桌面電腦上的客戶端API起初并不是同步的。最初總是移動設備上先擁有某些功能和相應的API,但慢慢的,這些API會出現在桌面電腦上。其中一個應用接口技術就是getUserMedia API,它能讓應用開發者訪問用戶的攝像頭或內置相機。下面就讓我展示一下如何通過瀏覽器來訪問你的攝像頭,并提取截屏圖形。下面的代碼里我寫了一部分注釋,請閱讀:

          1. <!--

          2. 理想情況下我們應該先判斷你的設備上是否

          3. 有攝像頭或相機,但簡單起見,我們在這里直接

          4. 寫出了HTML標記,而不是用JavaScript先判斷

          5. 然后動態生成這些標記

          6. -->

          7. <videoid="video"width="640"height="480" autoplay></video>

          8. <buttonid="snap">Snap Photo</button>

          9. <canvasid="canvas"width="640"height="480"></canvas>

          在寫出上面這些標記前應該判斷用戶的客戶端是否有攝像頭支持,但這里為了不那么麻煩,這里直接寫出了這些HTML標記,需要注意的是我們這里使用的長寬是640×480。

          JavaScript代碼

          因為我們是手工寫出的HTML,所以下面的js代碼會比你想象的要簡單了很多。

          1. // Put event listeners into place

          2. window.addEventListener("DOMContentLoaded", function() {

          3. // Grab elements, create settings, etc.

          4. var canvas=document.getElementById("canvas"),

          5. context=canvas.getContext("2d"),

          6. video=document.getElementById("video"),

          7. videoObj={ "video": true },

          8. errBack=function(error) {

          9. console.log("Video capture error: ", error.code);

          10. };

          11. // Put video listeners into place

          12. if(navigator.getUserMedia) { // Standard

          13. navigator.getUserMedia(videoObj, function(stream) {

          14. video.src=stream;

          15. video.play();

          16. }, errBack);

          17. } elseif(navigator.webkitGetUserMedia) { // WebKit-prefixed

          18. navigator.webkitGetUserMedia(videoObj, function(stream){

          19. video.src=window.webkitURL.createObjectURL(stream);

          20. video.play();

          21. }, errBack);

          22. }

          23. elseif(navigator.mozGetUserMedia) { // Firefox-prefixed

          24. navigator.mozGetUserMedia(videoObj, function(stream){

          25. video.src=window.URL.createObjectURL(stream);

          26. video.play();

          27. }, errBack);

          28. }

          29. }, false);

          30. 一旦判斷出用戶瀏覽器支持getUserMedia ,下面就非常簡單了,只需要將那個video元素的src設置為用戶的攝像頭視頻直播連接。這就是用瀏覽器訪問攝像頭需要做的所有的事情!

            拍照的功能只能說是稍微復雜一點點。我們在按鈕上加入一個監聽器,將視頻畫面畫到畫布上。

            1. // 觸發拍照動作

            2. document.getElementById("snap")

            3. .addEventListener("click", function() {

            4. context.drawImage(video, 0, 0, 640, 480);

            5. });

            6. 當然,你還可以在圖片上加一些濾鏡效果….我還是把這些技術放到以后里再說吧。但至少你可以將這個畫布圖像轉換成一張圖片。

              以前我們需要使用第三方的插件才能從瀏覽器里訪問用戶的攝像頭,這不免有些復雜。現在只需要HTML5的畫布技術和javaScript,我們就能簡單快速的操作用戶的攝像頭。不僅僅還是訪問攝像頭,而且是因為HTML5的畫布技術及其強大,我們可以給圖片上加入各種迷人的濾鏡效果。現在,在瀏覽器里用自己的攝像頭給自己拍張照片吧!

          鋒網按:本文作者蔣海兵,趣拍產品總監,直播行業老兵。

          移動直播行業的火熱會在很長一段時間內持續,通過和各行業的整合,從而成為具有無限可能性的行業。主要有以下三個原因:

          第一,移動直播的UGC生產模式比PC端的直播更明顯,人人都有設備,隨時隨地開播,完全順應了互聯網時代的開放性原則,能刺激更多人去創造和傳播優質內容。


          第二,網絡帶寬和速度在逐漸提高,網絡成本在逐漸下降,為移動直播提供一個極佳的發展環境。文字、聲音、視頻、游戲等都會在移動直播中呈現,創造出更加豐富的用戶體驗。直播可以以SDK的形式接入到自己的應用中,比如,教育領域中的課后輔導完全可以以直播的形式開展業務、電商也可借助直播讓用戶挑選商品,促進銷售。


          第三,一個與VR/AR技術相結合的移動直播為整個行業的未來提供了新的發展空間。VR/AR直播能夠讓用戶身臨其境,帶動主播與觀眾更貼近真實的互動,大大提高平臺的用戶參與度。

          當下,有技術實力和流量優勢的互聯網從業者都不愿錯過直播這個風口,如何快速搭建一個直播系統成了大家關心的問題,我想和大家分享下我的經驗。我從事于一家直播產品開發商,我們的產品為了快速趕上市場,使用了云服務提供商的直播SDK。

          從業者都知道,一個完整直播產品應該包含以下環節:推流端(采集、前處理、編碼、推流)、服務端處理(轉碼、錄制、截圖、鑒黃)、播放器(拉流、解碼、渲染)、互動系統(聊天室、禮物系統、贊)。 下面我就一一講述下直播SDK在各個環節所做的工作。

          一、移動直播推流端需要做哪些工作?

          直播推流端即主播端,主要通過手機攝像頭采集視頻數據和麥克風采集音頻數據,經過一系列前處理、編碼、封裝,然后推流到CDN進行分發。

          1、采集

          移動直播SDK通過手機攝像頭和麥克風直接采集音視頻數據。其中,視頻采樣數據一般采用RGB或YUV格式、音頻采樣數據一般采用PCM格式。采集到的原始音視頻的體積是非常大的,需要經過壓縮技術處理來提高傳輸效率。

          2、前處理

          在這個環節主要處理美顏、水印、模糊等效果。美顏功能幾乎是直播的標配功能。我們調研中發現太多case是因為沒有美顏功能被拋棄使用的。另外國家明確提出了,所有直播都必須打有水印并回放留存15天以上。

          美顏實際上是通過算法去識別圖像中的皮膚部分,對皮膚區域進行色值調整。通過顏色對比找到皮膚區域,可以進行色值調整、添加白色圖層或調整透明度等來達到美白效果。在美顏處理方面,最著名的GPUImage提供了豐富的效果,同時可以支持iOS和Android,支持自己寫算法實現自己最理想的效果。GPUImage內置了120多種常見濾鏡效果,添加濾鏡只需要簡單調用幾行代碼就可以了。

          3、編碼

          為了便于手機視頻的推流、拉流以及存儲,通常采用視頻編碼壓縮技術來減少視頻的體積,現在比較常用的視頻編碼是H.264。在音頻方面,比較常用的是AAC編碼格式,其它如MP3、WMA也是可選方案。視頻經過編碼壓縮大大提高了視頻的存儲和傳輸效率,當然,經過壓縮后的視頻在播放時必須進行解碼。

          相較于之前的H.264,2012年誕生的H.265編解碼標準有了相當大的改善,做到了僅需要原來一半帶寬即可播放相同質量的視頻,低于1.5Mbps的網絡也能傳輸1080p的高清視頻。像阿里云、金山云都在推自己的H.265編解碼技術,隨著直播的快速發展和對帶寬的依賴,H.265編解碼技術已有全面取代H.264的趨勢。

          H264和H265個模塊技術差異:

          另外,硬件編碼已經成為移動直播的首選方案,軟編碼處理在720p以上的視頻頹勢非常明顯。在iOS平臺上硬件編碼的兼容性比較好,可以直接采用,但在Android平臺上,Media Codec編碼器針對不同的芯片平臺表現差異還是非常大的,要完全實現全平臺兼容的成本還是非常高的。

          4、推流

          要想用于推流還必須把音視頻數據使用傳輸協議進行封裝,變成流數據。常用的流傳輸協議有RTSP、RTMP、HLS等,使用RTMP傳輸的延時通常在1–3秒,對于移動直播這種實時性要求非常高的場景,RTMP也成為移動直播中最常用的流傳輸協議。最后通過一定的Qos算法將音視頻流數據推送到網絡斷,通過CDN進行分發。在直播場景中,網絡不穩定是非常常見的,這時就需要Qos來保證網絡不穩情況下的用戶觀看直播的體驗,通常是通過主播端和播放端設置緩存,讓碼率均勻。另外,針對實時變化的網絡狀況,動態碼率和幀率也是最常用的策略。

          當然,在網絡傳輸方面全部自己來做基本不現實,找提供推流服務的CDN服務商提供解決方案是最好的選擇。據了解,阿里云是國內唯一能自研CDN緩存服務器的廠商,性能非常有保障。當然,大多數直播平臺都會同時接入多個視頻云服務提供商,這樣可以做拉流線路互備,對推流后視頻集群再進行優化也可提高直播的流暢性和穩定性。

          二、服務端處理需要做哪些工作?

          要想適配各終端和平臺,服務端還需要對流進行轉碼,如支持RTMP、HLS、FLV等格式拉流,支持一路轉多路適配不同網絡和分辨率的終端設備。

          1、截圖、錄制、水印

          像阿里云等云服務商都提供了實時轉碼技術,將用戶推流碼率較高(比如720P)實時轉化成較低清晰度(比如360P)的流以適應播放端的需求。如果要自己搭建實時轉碼系統,這個成本是極高的,一臺8核設備只能實時轉10路流,如果一個正常的直播平臺有1000路流,就需要100臺設備,加上后期的運維成本,一般公司就吃不消了。

          2、鑒黃

          2016年4月14日,文化部查出了斗魚、虎牙、YY、熊貓TV、六間房、9158等涉嫌提供含宣揚淫穢、暴力、教唆犯罪的網絡直播平臺,被列入查處名單。政府介入管制有利于直播行業打造健康的生態,進入良性發展。這也意味著為了安全直播產品鑒黃成了必需環節,使用技術手段去鑒黃是移動直播平臺必然采用的方案。

          市面上提供鑒黃服務的方案主要有兩種:

          第一種是對視頻進行截圖,然后對圖片進行鑒黃,返回鑒黃結果和分值。典型的企業有阿里(綠網)、圖譜科技,他們目前都支持直接傳入視頻,經過服務端分析返回結果。通常由業務系統接入鑒黃服務,根據鑒黃結果對直播流進行控制,如切斷直播流、封禁賬號等。


          第二種是和CDN結合,直接對直播流進行分析,識別結果分為色情、疑似色情、性感和正常,業務系統根據識別結果直接控制直播流。典型的企業是Viscovery,這套方案的優點是實時性保證比較好,缺點是必須部署到CDN或自己的機房,使用成本相對高一些。

          還有一種一站式直播解決方案提供商,他們的做法是,用戶只需在控制臺對鑒黃服務進行配置就可以針對每個應用、每一路直播流進行實時審核。在控制臺中,云服務商實時將鑒黃結果返回,用戶可以直接查看色情直播和違規界面的截圖,同時可以對直播流進行控制,切斷問題直播流。該服務商還提供了短信、郵件和站內信功能,避免漏掉任何一個非法視頻,給平臺造成損失,我們就使用了這種方式。

          三、播放器端需要做哪些工作?

          在播放器端如何做到秒開,直播過程中保證畫面和聲音清晰度的同時,穩定、流程、無卡頓的直播流量,這些工作都需要播放器端配合服務端來做優化,做到精確調度。

          1、拉流

          拉流實際是推流的逆過程。首先通過播放端獲取碼流,標準的拉流格式有RTMP、HLS、FLV等。RTMP是Adobe的專利協議,開源軟件和開源庫都支持的比較好,如開源的librtmp庫,播放端只要支持flashPlayer的就能非常簡單的播放RTMP直播,直播延遲一般在1–3秒。

          HLS是蘋果提出的基于HTTP的流媒體傳輸協議,HTML5可以直接打開播放,通過微信、QQ等軟件分享出去,用戶也可以直接觀看直播,可以說移動直播app,HLS拉流協議是必須支持的,缺點是延遲通常大于10秒。FLV(HTTP-FLV)協議是使用HTTP協議傳輸流媒體內容的一個協議,也不用擔心被Adobe的專利綁架,直播延遲同樣可以做到1–3秒。

          各拉流協議的差異:

          我們使用的云服務的直播拉流技術提供了以上三種格式,滿足不同業務場景的需求,如對即時性要求較高或有互動需求的可以采用RTMP或FLV格式進行直播拉流播放;對于有回放或跨平臺需求的,推薦使用HLS。當然,三種協議是可以同時使用的,分別用到自己的場景就可以了。

          2、解碼和渲染

          拉流獲取封裝的視頻數據后,必須通過解碼器解碼、渲染后才能在播放器上播放。它是編碼的逆過程,是指從音視頻的數據中提取原始數據。前面介紹的H.264和H.265編碼格式都是有損壓縮,所以在提取后的原始數據,并非原始采樣數據,存在一定的信息丟失。因此,在視頻體積最小的情況下通過各種編碼參數保留最好的原始畫面,成為了各視頻公司的核心機密。

          考慮對高清的支持,解碼肯定還是要選擇硬解碼的。前面介紹過,iOS系統由于硬件比較單一、比較封閉,支持的比較好,Android系統由于平臺差異非常大,編解碼要完全兼容各平臺還需要很多工作要做。

          四、移動直播中的交互系統

          移動直播中最常見的交互有聊天室(彈幕)、點贊、打賞和禮物等,交互系統涉及消息的實時性和互動性,在技術實現上大多是使用IM的功能來實現的。對于在線人數比較多的房間,彈幕消息量是非常大,主播與用戶其實都看不過來,為了緩解服務器壓力,在產品策略需要做一些必要的優化。

          1、聊天室

          移動直播中的彈幕交互是用戶和主播互動的主要方式,實際上就是IM中的聊天室功能。聊天室和群聊功能類似,但聊天室的消息是不需要分發給不在線的用戶的,歷史消息也不需要查看,用戶只有進入聊天室后才能查看聊天消息和群成員信息。面對復雜多變的網絡狀況,還需要根據用戶位置就近選擇近對應運營商的單線機房接入彈幕消息服務,讓彈幕更及時。

          2、禮物系統

          禮物系統更是絕大多數移動直播平臺的標配了,它是這些平臺主要的收入來源。送禮物的形式也增強了用戶和主播之間的互動交流,也是主播依賴平臺的最主要原因。

          禮物的收發在技術實現上也是用聊天室接口做的,通常采用IM中的自定義消息實現,當用戶收到或發送禮物時將自定義消息對應的禮物圖形渲染出來。

          以上就是我們在使用了第三方SDK服務后總結出來的直播產品經驗,希望能幫助到創業者和從業者們。


          主站蜘蛛池模板: 亚洲av乱码一区二区三区香蕉| 精品国产亚洲一区二区在线观看 | 无码人妻一区二区三区免费视频| 波多野结衣AV无码久久一区| 国产福利一区视频| 在线播放国产一区二区三区 | 久久99国产一区二区三区| 亚洲国产欧美国产综合一区| 精品无人区一区二区三区| 成人日韩熟女高清视频一区| aⅴ一区二区三区无卡无码| 韩国精品福利一区二区三区| 午夜影院一区二区| 国产AV午夜精品一区二区三区| 久久国产精品亚洲一区二区| 久久蜜桃精品一区二区三区| 污污内射在线观看一区二区少妇| 免费在线视频一区| 亚洲国产视频一区| 日韩人妻精品一区二区三区视频| 国产精品免费大片一区二区| 在线|一区二区三区四区| 日韩精品中文字幕无码一区 | 亚洲永久无码3D动漫一区| 国产一区二区三区在线看片| 伊人久久一区二区三区无码| 无码少妇精品一区二区免费动态| 波多野结衣中文一区| 日韩视频免费一区二区三区| 亚洲国产成人久久一区二区三区 | 久久一区二区精品| 精品视频一区二区三区| 国产a久久精品一区二区三区| 无码人妻一区二区三区兔费| 亚洲一区电影在线观看| 无码精品视频一区二区三区| 亚洲国产精品无码久久一区二区 | 无码少妇一区二区| 无码少妇一区二区| 91久久精品午夜一区二区| 亚洲一区二区三区高清视频|