组件封装
<template><div><div class="option"><input v-model="useStun" type="checkbox" /><label for="use-stun">Use STUN server</label></div><button @click="startPlay">Start</button><form @submit.prevent="sendMessage"><div><p>input text</p><textareav-model="message"cols="2"rows="3"class="form-control"style="width: 600px; height: 50px"></textarea></div><button type="submit">Send</button></form><div id="media"><h2>Media</h2><videoref="rtcMediaPlayer"style="width: 600px"controlsautoplay></video></div></div>
</template><script setup>
import { ref, onMounted } from "vue";
import { SrsRtcWhipWhepAsync } from "@/utils/srs.sdk"; // 确保路径正确const useStun = ref(false);
const message = ref("");
const rtcMediaPlayer = ref(null);
let sdk = null;const startPlay = async () => {rtcMediaPlayer.value.style.display = "block";if (sdk) {sdk.close();}sdk = new SrsRtcWhipWhepAsync();console.log(" sdk.stream", sdk.stream);rtcMediaPlayer.value.srcObject = sdk.stream;// sdk.stream// .getTracks()// .forEach((track) => rtcMediaPlayer.value.srcObject.addTrack(track));const host = window.location.hostname;const url = `http://10.3.208.9:1985/rtc/v1/whep/?app=live&stream=livestream`;try {await sdk.play(url);} catch (reason) {sdk.close();rtcMediaPlayer.value.style.display = "none";console.error(reason);}
};const sendMessage = async () => {const response = await fetch("/human", {body: JSON.stringify({text: message.value,type: "echo",}),headers: {"Content-Type": "application/json",},method: "POST",});message.value = "";console.log("Message sent:", await response.json());
};onMounted(() => {rtcMediaPlayer.value.style.display = "none";
});
</script><style scoped>
button {padding: 8px 16px;
}video {width: 100%;
}.option {margin-bottom: 8px;
}#media {max-width: 1280px;
}
</style>
srs.sdk.js文件
//
// Copyright (c) 2013-2021 Winlin
//
// SPDX-License-Identifier: MIT
//"use strict";function SrsError(name, message) {this.name = name;this.message = message;this.stack = new Error().stack;
}
SrsError.prototype = Object.create(Error.prototype);
SrsError.prototype.constructor = SrsError;// Depends on adapter-7.4.0.min.js from https://github.com/webrtc/adapter
// Async-awat-prmise based SRS RTC Publisher.
function SrsRtcPublisherAsync() {var self = {};// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMediaself.constraints = {audio: true,video: {width: { ideal: 320, max: 576 },},};// @see https://github.com/rtcdn/rtcdn-draft// @url The WebRTC url to play with, for example:// webrtc://r.ossrs.net/live/livestream// or specifies the API port:// webrtc://r.ossrs.net:11985/live/livestream// or autostart the publish:// webrtc://r.ossrs.net/live/livestream?autostart=true// or change the app from live to myapp:// webrtc://r.ossrs.net:11985/myapp/livestream// or change the stream from livestream to mystream:// webrtc://r.ossrs.net:11985/live/mystream// or set the api server to myapi.domain.com:// webrtc://myapi.domain.com/live/livestream// or set the candidate(eip) of answer:// webrtc://r.ossrs.net/live/livestream?candidate=39.107.238.185// or force to access https API:// webrtc://r.ossrs.net/live/livestream?schema=https// or use plaintext, without SRTP:// webrtc://r.ossrs.net/live/livestream?encrypt=false// or any other information, will pass-by in the query:// webrtc://r.ossrs.net/live/livestream?vhost=xxx// webrtc://r.ossrs.net/live/livestream?token=xxxself.publish = async function (url) {var conf = self.__internal.prepareUrl(url);self.pc.addTransceiver("audio", { direction: "sendonly" });self.pc.addTransceiver("video", { direction: "sendonly" });//self.pc.addTransceiver("video", {direction: "sendonly"});//self.pc.addTransceiver("audio", {direction: "sendonly"});if (!navigator.mediaDevices &&window.location.protocol === "http:" &&window.location.hostname !== "localhost") {throw new SrsError("HttpsRequiredError",`Please use HTTPS or localhost to publish, read https://github.com/ossrs/srs/issues/2762#issuecomment-983147576`);}var stream = await navigator.mediaDevices.getUserMedia(self.constraints);// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrackstream.getTracks().forEach(function (track) {self.pc.addTrack(track);// Notify about local track when stream is ok.self.ontrack && self.ontrack({ track: track });});var offer = await self.pc.createOffer();await self.pc.setLocalDescription(offer);var session = await new Promise(function (resolve, reject) {// @see https://github.com/rtcdn/rtcdn-draftvar data = {api: conf.apiUrl,tid: conf.tid,streamurl: conf.streamUrl,clientip: null,sdp: offer.sdp,};console.log("Generated offer: ", data);const xhr = new XMLHttpRequest();xhr.onload = function () {if (xhr.readyState !== xhr.DONE) return;if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);const data = JSON.parse(xhr.responseText);console.log("Got answer: ", data);return data.code ? reject(xhr) : resolve(data);};xhr.open("POST", conf.apiUrl, true);xhr.setRequestHeader("Content-type", "application/json");xhr.send(JSON.stringify(data));});await self.pc.setRemoteDescription(new RTCSessionDescription({ type: "answer", sdp: session.sdp }));session.simulator =conf.schema +"//" +conf.urlObject.server +":" +conf.port +"/rtc/v1/nack/";return session;};// Close the publisher.self.close = function () {self.pc && self.pc.close();self.pc = null;};// The callback when got local stream.// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrackself.ontrack = function (event) {// Add track to stream of SDK.self.stream.addTrack(event.track);};// Internal APIs.self.__internal = {defaultPath: "/rtc/v1/publish/",prepareUrl: function (webrtcUrl) {var urlObject = self.__internal.parse(webrtcUrl);// If user specifies the schema, use it as API schema.var schema = urlObject.user_query.schema;schema = schema ? schema + ":" : window.location.protocol;var port = urlObject.port || 1985;if (schema === "https:") {port = urlObject.port || 443;}// @see https://github.com/rtcdn/rtcdn-draftvar api = urlObject.user_query.play || self.__internal.defaultPath;if (api.lastIndexOf("/") !== api.length - 1) {api += "/";}var apiUrl = schema + "//" + urlObject.server + ":" + port + api;for (var key in urlObject.user_query) {if (key !== "api" && key !== "play") {apiUrl += "&" + key + "=" + urlObject.user_query[key];}}// Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=vapiUrl = apiUrl.replace(api + "&", api + "?");var streamUrl = urlObject.url;return {apiUrl: apiUrl,streamUrl: streamUrl,schema: schema,urlObject: urlObject,port: port,tid: Number(parseInt(new Date().getTime() * Math.random() * 100)).toString(16).slice(0, 7),};},parse: function (url) {// @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascrivar a = document.createElement("a");a.href = url.replace("rtmp://", "http://").replace("webrtc://", "http://").replace("rtc://", "http://");var vhost = a.hostname;var app = a.pathname.substring(1, a.pathname.lastIndexOf("/"));var stream = a.pathname.slice(a.pathname.lastIndexOf("/") + 1);// parse the vhost in the params of app, that srs supports.app = app.replace("...vhost...", "?vhost=");if (app.indexOf("?") >= 0) {var params = app.slice(app.indexOf("?"));app = app.slice(0, app.indexOf("?"));if (params.indexOf("vhost=") > 0) {vhost = params.slice(params.indexOf("vhost=") + "vhost=".length);if (vhost.indexOf("&") > 0) {vhost = vhost.slice(0, vhost.indexOf("&"));}}}// when vhost equals to server, and server is ip,// the vhost is __defaultVhost__if (a.hostname === vhost) {var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;if (re.test(a.hostname)) {vhost = "__defaultVhost__";}}// parse the schemavar schema = "rtmp";if (url.indexOf("://") > 0) {schema = url.slice(0, url.indexOf("://"));}var port = a.port;if (!port) {// Finger out by webrtc url, if contains http or https port, to overwrite default 1985.if (schema === "webrtc" && url.indexOf(`webrtc://${a.host}:`) === 0) {port = url.indexOf(`webrtc://${a.host}:80`) === 0 ? 80 : 443;}// Guess by schema.if (schema === "http") {port = 80;} else if (schema === "https") {port = 443;} else if (schema === "rtmp") {port = 1935;}}var ret = {url: url,schema: schema,server: a.hostname,port: port,vhost: vhost,app: app,stream: stream,};self.__internal.fill_query(a.search, ret);// For webrtc API, we use 443 if page is https, or schema specified it.if (!ret.port) {if (schema === "webrtc" || schema === "rtc") {if (ret.user_query.schema === "https") {ret.port = 443;} else if (window.location.href.indexOf("https://") === 0) {ret.port = 443;} else {// For WebRTC, SRS use 1985 as default API port.ret.port = 1985;}}}return ret;},fill_query: function (query_string, obj) {// pure user query object.obj.user_query = {};if (query_string.length === 0) {return;}// split again for angularjs.if (query_string.indexOf("?") >= 0) {query_string = query_string.split("?")[1];}var queries = query_string.split("&");for (var i = 0; i < queries.length; i++) {var elem = queries[i];var query = elem.split("=");obj[query[0]] = query[1];obj.user_query[query[0]] = query[1];}// alias domain for vhost.if (obj.domain) {obj.vhost = obj.domain;}},};self.pc = new RTCPeerConnection(null);// To keep api consistent between player and publisher.// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack// @see https://webrtc.org/getting-started/media-devicesself.stream = new MediaStream();return self;
}// Depends on adapter-7.4.0.min.js from https://github.com/webrtc/adapter
// Async-await-promise based SRS RTC Player.
function SrsRtcPlayerAsync() {var self = {};// @see https://github.com/rtcdn/rtcdn-draft// @url The WebRTC url to play with, for example:// webrtc://r.ossrs.net/live/livestream// or specifies the API port:// webrtc://r.ossrs.net:11985/live/livestream// webrtc://r.ossrs.net:80/live/livestream// or autostart the play:// webrtc://r.ossrs.net/live/livestream?autostart=true// or change the app from live to myapp:// webrtc://r.ossrs.net:11985/myapp/livestream// or change the stream from livestream to mystream:// webrtc://r.ossrs.net:11985/live/mystream// or set the api server to myapi.domain.com:// webrtc://myapi.domain.com/live/livestream// or set the candidate(eip) of answer:// webrtc://r.ossrs.net/live/livestream?candidate=39.107.238.185// or force to access https API:// webrtc://r.ossrs.net/live/livestream?schema=https// or use plaintext, without SRTP:// webrtc://r.ossrs.net/live/livestream?encrypt=false// or any other information, will pass-by in the query:// webrtc://r.ossrs.net/live/livestream?vhost=xxx// webrtc://r.ossrs.net/live/livestream?token=xxxself.play = async function (url) {var conf = self.__internal.prepareUrl(url);self.pc.addTransceiver("audio", { direction: "recvonly" });self.pc.addTransceiver("video", { direction: "recvonly" });//self.pc.addTransceiver("video", {direction: "recvonly"});//self.pc.addTransceiver("audio", {direction: "recvonly"});var offer = await self.pc.createOffer();await self.pc.setLocalDescription(offer);var session = await new Promise(function (resolve, reject) {// @see https://github.com/rtcdn/rtcdn-draftvar data = {api: conf.apiUrl,tid: conf.tid,streamurl: conf.streamUrl,clientip: null,sdp: offer.sdp,};console.log("Generated offer: ", data);const xhr = new XMLHttpRequest();xhr.onload = function () {if (xhr.readyState !== xhr.DONE) return;if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);const data = JSON.parse(xhr.responseText);console.log("Got answer: ", data);return data.code ? reject(xhr) : resolve(data);};xhr.open("POST", conf.apiUrl, true);xhr.setRequestHeader("Content-type", "application/json");xhr.send(JSON.stringify(data));});await self.pc.setRemoteDescription(new RTCSessionDescription({ type: "answer", sdp: session.sdp }));session.simulator =conf.schema +"//" +conf.urlObject.server +":" +conf.port +"/rtc/v1/nack/";return session;};// Close the player.self.close = function () {self.pc && self.pc.close();self.pc = null;};// The callback when got remote track.// Note that the onaddstream is deprecated, @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onaddstreamself.ontrack = function (event) {// https://webrtc.org/getting-started/remote-streamsself.stream.addTrack(event.track);};// Internal APIs.self.__internal = {defaultPath: "/rtc/v1/play/",prepareUrl: function (webrtcUrl) {var urlObject = self.__internal.parse(webrtcUrl);// If user specifies the schema, use it as API schema.var schema = urlObject.user_query.schema;schema = schema ? schema + ":" : window.location.protocol;var port = urlObject.port || 1985;if (schema === "https:") {port = urlObject.port || 443;}// @see https://github.com/rtcdn/rtcdn-draftvar api = urlObject.user_query.play || self.__internal.defaultPath;if (api.lastIndexOf("/") !== api.length - 1) {api += "/";}var apiUrl = schema + "//" + urlObject.server + ":" + port + api;for (var key in urlObject.user_query) {if (key !== "api" && key !== "play") {apiUrl += "&" + key + "=" + urlObject.user_query[key];}}// Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=vapiUrl = apiUrl.replace(api + "&", api + "?");var streamUrl = urlObject.url;return {apiUrl: apiUrl,streamUrl: streamUrl,schema: schema,urlObject: urlObject,port: port,tid: Number(parseInt(new Date().getTime() * Math.random() * 100)).toString(16).slice(0, 7),};},parse: function (url) {// @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascrivar a = document.createElement("a");a.href = url.replace("rtmp://", "http://").replace("webrtc://", "http://").replace("rtc://", "http://");var vhost = a.hostname;var app = a.pathname.substring(1, a.pathname.lastIndexOf("/"));var stream = a.pathname.slice(a.pathname.lastIndexOf("/") + 1);// parse the vhost in the params of app, that srs supports.app = app.replace("...vhost...", "?vhost=");if (app.indexOf("?") >= 0) {var params = app.slice(app.indexOf("?"));app = app.slice(0, app.indexOf("?"));if (params.indexOf("vhost=") > 0) {vhost = params.slice(params.indexOf("vhost=") + "vhost=".length);if (vhost.indexOf("&") > 0) {vhost = vhost.slice(0, vhost.indexOf("&"));}}}// when vhost equals to server, and server is ip,// the vhost is __defaultVhost__if (a.hostname === vhost) {var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;if (re.test(a.hostname)) {vhost = "__defaultVhost__";}}// parse the schemavar schema = "rtmp";if (url.indexOf("://") > 0) {schema = url.slice(0, url.indexOf("://"));}var port = a.port;if (!port) {// Finger out by webrtc url, if contains http or https port, to overwrite default 1985.if (schema === "webrtc" && url.indexOf(`webrtc://${a.host}:`) === 0) {port = url.indexOf(`webrtc://${a.host}:80`) === 0 ? 80 : 443;}// Guess by schema.if (schema === "http") {port = 80;} else if (schema === "https") {port = 443;} else if (schema === "rtmp") {port = 1935;}}var ret = {url: url,schema: schema,server: a.hostname,port: port,vhost: vhost,app: app,stream: stream,};self.__internal.fill_query(a.search, ret);// For webrtc API, we use 443 if page is https, or schema specified it.if (!ret.port) {if (schema === "webrtc" || schema === "rtc") {if (ret.user_query.schema === "https") {ret.port = 443;} else if (window.location.href.indexOf("https://") === 0) {ret.port = 443;} else {// For WebRTC, SRS use 1985 as default API port.ret.port = 1985;}}}return ret;},fill_query: function (query_string, obj) {// pure user query object.obj.user_query = {};if (query_string.length === 0) {return;}// split again for angularjs.if (query_string.indexOf("?") >= 0) {query_string = query_string.split("?")[1];}var queries = query_string.split("&");for (var i = 0; i < queries.length; i++) {var elem = queries[i];var query = elem.split("=");obj[query[0]] = query[1];obj.user_query[query[0]] = query[1];}// alias domain for vhost.if (obj.domain) {obj.vhost = obj.domain;}},};self.pc = new RTCPeerConnection(null);// Create a stream to add track to the stream, @see https://webrtc.org/getting-started/remote-streamsself.stream = new MediaStream();// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrackself.pc.ontrack = function (event) {if (self.ontrack) {self.ontrack(event);}};return self;
}// Depends on adapter-7.4.0.min.js from https://github.com/webrtc/adapter
// Async-awat-prmise based SRS RTC Publisher by WHIP.
function SrsRtcWhipWhepAsync() {var self = {};// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMediaself.constraints = {audio: true,video: {width: { ideal: 320, max: 576 },},};// See https://datatracker.ietf.org/doc/draft-ietf-wish-whip/// @url The WebRTC url to publish with, for example:// http://localhost:1985/rtc/v1/whip/?app=live&stream=livestream// @options The options to control playing, supports:// videoOnly: boolean, whether only play video, default to false.// audioOnly: boolean, whether only play audio, default to false.self.publish = async function (url, options) {if (url.indexOf("/whip/") === -1)throw new Error(`invalid WHIP url ${url}`);if (options?.videoOnly && options?.audioOnly)throw new Error(`The videoOnly and audioOnly in options can't be true at the same time`);if (!options?.videoOnly) {self.pc.addTransceiver("audio", { direction: "sendonly" });} else {self.constraints.audio = false;}if (!options?.audioOnly) {self.pc.addTransceiver("video", { direction: "sendonly" });} else {self.constraints.video = false;}if (!navigator.mediaDevices &&window.location.protocol === "http:" &&window.location.hostname !== "localhost") {throw new SrsError("HttpsRequiredError",`Please use HTTPS or localhost to publish, read https://github.com/ossrs/srs/issues/2762#issuecomment-983147576`);}var stream = await navigator.mediaDevices.getUserMedia(self.constraints);// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrackstream.getTracks().forEach(function (track) {self.pc.addTrack(track);// Notify about local track when stream is ok.self.ontrack && self.ontrack({ track: track });});var offer = await self.pc.createOffer();await self.pc.setLocalDescription(offer);const answer = await new Promise(function (resolve, reject) {console.log(`Generated offer: ${offer.sdp}`);const xhr = new XMLHttpRequest();xhr.onload = function () {if (xhr.readyState !== xhr.DONE) return;if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);const data = xhr.responseText;console.log("Got answer: ", data);return data.code ? reject(xhr) : resolve(data);};xhr.open("POST", url, true);xhr.setRequestHeader("Content-type", "application/sdp");xhr.send(offer.sdp);});await self.pc.setRemoteDescription(new RTCSessionDescription({ type: "answer", sdp: answer }));return self.__internal.parseId(url, offer.sdp, answer);};// See https://datatracker.ietf.org/doc/draft-ietf-wish-whip/// @url The WebRTC url to play with, for example:// http://localhost:1985/rtc/v1/whep/?app=live&stream=livestream// @options The options to control playing, supports:// videoOnly: boolean, whether only play video, default to false.// audioOnly: boolean, whether only play audio, default to false.self.play = async function (url, options) {if (url.indexOf("/whip-play/") === -1 && url.indexOf("/whep/") === -1)throw new Error(`invalid WHEP url ${url}`);if (options?.videoOnly && options?.audioOnly)throw new Error(`The videoOnly and audioOnly in options can't be true at the same time`);if (!options?.videoOnly)self.pc.addTransceiver("audio", { direction: "recvonly" });if (!options?.audioOnly)self.pc.addTransceiver("video", { direction: "recvonly" });var offer = await self.pc.createOffer();await self.pc.setLocalDescription(offer);const answer = await new Promise(function (resolve, reject) {console.log(`Generated offer: ${offer.sdp}`);const xhr = new XMLHttpRequest();xhr.onload = function () {if (xhr.readyState !== xhr.DONE) return;if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);const data = xhr.responseText;console.log("Got answer: ", data);return data.code ? reject(xhr) : resolve(data);};xhr.open("POST", url, true);xhr.setRequestHeader("Content-type", "application/sdp");xhr.send(offer.sdp);});await self.pc.setRemoteDescription(new RTCSessionDescription({ type: "answer", sdp: answer }));return self.__internal.parseId(url, offer.sdp, answer);};// Close the publisher.self.close = function () {self.pc && self.pc.close();self.pc = null;};// The callback when got local stream.// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrackself.ontrack = function (event) {// Add track to stream of SDK.self.stream.addTrack(event.track);};self.pc = new RTCPeerConnection(null);// To keep api consistent between player and publisher.// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack// @see https://webrtc.org/getting-started/media-devicesself.stream = new MediaStream();// Internal APIs.self.__internal = {parseId: (url, offer, answer) => {let sessionid = offer.substr(offer.indexOf("a=ice-ufrag:") + "a=ice-ufrag:".length);sessionid = sessionid.substr(0, sessionid.indexOf("\n") - 1) + ":";sessionid += answer.substr(answer.indexOf("a=ice-ufrag:") + "a=ice-ufrag:".length);sessionid = sessionid.substr(0, sessionid.indexOf("\n"));const a = document.createElement("a");a.href = url;return {sessionid: sessionid, // Should be ice-ufrag of answer:offer.simulator: a.protocol + "//" + a.host + "/rtc/v1/nack/",};},};// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrackself.pc.ontrack = function (event) {if (self.ontrack) {self.ontrack(event);}};return self;
}// Format the codec of RTCRtpSender, kind(audio/video) is optional filter.
// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
function SrsRtcFormatSenders(senders, kind) {var codecs = [];senders.forEach(function (sender) {var params = sender.getParameters();params &¶ms.codecs &¶ms.codecs.forEach(function (c) {if (kind && sender.track.kind !== kind) {return;}if (c.mimeType.indexOf("/red") > 0 ||c.mimeType.indexOf("/rtx") > 0 ||c.mimeType.indexOf("/fec") > 0) {return;}var s = "";s += c.mimeType.replace("audio/", "").replace("video/", "");s += ", " + c.clockRate + "HZ";if (sender.track.kind === "audio") {s += ", channels: " + c.channels;}s += ", pt: " + c.payloadType;codecs.push(s);});});return codecs.join(", ");
}export {SrsError,SrsRtcPublisherAsync,SrsRtcWhipWhepAsync,SrsRtcFormatSenders,SrsRtcPlayerAsync,
};