在angular框架下使用videojs播放RTMP實時流直播視訊

阿新 • • 發佈：2019-01-19

最近公司專案需要在前端播放實時視訊資訊，使用海康相機輸出RTSP流後由後臺轉碼為RTMP流，傳送給前端進行實時播放。

前端使用angular進行框架搭建，這裡記錄編寫Demo的過程。

1.建立Angular模板專案；

常規的Angular專案操作，這裡不再贅述。這裡使用的是最新版的Angular框架 —— v6.1.0。

2.安裝videojs

video.js是一個支援HTML5和Flash播放的成熟js庫，其核心思想是對於視訊優先使用HTML5直接播放，如果無法播放再呼叫Flash播放。

這裡需要說明的是，在video.js升級到6.0.0版本之後，官方在這個庫中，將Flash的支援分離到一個新的專案中，取名為videojs-flash，故在這裡還需要引入該庫，包管理程式碼如下：

npm install video.js --save
npm install videojs-flash --save

3.業務邏輯編寫

在完成安裝video.js後，需對其進行引入操作，引入有兩種形式：

網路引入
本地引入

但無論哪種引入形式，按照videojs官方文件，結合angular專案，都應該在專案根目錄下的index.html中進行操作。這裡我選擇了本地引入的形式。

index.html:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>RtmpVideojs</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  
  <script src="./assets/video.min.js"></script>
  <link href="./assets/video-js.min.css" rel="stylesheet">
  <script src="./assets/videojs-flash.min.js"></script>
  
</head>
<body>
  <app-root></app-root>
</body>
</html>

這裡直接將video.js的核心程式碼檔案從包管理資料夾node_modules下提取出來放入了assets資料夾中，當然也可以直接從node_modules資料夾中引用，區別僅僅是路徑不同。

需要注意的是引入順序的問題，videojs-flash需要在video.js之後再引入。

由於是demo程式，故直接在app.component中進行程式碼編寫：

app.component.html:

<h1>RTMP-Play</h1>

  <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" 
    controls preload="auto" width="1280px" height="720px" 
    data-setup="{}" autoplay>
    
    <source [src]="safeUrl" type='rtmp/flv'>
    
    <p class="vjs-no-js">播放視訊需要啟用JavaScript，推薦使用支援HTML5的瀏覽器訪問。
        To view this video please enable JavaScript, 
        and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">
        supports HTML5 video</a>
    </p>
  </video>

這裡使用了HTML5的video標籤，對其中的屬性作如下解釋：

vjs-big-play-centered   videojs中的樣式播放按鈕居中
poster                  預設的顯示介面，在為播放之前，播放器中顯示的介面
preload="auto"          是否提前載入
autoplay                自動播放
loop=true               自動迴圈
data-setup='{"example_option":true}' 把一些設定的屬性寫進來，如data-setup={"autoplay":true}

在完成以上的程式碼編寫後，需要注意的幾個問題：

由於angular的安全機制問題，導致在元件component中引入外部的url視訊資源會發生安全檢測不通過的問題，故這裡在app.component.ts中還需要進行DomSanitizer服務的引入，來告知我們使用的RTMP流的特定連結是安全的，關於DomSanitizer服務，可以。

app.component.ts:

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'; // 引入DomSanitizer服務

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 該連結是香港某電視臺的直播流連結，請放心使用
  url = 'rtmp://live.hkstv.hk.lxdns.com/live/hks';   
  safeUrl: any;

  constructor(private sanitizer: DomSanitizer) {
    this.getUrl(this.url);
  }

  getUrl(url: string) {
    this.safeUrl = this.sanitizer.bypassSecurityTrustUrl(url);  // 獲取安全連結
  }
}

瀏覽器去除Flash player是大勢所趨，如果以上demo在執行過程中需要呼叫flash，臨時啟用即可，我在本地的測試當中，chrome和firefox可以正常執行。
由於涉及到了flash，故在移動端的播放中，這個方案不甚理想，在查閱一些資料後，找到了一個移動端的解決方案——百度的開源播放器，，大家有空可以嘗試一下。

初次寫部落格，感謝您的閱讀，如有表述不清和錯誤的地方，敬請大家指正，謝謝！

在angular框架下使用videojs播放RTMP實時流直播視訊

最近公司專案需要在前端播放實時視訊資訊，使用海康相機輸出RTSP流後由後臺轉碼為RTMP流，傳送給前端進行實時播放。前端使用angular進行框架搭建，這裡記錄編寫Demo的過程。 1.建立Angular模板專案；常規的Angular專案操作，這裡不再贅述。這裡使用

Videojs播放RTMP流媒體

<!DOCTYPE html> <html> <head> <title>播放器</title> <link href="vi

搭建rtmp直播流服務之4:videojs和ckPlayer開源播放器二次開發(播放rtmp、hls直播流及普通視訊)

前面幾章講解了使用從資料來源獲取，到使用ffmpeg推流，再到nginx-rtmp釋出流，後端的服務到這裡就已經全部完成了。如果這裡的流程沒走通，那麼這裡的播放器也是沒辦法播放實時流的。本章講一下播放器的選用和二次開發，前端的播放器雖然有flex(flash)可

angular框架下的跨域問題（獲取天氣數據）

cat blog 蘇州 scrip location func amp set 服務 1、新浪天氣：http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=0&city=&df

使用videojs播放rtmp視訊

