關于直播
視頻直播技術大全、直播架構、技術原理和實現(xiàn)思路方案整理
直播流程
-
視頻采集端：
1、視頻采集：使用攝像頭設備獲取實時視頻流。
2、視頻處理： 對采集到的視頻進行處理，可以包括美顏、濾鏡、水印等效果的添加。
3、音視頻編碼壓縮： 將處理后的音視頻數(shù)據(jù)進行編碼壓縮，常用的編碼方式有H.264視頻編碼和AAC音頻編碼。 -
直播流視頻服務端：
1、視頻流解析編碼：接收視頻采集端傳來的音視頻數(shù)據(jù)流，進行解析和解碼。
2、推送RTMP/HLS格式視頻流：將解碼后的音視頻數(shù)據(jù)流封裝成RTMP或HLS格式，并推送到流媒體服務器上。這些流媒體服務器會處理客戶端的連接和請求，將直播內容分發(fā)給客戶端。 -
視頻播放端：
1、音視頻解碼：在播放端，接收到來自直播流視頻服務端的數(shù)據(jù)流，進行解碼，得到原始的音頻和視頻數(shù)據(jù)。
2、播放+聊天互動：將解碼后的音視頻數(shù)據(jù)進行播放，同時提供用戶界面供觀眾觀看。可以在播放端實現(xiàn)一些互動功能，比如彈幕、點贊、評論等。
直播視頻格式封裝
直播視頻通常會經(jīng)過特定的封裝格式，以便在網(wǎng)絡上傳輸和播放。這些封裝格式可以將音頻、視頻、元數(shù)據(jù)等信息進行組合和管理，以確保流暢的傳輸和播放體驗。
FLV： 一種由Adobe公司開發(fā)的流媒體封裝格式，最初用于Flash播放器和RTMP協(xié)議傳輸。它可以容納音頻、視頻、文本和元數(shù)據(jù)，并且適用于實時傳輸和播放。
TS： 一種用于傳輸多媒體內容的封裝格式，常用于數(shù)字電視和IPTV。它可以容納多路音頻、視頻和數(shù)據(jù)流，適合實時傳輸和廣播。HLS協(xié)議中使用的就是TS格式來封裝音視頻流。
MP4： 一種通用的多媒體封裝格式，可以容納音頻、視頻、字幕和元數(shù)據(jù)。它被廣泛用于存儲和傳輸音視頻內容，也可以用于直播。MP4格式通常使用H.264視頻編碼和AAC音頻編碼。
推流和拉流
推流（Publishing）和拉流（Subscribing）是在實時音視頻通信中常見的術語，用于描述音視頻數(shù)據(jù)的傳輸過程。推流指的是將本地音視頻數(shù)據(jù)發(fā)送到服務器，而拉流則是從服務器接收遠程音視頻數(shù)據(jù)。
HLS 是由蘋果公司開發(fā)的一種流媒體傳輸協(xié)議，主要用于在iOS設備、Web瀏覽器和其他支持HLS的設備上實現(xiàn)實時的音視頻流播放。HLS將音視頻流切割成一系列小的媒體文件（使用 .ts 格式進行封裝，將音視頻流分割成小的.ts文件），通過HTTP協(xié)議逐個傳輸和播放。
優(yōu)點：
1、適用于多種設備和平臺，包括iOS、Android、Web等。
2、支持自適應碼率，根據(jù)網(wǎng)絡狀況動態(tài)調整視頻質量。
3、在不同帶寬下都能提供較好的流暢播放體驗。
4、使用HTTP協(xié)議傳輸，不需要特定的服務器支持。
缺點：
1、延遲相對較高，通常在10秒左右。
2、需要將媒體流切割成小文件，增加服務器壓力和存儲開銷。
RTMP 是Adobe公司開發(fā)的實時消息傳輸協(xié)議，基于TCP協(xié)議傳輸，最初用于Flash播放器與媒體服務器之間的音視頻傳輸。
優(yōu)點：
1、延遲相對較低，通常在1-3秒左右，適合實時互動。
2、支持即時性的直播，適用于一些對延遲要求較高的場景。
3、在Flash播放器上有較好的兼容性。
缺點：
1、不適用于iOS設備和某些平臺，因為不被廣泛支持。
2、需要專門的RTMP服務器支持，部署和維護相對復雜。
3、需要考慮防火墻和代理等網(wǎng)絡限制。
獲取攝像頭和麥克風權限
navigator.getUserMedia()
MDN-navigator.getUserMedia()
Navigator.getUserMedia()方法提醒用戶需要使用音頻（0 或者 1）和（0 或者 1）視頻輸入設備，比如相機，屏幕共享，或者麥克風。
語法： navigator.getUserMedia ( constraints, successCallback, errorCallback );
代碼：
<body>
<video autoplay id="video" width="400" height="300"></video>
<script>
var video = document.getElementById('video');
//作兼容處理
navigator.getMedia = navigator.getUserMedia ||
navagator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({ audio: true, video: true },
function (stream) {
//MDN文檔案例中這樣寫會報錯：video.src = window.URL.createObjectURL(stream);
video.srcObject = stream
video.onloadedmetadata = function (e) {
video.play();
};
},
function (err) {
console.log("The following error occurred: " + err.name);
}
);
</script>
</body>
雖然這個api依然可以使用，但是官網(wǎng)上已經(jīng)換了另一個api——MediaDevices.getUserMedia()
MediaDevices.getUserMedia()
MDN-MediaDevices.getUserMedia()
MediaDevices.getUserMedia()會提示用戶給予使用媒體輸入的許可，媒體輸入會產(chǎn)生一個MediaStream，里面包含了請求的媒體類型的軌道。此流可以包含一個視頻軌道（來自硬件或者虛擬視頻源，比如相機、視頻采集設備和屏幕共享服務等等）、一個音頻軌道（同樣來自硬件或虛擬音頻源，比如麥克風、A/D 轉換器等等），也可能是其他軌道類型。
語法：
navigator.mediaDevices
.getUserMedia(constraints)
.then(function (stream) { /* 使用這個 stream stream */ })
.catch(function (err) { /* 處理 error */});
代碼：
<video autoplay id="video" width="400" height="300"></video>
<script>
var video = document.getElementById('video');
navigator.mediaDevices
.getUserMedia({ audio: true, video: true })
.then(function (stream) {
/* 使用這個 stream stream */
video.srcObject = stream
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(function (err) {
/* 處理 error */
console.log("The following error occurred: " + err.name);
});
</script>
WebRTC
MDN-WebRTC API
WebRTC（Web Real-Time Communication）是一種支持瀏覽器之間實時通信的開放式標準和技術，它使得瀏覽器可以直接在不需要插件或額外的軟件的情況下進行音頻、視頻和數(shù)據(jù)的傳輸和通信。WebRTC 技術的核心目標是實現(xiàn)實時的、點對點的通信，包括視頻聊天、音頻通話、數(shù)據(jù)共享等功能。
代碼：
<body>
<!-- 顯示本地視頻 -->
<h2>本地視頻</h2>
<video id="localVideo" autoplay playsinline style="width: 300px;"></video>
<!-- 顯示遠程視頻 -->
<h2>遠程視頻</h2>
<video id="remoteVideo" autoplay playsinline style="width: 300px;"></video>
<button id="startCall">發(fā)起通話</button>
<button id="answerCall">接聽通話</button>
//呼叫者：
<script>
const localVideo = document.getElementById('localVideo');
let localStream;
// 呼叫者：獲取本地攝像頭和麥克風權限
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
localStream = stream;
localVideo.srcObject = localStream;
})
.catch(error => {
console.error('獲取本地媒體流失敗:', error);
});
const startCallButton = document.getElementById('startCall');
startCallButton.addEventListener('click', () => {
startCall();
});
async function startCall() {
// 呼叫者：創(chuàng)建PeerConnection
const peerConnection = new RTCPeerConnection();
// 添加本地媒體流到PeerConnection
localStream.getTracks().forEach(track => {
peerConnection.addTrack(track, localStream);
});
// 呼叫者：創(chuàng)建Offer并設置本地描述
peerConnection.createOffer()
.then(offer => peerConnection.setLocalDescription(offer))
.then(() => {
// 發(fā)送本地描述到遠程
const offerSdp = peerConnection.localDescription;
// 在實際應用中，需要將offerSdp發(fā)送給遠程端
// 遠程端通過RTCPeerConnection.setRemoteDescription()設置遠程描述
})
.catch(error => {
console.error('創(chuàng)建Offer失敗:', error);
});
}
</script>
//被呼叫者：
<script>
const remoteVideo = document.getElementById('remoteVideo');
let remoteStream;
const answerCallButton = document.getElementById('answerCall');
answerCallButton.addEventListener('click', () => {
answerCall();
});
async function answerCall() {
// 創(chuàng)建PeerConnection
const peerConnection = new RTCPeerConnection();
// 設置ontrack事件處理程序以接收遠程流
peerConnection.ontrack = event => {
remoteStream = event.streams[0];
remoteVideo.srcObject = remoteStream;
};
// 在實際應用中，你需要獲取呼叫者發(fā)送的offerSdp
// 并通過RTCPeerConnection.setRemoteDescription()設置遠程描述
// 創(chuàng)建Answer并設置本地描述
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
const answerSdp = peerConnection.localDescription;
// 在實際應用中，你需要將answerSdp發(fā)送給呼叫者
// 呼叫者通過RTCPeerConnection.setRemoteDescription()設置遠程描述
}
</script>
</body>
騰訊云快直播
騰訊云直播-WebRTC協(xié)議推流
云直播提供了推流
SDK TXLivePusher用于 Web 推流，負責將瀏覽器采集的音視頻畫面通過 WebRTC 協(xié)議推送到直播服務器。目前支持攝像頭采集、麥克風采集、屏幕分享采集、本地媒體文件采集和用戶自定義采集等采集方式，支持對采集到的內容進行本地混流處理，然后推送到后端服務器。
1、引入初始化腳本（需要在 HTML 的 body 部分引入腳本，如果在 head 部分引入會報錯。）
<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script>
2、創(chuàng)建視頻容器
<div id="local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>
3、生成推流 SDK 實例
//通過全局對象 TXLivePusher 生成 SDK 實例，后續(xù)操作都是通過實例完成。
const livePusher = new TXLivePusher();
// 指定本地視頻播放器容器 div，瀏覽器采集到的音視頻畫面會渲染到這個 div 當中。
livePusher.setRenderView('local_video');
// 設置音視頻流
livePusher.setVideoQuality('720p');
// 設置音頻質量
livePusher.setAudioQuality('standard');
// 自定義設置幀率
livePusher.setProperty('setVideoFPS', 25);
4、開啟直播推流
// 開啟直播
// 打開攝像頭
livePusher.startCamera();
// 打開麥克風
livePusher.startMicrophone();
//傳入云直播推流地址，開始推流。
livePusher.startPush(推流地址);
使用騰訊云直播服務時，推流地址需要滿足騰訊云標準直播推流 URL 的格式 ，如下所示，它由四個部分組成：
5、關閉直播
// 關閉直播
// 停止直播推流
livePusher.stopPush();
// 關閉攝像頭
livePusher.stopCamera();
// 關閉麥克風
livePusher.stopMicrophone();
完整代碼：文章來源：http://www.zghlxwxcb.cn/news/detail-694275.html
<body>
<div id="local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>
</div>
<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script>
<script>
//通過全局對象 TXLivePusher 生成 SDK 實例，后續(xù)操作都是通過實例完成。
const livePusher = new TXLivePusher();
// 指定本地視頻播放器容器 div，瀏覽器采集到的音視頻畫面會渲染到這個 div 當中。
livePusher.setRenderView('local_video');
// 設置音視頻流
livePusher.setVideoQuality('720p');
// 設置音頻質量
livePusher.setAudioQuality('standard');
// 自定義設置幀率
livePusher.setProperty('setVideoFPS', 25);
// 開啟直播
// 打開攝像頭
livePusher.startCamera();
// 打開麥克風
livePusher.startMicrophone();
//傳入云直播推流地址，開始推流。
livePusher.startPush(推流地址);
// 關閉直播
// 停止直播推流
livePusher.stopPush();
// 關閉攝像頭
livePusher.stopCamera();
// 關閉麥克風
livePusher.stopMicrophone();
</script>
</body>
如有誤，請指正！文章來源地址http://www.zghlxwxcb.cn/news/detail-694275.html
到了這里，關于web端調用本地攝像頭麥克風+WebRTC騰訊云，實現(xiàn)直播功能的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
