SRS ストリーミング メディア サーバーは、開発者が独自のビジネス シナリオに従って独自のストリーミング メディア サービスをカスタマイズできる強力な API を提供します。
ローカル環境:
仮想マシン VMPRO15 は Linux システム: CentOS7 をインストールします
SRS サービス バージョン: SRSv4-b2-4.0.215 (SRSv4 は 2021 年 12 月に安定版を正式にリリースしました)
Linux はポートとサービスを開きます。
Linuxネットワーク環境：192.168.5.104
物理マシンのローカルネットワーク環境: 192.168.5.101
1. SRS サービスによって提供される http API をテストするには、まず SRS 構成ファイルで対応するサービスを有効にする必要があります。
2. API にアクセスします。
2.1. SRS は、メモリなしでルート ディレクトリから移動できる API ブレッドクラムを提供します。共通フィールドは次のとおりです。
- code はエラー コードを示します。Linux の規則に従って、0 は成功を示します。
- urls はブレッドクラム ナビゲーション、この API の下にあるサブ API (リンク) を意味します。
- data は、最後のレベルでサービスを提供する API と返されたデータを示します。
2.2. Postman を使用して、SRS が提供するトップレベル API (http://192.168.5.104:1985) をリクエストします。
2.3. 次のレベルの API (http://192.168.5.104:1985/api) に再度アクセスします。
2.4. 続きを読む (http://192.168.5.104:1985/api/v1):
2.5. SRS サーバー (http://192.168.5.104:1985/api/v1/clients) の接続クライアント情報を取得してみます。
2.6、SRS HTTP API はクロスドメインをサポートし、js は SRS の http API を直接呼び出すことができます。
SRS は 2 つのクロスドメイン方式をサポートしています。
- OPTIONS: jquery はドメイン間で API を直接リクエストでき、ブラウザは OPTIONS クロスドメイン リクエストを送信します。SRS がクロスドメインを許可した後、ブラウザは API リクエストを再度開始します。
- JSONP: jquery/angularjs は JSONP クロスドメイン リクエストを開始でき、サーバーは js ファイルとして応答します。その内容は関数を呼び出すことであり、関数名は QueryString のコールバックによって指定されます。
- JSONP-DELETE: JSONP は GET しかできないため、DELETE メソッドは QueryString のメソッドで指定されます。
2.7. SRS には https_api のサポートが組み込まれており、設定で https を有効にするだけで済みます (証明書を独自の証明書に置き換えます)。
http_api {
enabled on;
listen 1985;
https {
#是否开启https
enabled on;
#监听端口号
listen 1990;
#SSL私钥文件
# openssl genrsa -out server.key 2048
# default: ./conf/server.key
key ./conf/server.key;
# SSL公共证书
# openssl req -new -x509 -key server.key -out server.crt -days 3650 -subj "/C=CN/ST=Beijing/L=Beijing/O=Me/OU=Me/CN=ossrs.net"
# default: ./conf/server.crt
cert ./conf/server.crt;
}
}2.8. SRS によって提供されるすべての API と説明 (継続的なバージョン更新により不正確になる可能性があります):
3. インターフェイス テストにより、SRS サーバーに接続されたクライアントが開始されます。
SRS が提供する API を介して SRS に接続されたクライアントをキックオフするテスト。まず、すべてのクライアント情報を取得するために GET リクエスト (http://192.168.5.104:1985/api/v1/clients) が必要です。クライアント ID を取得します。 DELETE リクエスト (http://192.168.5.104:1985/api/v1/clients/clientID) がクライアントをキックオフします。ストリーミング クライアントのみをキックする場合は、API (http ://192.168.5.104:1985 /api/v1/streams)、streams.publish.cid はストリーミング クライアント ID 番号です。
3.1. HBuilderX を使用して uniapp プロジェクトを作成し、インデックスとライブ 2 ページを作成し、uniapp 公式 UI コンポーネント uni-table と uni-poppop を使用し、HBuilderX プラグイン モールを通じて直接インストールし、uniapp 公式ストリーミング プラグを使用します。 live-pusher でビデオキャプチャとストリーミングを実現
UI コンポーネントは次のとおりです。
インデックス.ビュー
<template>
<view>
<live-pusher class="livePusher-top" id="livePusher" @statechange="statechange" :beauty="beauty" :whiteness="whiteness" :url="url" :enable-camera="enableCamera" mode="FHD"></live-pusher>
<button v-if="flag" @click="startLive">开始直播</button>
<button v-if="!flag" @click="stopLive">结束直播</button>
<button @click="pauseLive">暂停直播</button>
<button @click="resumeLive">恢复直播</button>
<view class="uni-title">美颜</view>
<slider min="0" max="9" value="0" @change="sliderChangeBeauty" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" show-value />
<view class="uni-title">美白</view>
<slider min="0" max="9" value="0" @change="sliderChangeWhiteness" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" show-value />
<uni-popup ref="popup" :mask-click="false" type="message">
<uni-popup-message type="warn" :message="message" :duration="0"></uni-popup-message>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
url: 'rtmp://192.168.5.104/live/1',//推流地址
enableCamera: true,//开启摄像头
context: null,
beauty : 0,//美颜值
whiteness : 0 ,//美白值
flag : true,
message : null,//提示消息
date : null,//定义时间
dateStr : null
};
},
onReady() {
this.context = uni.createLivePusherContext('livePusher', this);
// this.context.switchCamera() // 摄像头切换（切换为后置）
setTimeout(()=>{
this.context.startPreview() // 摄像头预览 （不加会黑屏）
},1000);
},
methods: {
//开始推流
startLive() {
this.context.start({
success: (res) => {
this.flag=!this.flag;
console.log('livePusher.start:' + JSON.stringify(res));
},
fail: (err)=>{
console.log("livePusher失败:"+JSON.stringify(err));
},
complete:(res)=>{
console.log("livePusher执行完成:"+JSON.stringify(res));
}
});
},
//停止推流
stopLive() {
this.context.stop({
success: (res) => {
this.flag=!this.flag;
console.log('livePusher.stop:'+JSON.stringify(res));
this.context.stopPreview(); // 关闭摄像头预览
}
});
},
//暂停推流
pauseLive(){
this.context.pause({
success: (res)=>{
console.log('livePusher.pause:'+JSON.stringify(res));
}
});
},
//恢复推流
resumeLive(){
this.context.resume({
success: (res)=>{
console.log('livePusher.resume:'+JSON.stringify(res));
}
});
},
//设置美颜
sliderChangeBeauty(e){
this.beauty = e.detail.value;
console.log("美颜值改变"+e.detail.value);
},
//设置美白
sliderChangeWhiteness(e){
this.whiteness = e.detail.value;
console.log("美白值改变"+e.detail.value);
},
//状态改变数据，部分状态码如下：
//1001:连接RTMP服务器成功
//1002：RTMP开始推流
//1003：打开摄像头成功
//1007：首帧画面采集完成
//1008：启动硬编
//1101：上行带宽不足，数据发送不及时
//1102：启动网络重连
//3004：UNKNOWN
//3005：tcp通道发送失败 错误码[-4]
//-1307：所有IP都已经尝试失败,可以放弃治疗
statechange(e){
console.log("状态"+e.detail.code+e.detail.message);
if(e.detail.code==3005){//TCP通道断开
this.date = new Date();
this.dateStr = this.date.getFullYear()+":"
+this.date.getMonth()+1+":"
+this.date.getDate()+":"
+this.date.getHours()+":"
+this.date.getMinutes()+":"
+this.date.getSeconds();
this.flag = true;
this.message = this.dateStr+"网络断开,正在重新连接";
this.open();
}if(e.detail.code==1102){//启动网络重连
}if(e.detail.code==1001){//已经连接RTMO服务器
// this.close();
// this.message = "已连接服务器";
// this.open();
}if(e.detail.code==1002){//RTMP开始推流
this.flag = false;
this.close();
}if(e.detail.code==-1307){//重连失败
this.close();
this.message = "重连失败";
this.open();
}
},
open() {
this.$refs.popup.open('top')
},
close() {
this.$refs.popup.close()
}
}
}
</script>
<style>
.livePusher-top{
background-color:white;
}
</style>
live.vue
<template>
<view>
<uni-table border stripe emptyText="暂无更多数据" >
<!-- 表头行 -->
<uni-tr>
<uni-th align="center">客户端ID</uni-th>
<uni-th align="center">客户端IP</uni-th>
<uni-th align="center">类型</uni-th>
<uni-th align="center">操作</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr v-for="(list,index) in liveList">
<uni-td align="center">{
{list.id}}</uni-td>
<uni-td align="center">{
{list.ip}}</uni-td>
<uni-td align="center">{
{list.type}}</uni-td>
<uni-td align="center">
<button @click="tichu(list.id,index)" class="mini-btn" type="warn" size="mini">踢出</button>
</uni-td>
</uni-tr>
</uni-table>
</view>
</template>
<script>
export default {
data() {
return {
//定义客户端列表
liveList : null,
}
},
onReady() {
// 每秒更新客户端列表数据
setInterval(()=>{
uni.request({
url:"http://192.168.5.104:1985/api/v1/clients",
success: (res) => {
this.liveList = res.data.clients;
},
fail: (err) =>{
console.log(err.data);
console.log("失败");
}
})
},1000)
},
methods: {
tichu(clientID,index){
uni.request({
url:"http://192.168.5.104:1985/api/v1/clients/"+clientID,
method:'DELETE',
success: (res) => {
if(res.data.code==0){
this.liveList.splice(index,1);
}
},
fail: (err) =>{
console.log(err.data);
console.log("失败");
}
})
}
}
}
</script>
<style>
</style>
3.2. SRS サービスの設定、http_api サービスを開く、RTC サービスを開く、RTMP を RTC ストリームに開く、後で RTMP プロトコルを使用してストリームをプッシュする、RTC プロトコルを使用してストリームをプルする (再生)
3.3. ページを作成した後は、直接実行することができます。HBuilderX を開いて携帯電話に接続し、実機上で実行して、ライブ ブロードキャスト (プッシュ ストリーミング) を開始します。
3.4. Google Chrome を使用して http://192.168.5.104:8080 を開き、RTC プレーヤーを使用してストリームをプルします (RTC プロトコルは再生遅延が低い)
3.5. HBuilderX を使用してブラウザ (Chrome) を実行し、ライブ ブロードキャスト センターを開き、クライアントをキックアウトします。
このページには、2 つのクライアント (GET リクエスト http://192.168.5.104:1985/api/v1/clients)、1 つのプッシャーと 1 つのプーラーが表示されます。
PC 側の GIF のスクリーンショット (画質は説明しにくいですが、CSDN はビデオのアップロードをサポートしていません)、約 32 秒でキックされ、携帯電話のプッシュ ストリームが切断されて再接続されたため、その後自動的に再接続されます。プッシュエンドから追い出される ストリーミング後に画面がフリーズし、再接続すると再び動きます。
モバイルのスクリーンショット
上記のことから、http_api を介して SRS サービスを操作することにより、クライアントが正常に追い出されたことがわかります。