|
|
@@ -28,7 +28,12 @@ export default {
|
|
|
// record
|
|
|
mediaRecord: null,
|
|
|
isRecording: false,
|
|
|
-
|
|
|
+ player: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if(this.player){
|
|
|
+ this.player.close();
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
@@ -52,7 +57,8 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
async startRecordAudio(){
|
|
|
- let err,stream;
|
|
|
+ let err,stream,res;
|
|
|
+
|
|
|
if(!this.mediaStream){
|
|
|
[err,stream] = await handle(this.queryMediaStream());
|
|
|
if(err){
|
|
|
@@ -73,6 +79,36 @@ export default {
|
|
|
let app = "broadcast";
|
|
|
let stream = `audio${this.deviceId}`
|
|
|
let zlmSdpUrl = `/zlmServer/index/api/webrtc?app=${app}&stream=${stream}&type=push&sign=${pushKey}`;
|
|
|
+
|
|
|
+ let ffmpegStreamId = `ff_audio${this.deviceId}`
|
|
|
+ let audioStreamUrl = `webrtc://${hookHost}/${app}/${stream}`
|
|
|
+ let dstUrl = `rtsp://127.0.0.1/${app}/${ffmpegStreamId}`;
|
|
|
+ let playAudioStreamUrl = `https://192.168.1.203:29010/index/api/webrtc?app=${app}&stream=${stream}&type=play`;
|
|
|
+ console.log(audioStreamUrl)
|
|
|
+ console.log(playAudioStreamUrl)
|
|
|
+
|
|
|
+ //secret Y api操作密钥(配置文件配置)，如果操作ip是127.0.0.1，则不需要此参数
|
|
|
+ // src_url Y FFmpeg拉流地址,支持任意协议或格式(只要FFmpeg支持即可)
|
|
|
+ // dst_url Y FFmpeg rtmp推流地址，一般都是推给自己，例如rtmp://127.0.0.1/live/stream_form_ffmpeg
|
|
|
+ // timeout_ms Y FFmpeg推流成功超时时间
|
|
|
+ // enable_hls Y 是否开启hls录制
|
|
|
+ // enable_mp4 Y 是否开启mp4录制
|
|
|
+ // ffmpeg_cmd_key
|
|
|
+ let addFFmpegSourceData = {
|
|
|
+ secret:"",
|
|
|
+ src_url: audioStreamUrl,
|
|
|
+ dst_url: dstUrl,
|
|
|
+ timeout_ms: 30,
|
|
|
+ enable_hls: 0,
|
|
|
+ enable_mp4: 0,
|
|
|
+ }
|
|
|
+ let ffmpegStreamProxyUrl = `/zlmServer/index/api/addFFmpegSource`
|
|
|
+ ffmpegStreamProxyUrl += `?secret=${addFFmpegSourceData.secret}`
|
|
|
+ // ffmpegStreamProxyUrl += `&src_url=${addFFmpegSourceData.src_url}`
|
|
|
+ // ffmpegStreamProxyUrl += `&dst_url=${addFFmpegSourceData.dst_url}`
|
|
|
+ // ffmpegStreamProxyUrl += `&timeout_ms=${addFFmpegSourceData.timeout_ms}`
|
|
|
+ // ffmpegStreamProxyUrl += `&enable_hls=${addFFmpegSourceData.enable_hls}`
|
|
|
+ // ffmpegStreamProxyUrl += `&enable_mp4=${addFFmpegSourceData.enable_mp4}`
|
|
|
let player = new ZLMRTCClient.Endpoint(
|
|
|
{
|
|
|
|
|
|
@@ -88,7 +124,31 @@ export default {
|
|
|
usedatachannel:false,
|
|
|
}
|
|
|
);
|
|
|
+ this.player = player;
|
|
|
console.log(player);
|
|
|
+ player.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,async (state)=>
|
|
|
+ {// RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
|
|
|
+ console.log('当前状态==>',state);
|
|
|
+ console.log(ffmpegStreamProxyUrl);
|
|
|
+ if(state === 'connected'){
|
|
|
+ // 连接成功添加ffmpeg 推流代理
|
|
|
+ [err,res] = await handle(this.$axios({
|
|
|
+ method: 'post',
|
|
|
+ url: ffmpegStreamProxyUrl,
|
|
|
+ data:addFFmpegSourceData
|
|
|
+ }));
|
|
|
+ if(err){
|
|
|
+ this.$message.error(err.message);
|
|
|
+ console.log("[创建拉流代理] ")
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ console.log(res);
|
|
|
+ [err,res] = await handle(this.sendBroaderCast(ffmpegStreamId));
|
|
|
+
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,function(e)
|
|
|
{// ICE 协商出错
|
|
|
console.log('ICE 协商出错')
|
|
|
@@ -118,11 +178,7 @@ export default {
|
|
|
console.log('获取本地流失败')
|
|
|
});
|
|
|
|
|
|
- player.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,function(state)
|
|
|
- {// RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
|
|
|
- console.log('当前状态==>',state)
|
|
|
- });
|
|
|
- await this.sendBroaderCast(stream);
|
|
|
+
|
|
|
|
|
|
}
|
|
|
if(!this.isQueryAllowAudio){
|
|
|
@@ -159,6 +215,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