demo程式碼在此，直接點選下載，親測可用。demo下載！！注意以下幾點：一定要把程式碼放到伺服器上執行，然後訪問index.html，不可本地開啟使用。 demo使用的video.js版本是5.5.3，其他版本我還沒進行測試，大家可以自己去試試。vide

在自己的電腦下搭建nginx+rtmp的流媒體伺服器及用java對推流許可權驗證

因為公司任務需要讓做一個直播的系統，經過一段時間的研究，和方便以後撿起來所以把這個寫了下來下載windows版本的nginx http://nginx-win.ecsds.eu/download/nginx 1.7.11.3 Gryphon.zip 解壓到c盤，最好

iOS RTMP上推直播視訊

最近收集了一些關於視訊直播的資料，目前主流的技術是上推使用RTMP協議，服務端基於nginx的nginx-rtmp-module模組來增加對HLS的支援，下行播放支援RTMP協議和HLS協議。 RTMP協議Real Time Messaging Protocol 是Adobe公司為Flash播放器和伺服器

vue專案中實現maptalks地圖上彈框使用videojs播放實時視訊rtmp流

不限制於vue專案，區別只是相關檔案的引入最終實現效果如下： 1、首先引入需要的資源：vue-video-player、maptalks相關 npm install vue-video-player --save npm install maptalks -

videojs集成--播放rtmp流

oot des head enter max size copyto meta 進行之前說到已經把流推送過來了，這時候就可以使用videojs來進行顯示播放。首先要先有一個文件，那就是video-js.swf 因為，這種播放方式html已經不能很好的進行播放了

videojs修改播放器樣式並實現四路動態播放rtmp流視頻

擴展 pos 重載部分拍攝播放器並且一個視頻流　　接了個無人機的項目，負責視頻播放這一塊，選用的是video.js這個視頻插件，本以為可以開開心心的開發，誰怎料網上有關這部分的資料如此之少，給我這個伸手黨給予了重大壓力。好了，不說廢話了。　　項目的需求為實現

videojs整合--播放rtmp流

之前說到已經把流推送過來了，這時候就可以使用videojs來進行顯示播放。首先要先有一個檔案，那就是video-js.swf因為，這種播放方式html已經不能很好的進行播放了，需要用到flash來播放，videojs在這個地方就用到了這個。程式碼就是下面這樣。裡面一些細節註釋

videojs能播放mp4，不能播放rtmp流的問題解決

最近給了一個小任務是要驗證下videojs播放rtmp流的問題。我先是在 http://www.jq22.com/jquery-info404 《視訊播放外掛Video.js》下載了根據它提供的demo修改程式碼如下：<!doctype html> <htm

狼廠項目實踐：通用檢索框架準實時流的設計與實現

機制 oop 定期函數時也維護次數業務需求一是背景檢索對實時性的要求很高，不僅是對索引建立、結果召回、策略幹擾等核心部分，也包括數據錄入的部分。檢索的數據流主要包括全量數據與增量數據，其中全量數據是在運行前就已經生成好的，在檢索進程運行開始時就直接解析加載了

前端頁面播放 rtmp 流與 flv 格式視頻文件

media ready nbsp 元素 gif .class create ckplayer -s 技術：angular/cli , html5 , typescript , scss ,es 6 ... 項目類型：直播視頻與視頻回放使用到插件： videojs +

ubuntu下使用nginx和nginx-rtmp-module配置直播推流伺服器

本來準備在centos伺服器上搭建的，因為筆者工作系統是ubuntu，因此直接在本機上搭建，更方便快捷，配置過程比較簡單，記錄一下。目錄配置環境安裝obs-studio開始第一次推流安裝vlc播放器開始拉流配置環境配置環境配

使用 JW Player 播放RTMP 流

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

大資料下的實時熱點功能實現討論（實時流的TopN）

　　我司內部有個基於jstorm的實時流程式設計框架，文件裡有提到實時Topn，但是還沒有實現。。。。這是一個挺常見挺重要的功能，但仔細想想實現起來確實有難度。實時流的TopN其實離大家很近，比如下圖百度和微博的實時熱搜榜，還有各種資訊類的實時熱點，他們具體實現方式不清楚，甚至有可能是半

live555在Linux下最簡單地實現實時流媒體點播

通過Live555交叉編譯後執行發現，上面實現的流媒體實時通過檔案伺服器的檔案點播，沒有相關的流媒體實現方式，但在Linux下，可以通過某些技巧實現Live555伺服器實時流媒體伺服器，並且是傻瓜式的，簡易程度不需要修改Live555下面一行程式碼。首先，需要

Windows下利用live555實現H264實時流RTSP傳送

文如其名，最近在做的專案要求利用RTSP協議轉發處理完的H264視訊資料給上一層客戶端，環境是Windows的VS2013，於是就各種百度谷歌找程式碼。結果在得到利用live555去做比較簡單的結論的同時也悲情地發現，網上別人貼出來的程式碼基本都是Linux上面的。

通過FFmpeg將rtsp流攝像頭視訊轉碼為rtmp播放

注意：用這種方式可以顯示攝像頭視訊，但是存在諸多問題，無法正常投入使用，包括卡頓跟延遲，請想要借鑑的朋友慎重使用。前幾天經理給我安排了一個新任務，將網路攝像頭用rtsp協議在頁面播放，因為我以前做的是http協議的，根據攝像頭的API來實現的，

在angular框架下使用videojs播放RTMP實時流直播視訊

相關推薦