抖音直播投屏到电视

博主： jonasen
发布时间：2021 年 05 月 24 日
1823次浏览
4 条评论
3256字数
分类：分享

## 前言

> 因为家中老人在跟抖音的主播学习广场舞，用手机看直播实在不是特别方便，而且有的时候来个信息，接个电话时不时就错过一部分内容，所以就有了下面的这个抖音直播投屏到电视的应用

## 代码

### 框架

| 组建名称     | 版本   |
| -------------- | -------- |
| Thinkphp     | 5.0    |
| HBuilder X   | 3.1.13 |
| 安卓Dlna投屏 | 1.0.1  |

### 实现

> 这里要说明下，我将上篇文章[php抖音直播源抓取](https://www.jonasen.cn/share/149.html) 封装成了个api可以直接解析，如果需要自建的，可以参考下，自己封装下解析地址。

```javascript
<template>
	<view class="content">
		<view class="">
		<button type="default" @click="copyToClip()">粘贴</button>
		</view>
		<view class="text-area">
			<text v-html="title" class="title"></text>
		</view>
		<view>
			<view v-for="dev in devList" :key="dev.id">
				<button @click="start(dev.id)">{{dev.name}}</button>
			</view>
		</view>
		<button @click="search">选择设备</button>
	</view>
</template>

},
			isURL(domain) {
			  var name = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;
			  if( !(name.test(domain)))
			  {
				 
			    return false;
			  }
			  else
			  { 
				 var arr=domain.match(name);
				 if(arr[0]=='v.douyin.com'){
					 var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
					 var arr1=reg.exec(domain);
					 var _that=this;
					 uni.request({
					 	method:'GET',
						url:'http://www.xxx.cc/Douyin?url='+arr1[0], //这里是我自己封装的抖音直播解析的api
						success: (res) => {
							if(res.data.code==200){
								//res.data.data.url
								this.playurl=res.data.data.url;
								this.title=res.data.data.title;
							}else{
								uni.showToast({
									title:'系统错误请稍后再试',
									icon:none
							
								})
							}
						}
					 })
				 }else{
					this.playurl=arr[0];
					this.playContent=arr[0]
				 }
			    return true;
			  }
			},
			search(){
				this.title = ''
				this.devList = []
				dlna.search(result => {
					//alert(result.type)
					this.title += '通知类型:' + result.type + ' 设备名:' + result.name + ' 设备Id:' + result.id + '<br />'
					if(result.type === 'add'){
						this.devList.push({'id': result.id, 'name': result.name})
					}else {
						this.devList = this.devList.filter(x => x.id != result.id)
					}
			
				})
			},
			start(id){
				dlna.play({'id': id, 'url': this.playurl, 'title': this.title}, result => {
					this.title = result.msg
				})
			}
		}
	}
</script>

.text-area {
		display: flex;
		justify-content: center;
	}

.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

```

这里将源代码整体打包了，需要研究的小伙伴自行下载。

[源码下载](https://wwe.lanzoui.com/iuiSYpes14h)

[app下载](https://wwe.lanzoui.com/iTigmpes17a)

### 操作方法

#### 1、打开直播页面，点击 `...`点击分享![1.jpg](https://www.jonasen.cn/usr/uploads/2021/05/2565139449.jpg)

#### 2、点击复制链接

![2.jpg](https://www.jonasen.cn/usr/uploads/2021/05/4273382872.jpg)

#### 点击app中的`粘贴`按钮

当页面出现直播的标题后，点击选择设备进行投屏

![3.jpg](https://www.jonasen.cn/usr/uploads/2021/05/4169453063.jpg)

最后修改：2021 年 05 月 24 日 12 : 11 PM

如果觉得我的文章对你有用，请随意赞赏

4 条评论

夏日博客
July 13th, 2021 at 09:54 pm

看到不少抖音投屏的，还真不知道怎么弄的。

回复
1. jonasen
  July 15th, 2021 at 02:57 pm
  
  @夏日博客
  
  抖音视频投屏比较简单，抖音直播的话相对来说还算有点难度OωO
  
  回复
刷抖音下拉
July 13th, 2021 at 01:47 pm

厉害了，自己开发的吗

回复
1. jonasen
  July 15th, 2021 at 02:57 pm
  
  @刷抖音下拉
  
  当然啦（╯‵□′）╯︵┴─┴
  
  回复